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

PlantUML畫時序圖，真香！

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

導讀引言大家好，我是老三，最近在做系統設計的時候，發現要畫不少時序圖，以前我用的最順手的工具是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.tebozhan.com/showinfo-26-88327-0.htmlPlantUML畫時序圖，真香！

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

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

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

標簽：

熱門焦點

5月iOS設備性能榜：M1 M2依舊是榜單前五

和上個月一樣，沒有新品發布的iOS設備性能榜的上榜設備并沒有什么更替，僅僅只有跑分變化而產生的排名變動，剛剛開始的蘋果WWDC2023，推出的產品也依舊是新款Mac Pro、新款Mac Stu
CSS單標簽實現轉轉logo

轉轉品牌升級后更新了全新的Logo，今天我們用純CSS來實現轉轉的新Logo，為了有一定的挑戰性，這里我們只使用一個標簽實現，將最大化的使用CSS能力完成Logo的繪制與動畫效果。新logo
分布式系統中的CAP理論，面試必問，你理解了嘛？

對于剛剛接觸分布式系統的小伙伴們來說，一提起分布式系統，就感覺高大上，深不可測。而且看了很多書和視頻還是一臉懵逼。這篇文章主要使用大白話的方式，帶你理解一下分布式系統
三言兩語說透柯里化和反柯里化

JavaScript中的柯里化(Currying)和反柯里化(Uncurrying)是兩種很有用的技術，可以幫助我們寫出更加優雅、泛用的函數。本文將首先介紹柯里化和反柯里化的概念、實現原理和應用
在線圖片編輯器，支持PSD解析、AI摳圖等

自從我上次分享一個人開發仿造稿定設計的圖片編輯器到現在，不知不覺已過去一年時間了，期間我經歷了裁員失業、面試找工作碰壁，寒冬下一直沒有很好地履行計劃.....這些就放在日
這款新興工具平臺，讓你的電腦效率翻倍

隨著信息技術的發展,我們獲取信息的渠道越來越多,但是處理信息的效率卻成為一個瓶頸。于是各種工具應運而生,都在爭相解決我們的工作效率問題。今天我要給大家介紹一款效率
東方甄選單飛：有些鳥注定是關不住的

作者：彭寬鴻來源：華爾街科技眼&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;東方甄選創始人俞敏洪帶隊的“7天甘肅行”直播活動已在近日順利收官。成立后一
2299元起！iQOO Pad開啟預售：性能最強天璣平板

5月23日，iQOO如期舉行了新品發布會，除了首發安卓最強旗艦處理器的iQOO Neo8系列新機外，還在發布會上推出了旗下首款平板電腦——iQOO Pad，其搭載了天璣
與兆芯合作聯想推出全新旗艦版筆記本電腦開天N7系列

聯想與兆芯合作推出全新聯想旗艦版筆記本電腦開天 N7系列。這個系列采用兆芯KX-6640MA處理器平臺，KX-6640MA 處理器是采用了陸家嘴架構，16nm 工藝，4 核 4 線

AVt天堂网手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

PlantUML畫時序圖，真香！

引言

一、什么是PlantUML？

二、快速入門

PlantUML插件

Hello World!

三、PlantUML時序圖語法

聲明參與者

消息傳遞

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

分組和替代

注釋

顏色

四、完整實例

五、總結

5月iOS設備性能榜：M1 M2依舊是榜單前五

CSS單標簽實現轉轉logo

分布式系統中的CAP理論，面試必問，你理解了嘛？

三言兩語說透柯里化和反柯里化

在線圖片編輯器，支持PSD解析、AI摳圖等

這款新興工具平臺，讓你的電腦效率翻倍

東方甄選單飛：有些鳥注定是關不住的

2299元起！iQOO Pad開啟預售：性能最強天璣平板

與兆芯合作聯想推出全新旗艦版筆記本電腦開天N7系列

最新推薦

猜你喜歡

熱門推薦

相關資訊