引言

最近在做系統(tǒng)設(shè)計(jì)的時(shí)候，發(fā)現(xiàn)要畫(huà)不少時(shí)序圖，以前我用的最順手的工具是draw.io，后來(lái)也嘗試了語(yǔ)雀自帶的畫(huà)圖工具，感覺(jué)畫(huà)畫(huà)簡(jiǎn)單的圖還行，但是復(fù)雜一點(diǎn)的，就比較吃力了。哎，這條線(xiàn)怎么又歪了？布局怎么又亂了？這個(gè)條怎么又對(duì)不齊了？……手忙腳亂才畫(huà)好一張圖，這時(shí)候我就想，有沒(méi)有其它更專(zhuān)業(yè)的畫(huà)圖工具呢？大部分同事都在用Visio，輝哥給我推薦了PlantUML，說(shuō)非常好用！這時(shí)候旁邊來(lái)了一句—— “他就是裝比！”

還有這樣的事？那我不能讓他一個(gè)人都裝了。

最開(kāi)始看下官方文檔，發(fā)現(xiàn)PlantUML類(lèi)似MarkDown，似乎需要一點(diǎn)學(xué)習(xí)成本，簡(jiǎn)單用了一下，曲線(xiàn)還是挺平緩的，上手相當(dāng)快！推薦大家也用一下試試。

一、什么是PlantUML？

PlantUML是一個(gè)多功能組件，可快速、直接地創(chuàng)建圖表。用戶(hù)可以使用簡(jiǎn)單直觀的語(yǔ)言起草各種圖表。

PlantUML是一個(gè)開(kāi)源工具，它允許我們用簡(jiǎn)單的文本描述來(lái)創(chuàng)建UML圖，包括序列圖、用例圖、類(lèi)圖、對(duì)象圖、活動(dòng)圖、組件圖、部署圖、狀態(tài)圖，以及我們今天要講的時(shí)序圖。除了UML圖之外，PlantUML 還支持一系列其他圖表，例如JSON數(shù)據(jù)、YAML數(shù)據(jù)、EBNF圖表、架構(gòu)圖等等。PlantUML的一大優(yōu)勢(shì)，是圖表完全用文本代碼描述，這就意味著它可以作為文檔嵌入到源代碼中，也非常方便版本控制和多人協(xié)作，不管是迭代設(shè)計(jì)、文檔編寫(xiě)、系統(tǒng)建模，PlantUML都能勝任。

二、快速入門(mén)

PlantUML插件

為了便捷地使用PlantUML，許多流行的IDE和代碼編輯器提供了集成PlantUML的插件，如Visual Studio Code、IntelliJ IDEA、Eclipse等。插件提供了實(shí)時(shí)預(yù)覽、語(yǔ)法高亮和圖表導(dǎo)出等功能，能幫助我們更快捷，更高效地畫(huà)圖，整體上IDEA的插件用起來(lái)體驗(yàn)最好，但是IDEA大家懂的，太占內(nèi)存了，VS Code相對(duì)而言，用起來(lái)就會(huì)輕量很多。

IntelliJ IDEA：比如 "PlantUML integration" 可以讓我們直接在 IDE 中查看和編輯 PlantUML 圖表

PlantUML integration

插件使用效果

VS Code：https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml

插件市場(chǎng)：

插件使用效果：

Hello World!

我們先來(lái)看個(gè)最簡(jiǎn)單的例子，通過(guò)-> 、-->和 :就可以在參與者之間傳遞消息，不用明確聲明參與者。

@startuml
老張 -> 老王 : 老王，你好啊
老王--> 老張: 老張，你好啊

老張 -> 老王: 最近有空一起喝茶
老張 <-- 老王: OK
@enduml

三、PlantUML時(shí)序圖語(yǔ)法

接下來(lái)，我們看看PlantUML時(shí)序圖的一些具體語(yǔ)法。

聲明參與者

我們使用關(guān)鍵字participant 來(lái)聲明參與者，就可以對(duì)該參與者進(jìn)行更多的控制。聲明的順序就是默認(rèn)的顯示順序。我們也可以用這些關(guān)鍵字來(lái)聲明參與者，給參與者設(shè)置不同的形狀。

actor（角色）
boundary（邊界）
control（控制）
entity（實(shí)體）
database（數(shù)據(jù)庫(kù)）
collections（集合）
queue（隊(duì)列）

我們還可以通過(guò) as關(guān)鍵字重命名參與者。

@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

默認(rèn)的顏色比較單調(diào)，也可以通過(guò)#來(lái)設(shè)置參與者的顏色：

@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

消息傳遞

在不同參與者之間，通過(guò)箭頭+:來(lái)表示消息傳遞。

同步消息：

A -> B: 同步消息文本

異步消息：由發(fā)送者A指向接收者B，表示A發(fā)送后不需要等待B立即處理。

A ->> B: 異步消息文本

返回消息：通常從接收者返回到發(fā)送者，標(biāo)識(shí)一個(gè)回應(yīng)。

A <-- B: 返回消息文本

自調(diào)用：一個(gè)參與者直接發(fā)送消息給自己，表示自我處理或運(yùn)算。
```
A ->A: 自調(diào)用
```
自調(diào)用

生命線(xiàn)（Lifeline）與激活條（Activation Bar）

在時(shí)序圖中，生命線(xiàn)表示對(duì)象在一段時(shí)間內(nèi)的活動(dòng)狀態(tài)，也就是從參與者往下延伸的那條虛線(xiàn)。激活條用來(lái)表示參與者或?qū)ο笤谔幚砟硞€(gè)任務(wù)期間的活動(dòng)狀態(tài)，是生命線(xiàn)的一部分，矩形條形式出現(xiàn)。

生命線(xiàn)的激活與撤銷(xiāo)：可以用下面這些關(guān)鍵字來(lái)控制生命線(xiàn)的激活與撤銷(xiāo)

activate: 顯示參與者的活動(dòng)狀態(tài)開(kāi)始
deactivate: 指示參與者的活動(dòng)狀態(tài)結(jié)束。
destroy: 用于表示參與者的生命線(xiàn)終結(jié)，通常表示對(duì)象生命周期的結(jié)束。

@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

生命線(xiàn)的嵌套與顏色：我們還可以使用嵌套激活條來(lái)表示內(nèi)部調(diào)用，并可以給生命線(xiàn)添加顏色。

@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

自動(dòng)激活：在發(fā)送消息時(shí)自動(dòng)顯示激活條。

A->B++: 激活B并發(fā)送消息

自動(dòng)去激活：在接收回應(yīng)時(shí)自動(dòng)隱藏激活條。

A->B++: 激活B并發(fā)送消息
A <--B--: B去激活并回應(yīng)消息

分組和替代

分組：用于邏輯上分組一系列交互。

group 分組名
A -> B: 消息
...
end group

替代（Alt/Else）：表示基于條件的替代執(zhí)行流程。

alt 條件1
A -> B: 滿(mǎn)足條件1的消息
else 條件2
A -> B: 滿(mǎn)足條件2的消息
end

注釋

注釋用于添加說(shuō)明性文本。

可以用note left of，note right of或note over來(lái)控制注釋相對(duì)節(jié)點(diǎn)的位置，還可以通過(guò)修改背景色來(lái)高亮顯示注釋。

@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 中，我們可以對(duì)時(shí)序圖的各個(gè)元素自定義顏色，比如參與者（actors）、對(duì)象（objects）、激活條（activation bars)等，來(lái)讓我們的時(shí)序圖更加美觀。在聲明元素時(shí)，可以直接指定顏色，格式為#顏色代碼。顏色代碼可以是不同的形式：

直接指定顏色：顏色代碼可以是一個(gè)十六進(jìn)制顏色值，也可以是預(yù)定義的顏色名稱(chēng)。

@startuml
actor 用戶(hù)  #Green
participant 參與者  #B4A7E5

用戶(hù)-[#red]>參與者:消息
activate 參與者 #Blue

@enduml

使用 skinparam 設(shè)置顏色：除了直接為特定元素指定顏色外，還可以使用 skinparam 全局設(shè)置時(shí)序圖中的顏色。用這種方式更改元素的默認(rèn)顏色比較方便：

@startuml
skinparam ActorBorderColor #DarkOrange
skinparam ParticipantBackgroundColor #SkyBlue

actor 用戶(hù)
participant 參與者
@enduml

當(dāng)使用 skinparam 時(shí)，我們可以設(shè)置許多不同屬性的顏色，如邊框顏色（BorderColor）、背景顏色（BackgroundColor）、字體顏色（FontColor）和激活條顏色（SequenceGroupBodyBackgroundColor）。更多語(yǔ)法可以直接查看官方文檔：順序圖的語(yǔ)法和功能，目前這些內(nèi)容，已經(jīng)足夠我們常見(jiàn)的時(shí)序圖需求了。

四、完整實(shí)例

我們接下來(lái)看一個(gè)稍微完整一點(diǎn)的例子，在這個(gè)例子中，我們的需求，是要在原本的登錄的基礎(chǔ)上，引入Google登錄。

@startuml
skinparam ParticipantBackgroundColor #DeepSkyBlue

actor 用戶(hù) as c  #DeepSkyBlue
participant "客戶(hù)端" as client
participant "服務(wù)網(wǎng)關(guān)" as ga
participant "用戶(hù)服務(wù)" as user
database "數(shù)據(jù)庫(kù)" as DB  #DeepSkyBlue
participant "Google服務(wù)" as google  #LightCoral

activate c #DeepSkyBlue
activate client #DeepSkyBlue

c->client:用戶(hù)登錄

group#LightCoral #LightCoral Google登錄客戶(hù)端流程
  client -> google : 請(qǐng)求Google OAuth登錄
            activate google #DeepSkyBlue
            google-->client:登錄url
            client->google:跳轉(zhuǎn)登錄頁(yè)
            google -> google : 用戶(hù)登錄
            google --> client : Google登錄Token
            deactivate google
end

|||

client -> ga : 登錄請(qǐng)求
note right#LightCoral:新增登錄方式，三方登錄請(qǐng)求實(shí)體
activate ga #DeepSkyBlue
ga ->user:請(qǐng)求轉(zhuǎn)發(fā)
activate user #DeepSkyBlue


alt#DeepSkyBlue 常規(guī)登錄
    user -> DB : 查詢(xún)用戶(hù)信息
    activate DB #DeepSkyBlue
    DB -> user : 用戶(hù)信息
    deactivate DB
    user->user:登錄密碼校驗(yàn)

|||
else Google登錄
    group#LightCoral #LightCoral Google登錄服務(wù)端流程
          user->google:驗(yàn)證token
          activate google #DeepSkyBlue
          google-->user:用戶(hù)信息
          deactivate google
          user->user:存儲(chǔ)或更新用戶(hù)信息
    end group
end


user-->ga:登錄結(jié)果
deactivate user
ga -> client : 響應(yīng)
deactivate ga
alt#DeepSkyBlue 成功
        client -> c : 登錄成功
else 失敗
        client -> c : 登錄失敗
end
deactivate client
|||
@enduml

五、總結(jié)

PlantUML使用起來(lái)整體上還是非常舒服的，對(duì)我而言，這幾個(gè)特點(diǎn)讓我愛(ài)不釋手：

提供了類(lèi)似MarkDown的所見(jiàn)即所得的使用體驗(yàn)，免去調(diào)整圖形之?dāng)_
PlantUML本質(zhì)是文本，可以進(jìn)行版本控制，多人協(xié)同
語(yǔ)雀支持文本畫(huà)圖的功能，可以嵌入PlantUML文本，支持在語(yǔ)雀文檔里直接修改

PlantUML還有很強(qiáng)大的擴(kuò)展性和靈活性，我們可以通過(guò) 官方文檔：https://plantuml.com/zh/ 繼續(xù)探索更多高級(jí)語(yǔ)法和技巧，來(lái)繪制更加復(fù)雜和豐富的圖表。

參考：

開(kāi)源工具，使用簡(jiǎn)單的文字描述畫(huà)UML圖
Choosing colors
順序圖的語(yǔ)法和功能
如何使用 PlantUML 畫(huà)系統(tǒng)設(shè)計(jì)圖？- 掘金
順序圖的語(yǔ)法和功能
GPT老師

END

Java項(xiàng)目訓(xùn)練營(yíng)

我開(kāi)通了項(xiàng)目股東服務(wù)，已經(jīng)有不少消息推送平臺(tái)項(xiàng)目股東拿了阿里/vivo等大廠(chǎng)offer了。我是沒(méi)找到網(wǎng)上有跟我提供相同的服務(wù)，價(jià)格還比我低的。

??一對(duì)一周到的服務(wù)：有很多人的自學(xué)能力和基礎(chǔ)確實(shí)不太行，不知道怎么開(kāi)始學(xué)習(xí)，從哪開(kāi)始看起，學(xué)習(xí)項(xiàng)目的過(guò)程中會(huì)走很多彎路，很容易就迷茫了。付費(fèi)最跟自學(xué)最主要的區(qū)別就是我的服務(wù)會(huì)更周到。我會(huì)告訴你怎么開(kāi)始學(xué)這個(gè)開(kāi)源項(xiàng)目，哪些是重點(diǎn)需要掌握的，如何利用最短的時(shí)間把握整個(gè)系統(tǒng)架構(gòu)和編碼的設(shè)計(jì)，把時(shí)間節(jié)省下來(lái)去做其他事情。學(xué)習(xí)經(jīng)驗(yàn)/路線(xiàn)/簡(jiǎn)歷編寫(xiě)/面試經(jīng)驗(yàn)知無(wú)不言

??本地直連遠(yuǎn)程服務(wù)：生產(chǎn)環(huán)境的應(yīng)用系統(tǒng)肯定會(huì)依賴(lài)各種中間件，我專(zhuān)門(mén)買(mǎi)了兩臺(tái)服務(wù)器已經(jīng)搭建好必要的環(huán)境??，在本地就可以直接啟動(dòng)運(yùn)行體驗(yàn)和學(xué)習(xí)，無(wú)須花額外的時(shí)間自行搭建調(diào)試。

??細(xì)致的文檔&視頻：巨細(xì)致的語(yǔ)雀文檔11W+ 字，共106個(gè)文檔，項(xiàng)目視頻還在持續(xù)制作更新中（20個(gè)），不怕你學(xué)不會(huì)。

??付費(fèi)社群：優(yōu)質(zhì)的社群里需篩選過(guò)濾，學(xué)習(xí)氛圍是很重要的，多跟同輩或前輩聊聊，會(huì)少走很多彎路??

??清爽干練commit：專(zhuān)屬股東倉(cāng)庫(kù)，一步一步從零復(fù)現(xiàn)austin，每個(gè)commit都帶著文檔&視頻學(xué)習(xí)。

如果想獲取上面的權(quán)益，可以看看??Java項(xiàng)目訓(xùn)練營(yíng)

這樣畫(huà)時(shí)序圖，真香！

引言