當前位置：首頁 > 科技 > 軟件

PlantUML畫時序圖，真香！

來源：責編：時間：2024-05-16 09:04:12 149觀看

導讀引言大家好，我是老三，最近在做系統設計的時候，發現要畫不少時序圖，以前我用的最順手的工具是draw.io，后來也嘗試了語雀自帶的畫圖工具，感覺畫畫簡單的圖還行，但是復雜一點的，就比較吃力了。圖片哎，這條線怎么又歪了？布局怎么又

引言

大家好，我是老三，最近在做系統設計的時候，發現要畫不少時序圖，以前我用的最順手的工具是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關鍵字重命名參與者。

@startumlparticipant Participant as Fooactor       Actor       as Foo1boundary    Boundary    as Foo2control     Control     as Foo3entity      Entity      as Foo4database    Database    as Foo5collections Collections as Foo6queue       Queue       as Foo7@enduml

參與者

默認的顏色比較單調，也可以通過#來設置參與者的顏色：

@startumlactor Bob #blue' The only difference between actor'and participant is the drawingparticipant Alice #SkyBlueparticipant "I have a really/nlong name" as L #00ff00Alice->Bob: Authentication RequestBob->Alice: Authentication ResponseBob->L: Log transaction@enduml

上顏色的參與者

消息傳遞

在不同參與者之間，通過箭頭+:來表示消息傳遞。

同步消息：

A -> B: 同步消息文本

同步消息

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

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

異步消息

返回消息：通常從接收者返回到發送者，標識一個回應。

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

返回消息

自調用：一個參與者直接發送消息給自己，表示自我處理或運算。

A ->A: 自調用

自調用

生命線（Lifeline）與激活條（Activation Bar）

在時序圖中，生命線表示對象在一段時間內的活動狀態，也就是從參與者往下延伸的那條虛線。激活條用來表示參與者或對象在處理某個任務期間的活動狀態，是生命線的一部分，矩形條形式出現。

生命線的激活與撤銷：可以用下面這些關鍵字來控制生命線的激活與撤銷

activate: 顯示參與者的活動狀態開始

deactivate: 指示參與者的活動狀態結束。

destroy: 用于表示參與者的生命線終結，通常表示對象生命周期的結束。

@startumlparticipant UserUser -> A: DoWorkactivate AA -> B: << createRequest >>activate BB -> C: DoWorkactivate CC --> B: WorkDonedestroy CB --> A: RequestCreateddeactivate BA -> User: Donedeactivate A@enduml

生命線的激活與撤銷

生命線的嵌套與顏色：我們還可以使用嵌套激活條來表示內部調用，并可以給生命線添加顏色。

@startumlparticipant UserUser -> A: DoWorkactivate A #FFBBBBA -> A: Internal callactivate A #DarkSalmonA -> B: << createRequest >>activate BB --> A: RequestCreateddeactivate Bdeactivate AA -> User: Donedeactivate A@enduml

生命線的嵌套與顏色

自動激活：在發送消息時自動顯示激活條。

A->B++: 激活B并發送消息

自動激活

自動去激活：在接收回應時自動隱藏激活條。

A->B++: 激活B并發送消息A <--B--: B去激活并回應消息

自動去激活

分組和替代

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

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

分組

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

alt 條件1A -> B: 滿足條件1的消息else 條件2A -> B: 滿足條件2的消息end

替代

注釋

注釋用于添加說明性文本。

可以用note left of，note right of或note over來控制注釋相對節點的位置，還可以通過修改背景色來高亮顯示注釋。

@startumlparticipant Aliceparticipant Bobnote left of Alice #aquaThis is displayedleft of Alice.end notenote 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, AliceThis is yet anotherexample ofa long note.end note@enduml

注釋

顏色

Choosing colors在 PlantUML 中，我們可以對時序圖的各個元素自定義顏色，比如參與者（actors）、對象（objects）、激活條（activation bars)等，來讓我們的時序圖更加美觀。在聲明元素時，可以直接指定顏色，格式為#顏色代碼。顏色代碼可以是不同的形式：

直接指定顏色：顏色代碼可以是一個十六進制顏色值，也可以是預定義的顏色名稱。

@startumlactor 用戶  #Greenparticipant 參與者  #B4A7E5用戶-[#red]>參與者:消息activate 參與者 #Blue@enduml

直接指定顏色

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

@startumlskinparam ActorBorderColor #DarkOrangeskinparam ParticipantBackgroundColor #SkyBlueactor 用戶participant 參與者@enduml

使用 skinparam 設置顏色

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

四、完整實例

我們接下來看一個稍微完整一點的例子，在這個例子中，我們的需求，是要在原本的登錄的基礎上，引入Google登錄。

@startumlskinparam ParticipantBackgroundColor #DeepSkyBlueactor 用戶 as c  #DeepSkyBlueparticipant "客戶端" as clientparticipant "服務網關" as gaparticipant "用戶服務" as userdatabase "數據庫" as DB  #DeepSkyBlueparticipant "Google服務" as google  #LightCoralactivate c #DeepSkyBlueactivate client #DeepSkyBluec->client:用戶登錄group#LightCoral #LightCoral Google登錄客戶端流程  client -> google : 請求Google OAuth登錄            activate google #DeepSkyBlue            google-->client:登錄url            client->google:跳轉登錄頁            google -> google : 用戶登錄            google --> client : Google登錄Token            deactivate googleend|||client -> ga : 登錄請求note right#LightCoral:新增登錄方式，三方登錄請求實體activate ga #DeepSkyBluega ->user:請求轉發activate user #DeepSkyBluealt#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 groupenduser-->ga:登錄結果deactivate userga -> client : 響應deactivate gaalt#DeepSkyBlue 成功        client -> c : 登錄成功else 失敗        client -> c : 登錄失敗enddeactivate client|||@enduml

登錄時序圖

五、總結

PlantUML使用起來整體上還是非常舒服的，對我而言，這幾個特點讓我愛不釋手：

提供了類似MarkDown的所見即所得的使用體驗，免去調整圖形之擾
PlantUML本質是文本，可以進行版本控制，多人協同
語雀支持文本畫圖的功能，可以嵌入PlantUML文本，支持在語雀文檔里直接修改

本文鏈接：http://www.www897cc.com/showinfo-26-88327-0.htmlPlantUML畫時序圖，真香！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇：我用 Flutter、React Native 和 Ionic 構建了相同的應用程序

下一篇：這一次，徹底搞懵 CRDT

標簽：

熱門焦點

K60 Pro官方停產第三方瞬間漲價

雖然沒有官方宣布，但Redmi的一些高管也已經透露了，Redmi K60 Pro已經停產且不會補貨，這一切都是為了即將到來的K60 Ultra鋪路，屬于廠家的正常操作。但有意思的是該機在停產之后
Rust中的高吞吐量流處理

作者 | Noz編譯 | 王瑞平本篇文章主要介紹了Rust中流處理的概念、方法和優化。作者不僅介紹了流處理的基本概念以及Rust中常用的流處理庫，還使用這些庫實現了一個流處理程序
慕巖炮轟抖音，百合網今何在？

來源：價值研究所作者：Hernanderz“難道就因為自己的一個產品牛逼了，從客服到總裁，都不愿意正視自己產品和運營上的問題，選擇逃避了嗎？”這一番話，出自百合網聯合創
7月4日見！iQOO 11S官宣：“雞血版”驍龍8 Gen2+200W快充加持

上半年已接近尾聲，截至目前各大品牌旗下的頂級旗艦都已悉數亮相，而下半年即將推出的頂級旗艦已經成為了數碼圈爆料的主流，其中就包括全新的iQOO 11S系
首發天璣9200+ iQOO Neo8系列發布首銷售價2299元起

2023年5月23日晚，iQOO Neo8系列正式發布。其中，Neo系列首款Pro之作——iQOO Neo8 Pro強悍登場，限時售價3099元起；價位段最強性能手機iQOO Neo8同期上市
蘋果140W USB-C充電器：采用氮化鎵技術

據10 月 30 日 9to5 Mac 消息報道，當蘋果推出新的 MacBook Pro 2021 時，該公司還推出了新的 140W USB-C 充電器，附贈在 MacBook Pro 16 英寸機型的盒子里，也支
AI藝術欣賞體驗會在上海梅賽德斯奔馳中心音樂俱樂部上演

光影交錯的鏡像世界，虛實幻化的視覺奇觀，虛擬偶像與真人共同主持，這些場景都出現在2019世界人工智能大會的舞臺上。8月29日至31日，“AI藝術欣賞體驗會”在上海
電博會上海爾智家模擬500平大平層，還原生活空間沉浸式體驗

電博會為了更好地讓參展觀眾真正感受到智能家居的絕妙之處，海爾智家的程傳嶺先生同樣介紹了展會上海爾智家的模擬500平大平層，還原生活空間沉浸式體驗。程傳

日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

PlantUML畫時序圖，真香！

引言

一、什么是PlantUML？

二、快速入門

PlantUML插件

Hello World!

三、PlantUML時序圖語法

聲明參與者

消息傳遞

生命線（Lifeline）與激活條（Activation Bar）

分組和替代

注釋

顏色

四、完整實例

五、總結

K60 Pro官方停產第三方瞬間漲價

Rust中的高吞吐量流處理

重估百度丨“晚熟”的百度云，能等到春天嗎？

慕巖炮轟抖音，百合網今何在？

7月4日見！iQOO 11S官宣：“雞血版”驍龍8 Gen2+200W快充加持

首發天璣9200+ iQOO Neo8系列發布首銷售價2299元起

蘋果140W USB-C充電器：采用氮化鎵技術

AI藝術欣賞體驗會在上海梅賽德斯奔馳中心音樂俱樂部上演

電博會上海爾智家模擬500平大平層，還原生活空間沉浸式體驗

最新推薦

猜你喜歡

熱門推薦

相關資訊