PlantUML 是一個(gè)開源項(xiàng)目,支持通過腳本繪圖。PlantUML 可以繪制如下種類的 UML 圖:
- 時(shí)序圖
- 用例圖
- 類圖
- 活動(dòng)圖
- 組件圖
- 狀態(tài)圖
- 對(duì)象圖
- 部署圖
- 定時(shí)圖
同時(shí)還支持以下非 UML 圖:
- 線框圖形界面
- 架構(gòu)圖
- 規(guī)范和描述語言 (SDL)
- Ditaa diagram
- 甘特圖
- 思維導(dǎo)圖
- Work Breakdown Structure diagram
- 以 AsciiMath 或 JLaTeXMath 符號(hào)的數(shù)學(xué)公式
- Entity Relationship diagram
通過簡(jiǎn)單直觀的語言來定義這些示意圖。中文文檔:https://plantuml.com/zh/guide
下面通過一些簡(jiǎn)單案例來完成思維導(dǎo)圖,時(shí)序圖,活動(dòng)圖
vscode 插件安裝和使用
插件商店搜索 "PlantUML ",點(diǎn)擊安裝即可
使用只需要新建一個(gè) puml 文件 或者 md文件 ,預(yù)覽的話在 Windows 版本的 VS Code 中,通過 Ctrl + Shift + P 打開命令面板,輸入 PlantUML,找到 Preview Current Diagram 命令,或者通過 快捷鍵 Alt + D,打開預(yù)覽頁面。
思維導(dǎo)圖繪制
@startmindmap
*[#409EFF] vue3-auth
**[#79bbff] 登陸認(rèn)證
***_ 登陸和登出
***_ 用戶注冊(cè)
***_ 用戶狀態(tài)和信息保存
**[#79bbff] 權(quán)限鑒定
***_ 用戶權(quán)限獲取
***_ 頁面訪問權(quán)限(菜單權(quán)限)
***_ 頁面功能權(quán)限(按鈕權(quán)限)
**[#79bbff] 角色管理
***_ 角色新增
***_ 角色修改
***_ 角色刪除
***_ 角色綁定權(quán)限
***_ 角色綁定維度
**[#79bbff] 用戶管理
***_ 用戶新增
***_ 用戶修改
***_ 用戶刪除
@endmindmap
效果圖如下:
關(guān)鍵解釋如下:
-
@startmindmap
和@endmindmap
這兩個(gè)注解用來聲明此處為使用 PlantUML 進(jìn)行繪制的代碼 -
*
是用來標(biāo)注標(biāo)題或者內(nèi)容的等級(jí)(另外也可使用+
或者-
來區(qū)分方向,md 不支持) -
[#fff]
用來標(biāo)記顏色 -
*_
使用下劃線去除外邊框
流程圖繪制
@startuml
title 路由跳轉(zhuǎn)流程圖
start
:從 localStorage 中拿到 token;
if ( token 是否為空 ) then(Y)
if(path 是否為登陸頁) then(Y)
:跳轉(zhuǎn)到首頁;
stop
else(N)
:設(shè)置用戶信息;
:根據(jù)用戶信息設(shè)置側(cè)邊欄菜單;
:根據(jù)菜單動(dòng)態(tài)生成路由;
stop
endif
else(N)
if(path 是否為白名單) then(Y)
:直接放行;
stop
else(N)
:跳轉(zhuǎn)到登陸頁;
stop
endif
endif
@enduml
效果圖如下:
關(guān)鍵解釋如下:
-
start
表示活動(dòng)圖流程的開始 -
stop
表示活動(dòng)圖流程的結(jié)束 -
:xxxx;
:表示活動(dòng)流程節(jié)點(diǎn)為xxxx -
if+then+endif
表示一個(gè)完整的條件判斷
時(shí)序圖繪制
使用 participant
關(guān)鍵字來聲明一個(gè)參與者可以使你對(duì)參與者做出更多控制。
關(guān)鍵字在代碼中的順序決定了參與者的先后順序。
你也可以使用下面這些關(guān)鍵字來聲明參與者,這會(huì)改變參與者的外觀:
? actor(角色)
? boundary(邊界)
? control(控制)
? entity(實(shí)體)
? database(數(shù)據(jù)庫)
? collections(集合)
? queue(隊(duì)列)
關(guān)鍵字 as
用于重命名參與者
@startuml
title 登陸鑒權(quán)時(shí)序圖
actor user
participant 客戶端 as client
control service as s
database db
database redis
control springSecurity as ss
autonumber
user -> client :登陸
activate s
client -> s :登陸請(qǐng)求\n賬號(hào)/密碼/驗(yàn)證碼
s -> s :驗(yàn)證碼校驗(yàn)
activate ss
s -> ss :待驗(yàn)證賬號(hào)密碼
db -> ss:用戶賬號(hào)密碼
ss -> ss: 賬號(hào)密碼校驗(yàn)
db -> ss: 用戶權(quán)限
ss --> s :authentication
s -> s :token生成
s -> redis :token/用戶賬號(hào)密碼權(quán)限
s --> client :token
user -> client :鑒權(quán)
client -> ss :token
ss --> redis :token
redis -> ss : 用戶賬號(hào)密碼權(quán)限
ss -> ss : 鑒權(quán)
ss --> s : 請(qǐng)求
s --> client : 資源
deactivate ss
deactivate s
@enduml
效果圖:文章來源:http://www.zghlxwxcb.cn/news/detail-632203.html
關(guān)鍵詞解釋如下:文章來源地址http://www.zghlxwxcb.cn/news/detail-632203.html
-
title
:表示該UML用例圖的標(biāo)題 - 顯示的順序是怎么定義的:聲明的參與者順序?qū)⑹牵J(rèn)的)顯示順序。
-
autonumber
:可以給參與者添加順序 -
->
:表示繪制兩個(gè)參與者之間的信息,如果你希望是虛線,可以使用-->
. -
activate
和deactivate
:表示參與者的生命線
到了這里,關(guān)于PlantUML 用代碼畫思維導(dǎo)圖,時(shí)序圖,流程圖的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!