PlantUML - 使用代碼快速繪製時序圖、思維導圖

PlantUML — 使用代碼快速繪製時序圖、思維導圖

2021 年 5 月 20 日
筆記
工具使用

本篇思維導圖

@startmindmap
<style>
mindmapDiagram {
  .green {
    BackgroundColor lightgreen
  }
  .rose {
    BackgroundColor #FFBBCC
  }
  .bule_black {
    BackgroundColor lightblue
  }

}
</style>
* PlantUML <<rose>>
** PlantUML簡介 <<green>>
** 時序圖基本使用 <<rose>>
*** 開始、結束
*** 對象表示
*** 消息傳遞
*** 生命線
*** 分支、循環
*** 生命線的更簡易寫法
** 思維導圖基本使用(正在開發中) <<bule_black>>
*** 開始、結束
*** 子主題生成和分支方向選擇
*** 內容多行表示
*** 顏色更改
** uml時序圖簡介 <<bule_black>>
** vscode下配置plantuml <<bule_black>>
@endmindmap

一、前言

不管是在工作還是學習，特別是在項目計劃初期，我們需要畫大量的圖將工作內容、項目方案等進行可視化描述，包括但不限於時序圖、類圖、思維導圖等等。

但是對於不經常畫圖，或者經常使用鍵盤的孩子，手工畫圖或者使用軟件進行畫圖都是一件比較頭疼的操作，特別是像我這種有強迫症的孩子，任何歪歪扭扭的地方都會讓我極其不舒服想要將圖畫的盡量筆直和完美。

所以，如果可以直接敲代碼，就可以生成想要的圖，對於工作效率和專註度都有極大的提升，另外，將圖上的邏輯用代碼描述出來，本身就又能加深自己的理解。

好在，我在工作中偶然發現了這樣的一個開源項目，PlantUML！！！真的，強烈安利，程序員必備、計算機學生必備，只敲代碼，真的是方便了許多，我在畫時序圖的時候，一個對象可能要畫2-3分鐘，從找標識到手工對齊，添加對象名，但是用代碼只需要一行解決！！！啊，這個優點已經好到必須要親自體會了！！！強烈安利！！！它已經是我畫圖時必用的一款神奇，和markdown一樣不可忽視。

二、PlantUML簡介

PlantUml是一個開源項目，可以用寫代碼的方式快速回至出各種自己想要的圖。此外，不僅支持畫UML，還支持很多常用的，比如思維導圖、ER圖等等。戳官網：PlantUML

下面我就我自己的使用分享一些簡單常用的使用方法

三、時序圖篇

官網使用文檔:時序圖

1. 開始和結束

@startuml表示開始

@enduml表示結束

2. 對象表示

常用對象：

actor: 實體對象，比如人、操作員等
participant: 參與者，可以是類、服務名等
database: 數據庫
queue: 隊列，比如kafka隊列就可以用這個表示

定義對象：

格式對象類型對象名 [as 對象別名] [ ] 裏面的內容為可選項，即可以為對象定義別名，這個別名是為了在代碼中引用對象方便，實際圖中對象的名字還是我們定義的對象名。

例子：

actor 用戶： 定義一個實體對象，對象名為「用戶」
database mysql： 定義一個數據庫，名字為「mysql」
participant SQLServer as db： 定義一個參與者，服務名為「SQLServer」，別名為「db」，在代碼中可以直接用db表示SQLServer
queue kafka： 定義一個queue對象，名為 kafka

'單引號是代碼注釋
@startuml
'對象定義
actor 用戶
participant SQLServer as db
database mysql
queue kafka
'結束
@enduml

@startuml
'單引號是代碼注釋
'對象定義
actor 用戶
participant SQLServer as db
database mysql
queue kafka
@enduml

3. 消息傳遞

時序圖主要是為了展示項目中的數據流走向，因此消息傳遞是時序圖的重要部分。

->表示消息傳遞走向，默認箭頭類型是單向直線，PlantUML手冊中有很多樣式可以通過代碼自定義顏色和樣式

-->是單向虛直線箭頭，一般是用來傳遞消息返回信息

用戶->mysql: 數據庫請求

mysql-->用戶: 請求結果

4. 生命線的激活與撤銷

一般完整的時序圖中都會包含生命周期，當某個服務被觸發，從開始工作到工作結束返回請求的這段時間，就是這個服務當下的生命周期，在PlantUML中，使用activate和deactivate來激活、銷毀生命周期

'單引號是代碼注釋
@startuml
actor 用戶
participant SQLServer as db
database mysql
queue kafka
'消息傳遞
用戶->mysql: 數據庫請求
'激活mysql生命線
activate mysql
'消息傳遞
mysql-->用戶: 請求結果
'銷毀mysql生命線
deactivate mysql
@enduml

@startuml
'單引號是代碼注釋
'對象定義
actor 用戶
participant SQLServer as db
database mysql
queue kafka
'消息傳遞
用戶->mysql: 數據庫請求
'激活mysql生命線
activate mysql
mysql-->用戶: 請求結果
'銷毀mysql生命線
deactivate mysql
@enduml

5. 分支和循環表示

某些複雜情況下需要處理一些分支和循環的內容，PlantUML中用 alt-else-end 表示分支，用 loop-end表示循環

分支

alt 查詢
    用戶->mysql: 數據庫查詢請求
    activate mysql
    mysql-->用戶: 請求結果
    deactivate mysql
else 插入
    用戶->mysql: 數據庫插入請求
    activate mysql
    mysql-->用戶: 請求結果
    deactivate mysql
end

@startuml
'單引號是代碼注釋
'對象定義
actor 用戶
participant SQLServer as db
database mysql
queue kafka
'消息傳遞
alt 查詢
    用戶->mysql: 數據庫查詢請求
    activate mysql
    mysql-->用戶: 請求結果
    deactivate mysql
else 插入
    用戶->mysql: 數據庫插入請求
    activate mysql
    mysql-->用戶: 請求結果
    deactivate mysql
end
@enduml

循環

loop 查詢1000次
    用戶->mysql: 數據庫查詢請求
    activate mysql
    mysql-->用戶: 請求結果
    deactivate mysql
end

@startuml
'單引號是代碼注釋
'對象定義
actor 用戶
participant SQLServer as db
database mysql
queue kafka
'消息傳遞
loop 查詢1000次
    用戶->mysql: 數據庫查詢請求
    activate mysql
    mysql-->用戶: 請求結果
    deactivate mysql
end
@enduml

另外，分支和循環都是可以嵌套的。

6. 一些更簡潔的語法

++可以直接激活生命線

return msg可以結束生命線並返回傳遞消息msg

一般成對使用

4中的激活生命線+消息傳遞的代碼可以直接寫成這樣

'激活mysql生命線 & 消息傳遞
用戶->mysql++: 數據庫請求
'銷毀mysql生命線 & 傳遞返回結果
return 請求結果

四、思維導圖篇

目前據官網，這個正在開發中，某些語法可能會發生變化，但是先用着不是？官網手冊：思維導圖

1. 開始和結束

@startmindmap開始

@endmindmap結束

2. 子主題

使用+或-新建分支，用符號數量表示層級，+表示分支向右邊生長，-表示分支向左邊生長

'這裡是注釋
@startmindmap
+ 思維導圖
++ 主題1
+++ 子主題1.1
++ 主題2
-- 主題3
--- 子主題3.1
--- 子主題3.2
-- 子主題4
@endmindmap

@startmindmap
+ 思維導圖
++ 主題1
+++ 子主題1.1
++ 主題2
-- 主題3
--- 子主題3.1
--- 子主題3.2
-- 子主題4
@endmindmap

3.內容多行表示

使用:開始多行內容，;結束多行內容。目前如果要使用: ;只能用*新建分支

'這裡是注釋
@startmindmap
* templates
**: Example1
今天是520
我在公司開心上班
;
@endmindmap

@startmindmap
* templates
**: Example1
今天是520
我在公司開心上班
;
@endmindmap

4.顏色改變

沒有顏色的思維導圖是沒有靈魂的

具體語法建議查看官網手冊

'這裡是注釋
@startmindmap
<style>
mindmapDiagram {
  .green {
    BackgroundColor lightgreen
  }
  .rose {
    BackgroundColor #FFBBCC
  }
  .your_style_name {
    BackgroundColor lightblue
  }
}
</style>
* Colors
** Green <<green>>
** Rose <<rose>>
** Blue <<your_style_name>>
@endmindmap

@startmindmap
<style>
mindmapDiagram {
  .green {
    BackgroundColor lightgreen
  }
  .rose {
    BackgroundColor #FFBBCC
  }
  .your_style_name {
    BackgroundColor lightblue
  }
}
</style>
* Colors
** Green <<green>>
** Rose <<rose>>
** Blue <<your_style_name>>
@endmindmap

五、UML時序圖簡介

對於還不清楚什麼是UML時序圖的同學，可以看下這兩篇文章哦

步步為營UML建模系列五、時序圖（Squence diagram)

UML序列圖總結(Loop、Opt、Par和Alt)

六、vscode下配置PlantUML

使用VS CODE+PlantUML高效畫圖

Vscode plantuml UML圖配置使用

vscode下配置好plantuml後，可以使用Alt + D 預覽plantuml文檔（.uml文件）

如何從vscode導出plantuml圖？ F1 或 ctrl+shift+p; 選擇 PlantUML:導出當前圖表；選擇導出格式svg；導出即可。[png 對於較大的導出不全]

解決導出png不完整： vscode 打開設置 –> edit settings.json –> 添加如下：

    "plantuml.jarArgs": [
		"-DPLANTUML_LIMIT_SIZE=8129"
	]

Tags: 工具使用