PlantUML畫時序圖，真香！
引言
大家好，我是老三，最近在做系統設計的時候，發現要畫不少時序圖，以前我用的最順手的工具是draw.io，后來也嘗試了語雀自帶的畫圖工具，感覺畫畫簡單的圖還行，但是復雜一點的，就比較吃力了。
圖片
哎，這條線怎么又歪了？布局怎么又亂了？這個條怎么又對不齊了？……手忙腳亂才畫好一張圖，這時候我就想，有沒有其它更專業的畫圖工具呢？大部分同事都在用Visio，輝哥給我推薦了PlantUML，說非常好用！這時候旁邊來了一句—— “他就是裝比！”
還有這樣的事？那我不能讓他一個人都裝了。
最開始看下官方文檔，發現PlantUML類似MarkDown，似乎需要一點學習成本，簡單用了一下，曲線還是挺平緩的，上手相當快！推薦大家也用一下試試。
一、什么是PlantUML？
PlantUML是一個多功能組件，可快速、直接地創建圖表。用戶可以使用簡單直觀的語言起草各種圖表。
PlantUML是一個開源工具，它允許我們用簡單的文本描述來創建UML圖，包括序列圖、用例圖、類圖、對象圖、活動圖、組件圖、部署圖、狀態圖，以及我們今天要講的時序圖。
圖片
除了UML圖之外，PlantUML 還支持一系列其他圖表，例如JSON數據、YAML數據、EBNF圖表、架構圖等等。PlantUML的一大優勢，是圖表完全用文本代碼描述，這就意味著它可以作為文檔嵌入到源代碼中，也非常方便版本控制和多人協作，不管是迭代設計、文檔編寫、系統建模，PlantUML都能勝任。
二、快速入門
PlantUML插件
為了便捷地使用PlantUML，許多流行的IDE和代碼編輯器提供了集成PlantUML的插件，如Visual Studio Code、IntelliJ IDEA、Eclipse等。插件提供了實時預覽、語法高亮和圖表導出等功能，能幫助我們更快捷，更高效地畫圖，整體上IDEA的插件用起來體驗最好，但是IDEA大家懂的，太占內存了，VS Code相對而言，用起來就會輕量很多。
- IntelliJ IDEA：比如 "PlantUML integration" 可以讓我們直接在 IDE 中查看和編輯 PlantUML 圖表
圖片
- PlantUML integration
插件使用效果
圖片
- VS Code：https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml
插件市場：
圖片
- 插件使用效果：
圖片
Hello World!
我們先來看個最簡單的例子，通過-> 、-->和 :就可以在參與者之間傳遞消息，不用明確聲明參與者。
@startuml
老張 -> 老王 : 老王，你好啊
老王--> 老張: 老張，你好啊
老張 -> 老王: 最近有空一起喝茶
老張 <-- 老王: OK
@enduml
圖片
三、PlantUML時序圖語法
接下來，我們看看PlantUML時序圖的一些具體語法。
聲明參與者
我們使用關鍵字participant 來聲明參與者，就可以對該參與者進行更多的控制。聲明的順序就是默認的顯示順序。我們也可以用這些關鍵字來聲明參與者，給參與者設置不同的形狀。
- actor（角色）
- boundary（邊界）
- control（控制）
- entity（實體）
- database（數據庫）
- collections（集合）
- queue（隊列）
我們還可以通過 as關鍵字重命名參與者。
@startuml
participant Participant as Foo
actor Actor as Foo1
boundary Boundary as Foo2
control Control as Foo3
entity Entity as Foo4
database Database as Foo5
collections Collections as Foo6
queue Queue as Foo7
@enduml
參與者
默認的顏色比較單調，也可以通過#來設置參與者的顏色：
@startuml
actor Bob #blue
' The only difference between actor
'and participant is the drawing
participant Alice #SkyBlue
participant "I have a really\nlong name" as L #00ff00
Alice->Bob: Authentication Request
Bob->Alice: Authentication Response
Bob->L: Log transaction
@enduml
上顏色的參與者
消息傳遞
在不同參與者之間，通過箭頭+:來表示消息傳遞。
- 同步消息：
A -> B: 同步消息文本
同步消息
- 異步消息：由發送者A指向接收者B，表示A發送后不需要等待B立即處理。
A ->> B: 異步消息文本
異步消息
- 返回消息：通常從接收者返回到發送者，標識一個回應。
A <-- B: 返回消息文本
返回消息
- 自調用：一個參與者直接發送消息給自己，表示自我處理或運算。
A ->A: 自調用- 自調用
生命線（Lifeline）與激活條（Activation Bar）
在時序圖中，生命線表示對象在一段時間內的活動狀態，也就是從參與者往下延伸的那條虛線。激活條用來表示參與者或對象在處理某個任務期間的活動狀態，是生命線的一部分，矩形條形式出現。
- 生命線的激活與撤銷：可以用下面這些關鍵字來控制生命線的激活與撤銷
activate: 顯示參與者的活動狀態開始
deactivate: 指示參與者的活動狀態結束。
destroy: 用于表示參與者的生命線終結，通常表示對象生命周期的結束。
@startuml
participant User
User -> A: DoWork
activate A
A -> B: << createRequest >>
activate B
B -> C: DoWork
activate C
C --> B: WorkDone
destroy C
B --> A: RequestCreated
deactivate B
A -> User: Done
deactivate A
@enduml
生命線的激活與撤銷
- 生命線的嵌套與顏色：我們還可以使用嵌套激活條來表示內部調用，并可以給生命線添加顏色。
@startuml
participant User
User -> A: DoWork
activate A #FFBBBB
A -> A: Internal call
activate A #DarkSalmon
A -> B: << createRequest >>
activate B
B --> A: RequestCreated
deactivate B
deactivate A
A -> User: Done
deactivate A
@enduml
生命線的嵌套與顏色
- 自動激活：在發送消息時自動顯示激活條。
A->B++: 激活B并發送消息
自動激活
- 自動去激活：在接收回應時自動隱藏激活條。
A->B++: 激活B并發送消息
A <--B--: B去激活并回應消息
自動去激活
分組和替代
- 分組：用于邏輯上分組一系列交互。
group 分組名
A -> B: 消息
...
end group
分組
- 替代（Alt/Else）：表示基于條件的替代執行流程。
alt 條件1
A -> B: 滿足條件1的消息
else 條件2
A -> B: 滿足條件2的消息
end
替代
注釋
注釋用于添加說明性文本。
- 可以用note left of，note right of或note over來控制注釋相對節點的位置，還可以通過修改背景色來高亮顯示注釋。
@startuml
participant Alice
participant Bob
note left of Alice #aqua
This is displayed
left of Alice.
end note
note right of Alice: This is displayed right of Alice.
note over Alice: This is displayed over Alice.
note over Alice, Bob #FFAAAA: This is displayed\n over Bob and Alice.
note over Bob, Alice
This is yet another
example of
a long note.
end note
@enduml
注釋
顏色
Choosing colors在 PlantUML 中，我們可以對時序圖的各個元素自定義顏色，比如參與者（actors）、對象（objects）、激活條（activation bars)等，來讓我們的時序圖更加美觀。在聲明元素時，可以直接指定顏色，格式為#顏色代碼。顏色代碼可以是不同的形式：
- 直接指定顏色：顏色代碼可以是一個十六進制顏色值，也可以是預定義的顏色名稱。
@startuml
actor 用戶 #Green
participant 參與者 #B4A7E5
用戶-[#red]>參與者:消息
activate 參與者 #Blue
@enduml
直接指定顏色
- 使用 skinparam 設置顏色：除了直接為特定元素指定顏色外，還可以使用 skinparam 全局設置時序圖中的顏色。用這種方式更改元素的默認顏色比較方便：
@startuml
skinparam ActorBorderColor #DarkOrange
skinparam ParticipantBackgroundColor #SkyBlue
actor 用戶
participant 參與者
@enduml
使用 skinparam 設置顏色
當使用 skinparam 時，我們可以設置許多不同屬性的顏色，如邊框顏色（BorderColor）、背景顏色（BackgroundColor）、字體顏色（FontColor）和激活條顏色（SequenceGroupBodyBackgroundColor）。更多語法可以直接查看官方文檔：順序圖的語法和功能，目前這些內容，已經足夠我們常見的時序圖需求了。
四、完整實例
我們接下來看一個稍微完整一點的例子，在這個例子中，我們的需求，是要在原本的登錄的基礎上，引入Google登錄。
@startuml
skinparam ParticipantBackgroundColor #DeepSkyBlue
actor 用戶 as c #DeepSkyBlue
participant "客戶端" as client
participant "服務網關" as ga
participant "用戶服務" as user
database "數據庫" as DB #DeepSkyBlue
participant "Google服務" as google #LightCoral
activate c #DeepSkyBlue
activate client #DeepSkyBlue
c->client:用戶登錄
group#LightCoral #LightCoral Google登錄客戶端流程
client -> google : 請求Google OAuth登錄
activate google #DeepSkyBlue
google-->client:登錄url
client->google:跳轉登錄頁
google -> google : 用戶登錄
google --> client : Google登錄Token
deactivate google
end
|||
client -> ga : 登錄請求
note right#LightCoral:新增登錄方式，三方登錄請求實體
activate ga #DeepSkyBlue
ga ->user:請求轉發
activate user #DeepSkyBlue
alt#DeepSkyBlue 常規登錄
user -> DB : 查詢用戶信息
activate DB #DeepSkyBlue
DB -> user : 用戶信息
deactivate DB
user->user:登錄密碼校驗
|||
else Google登錄
group#LightCoral #LightCoral Google登錄服務端流程
user->google:驗證token
activate google #DeepSkyBlue
google-->user:用戶信息
deactivate google
user->user:存儲或更新用戶信息
end group
end
user-->ga:登錄結果
deactivate user
ga -> client : 響應
deactivate ga
alt#DeepSkyBlue 成功
client -> c : 登錄成功
else 失敗
client -> c : 登錄失敗
end
deactivate client
|||
@enduml
登錄時序圖
五、總結
PlantUML使用起來整體上還是非常舒服的，對我而言，這幾個特點讓我愛不釋手：
- 提供了類似MarkDown的所見即所得的使用體驗，免去調整圖形之擾
- PlantUML本質是文本，可以進行版本控制，多人協同
- 語雀支持文本畫圖的功能，可以嵌入PlantUML文本，支持在語雀文檔里直接修改
