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

_程式兔發表於2021-05-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"
	]

相關文章