使用sublime+platUML快速畫流程圖
程序員難免要經常畫流程圖,狀態圖,時序圖等。以前經常用 visio 畫,經常為矩形畫多大,擺放在哪等問題費腦筋。有時候修改文字後,為了較好的顯示效果不得不再去修改圖形。今天介紹的工具是如何使用 Sublime + PlantUML 的插件畫流程圖,狀態圖,時序圖等。這是一種程序員看了就會愛上的畫圖方式:自然,高效。
什麽是 PlantUML
PlantUML 是一個畫圖腳本語言,用它可以快速地畫出:
- 時序圖
- 流程圖
- 用例圖
- 狀態圖
- 組件圖
簡單地講,我們使用 visio 畫圖時需要一個一個圖去畫,但使用 PlantUML 只需要用文字表達出圖的內容,然後就可以直接生成圖片。看一個最簡單的例子:
Bob -> Alice : Hello, how are you
Alice -> Bob : Fine, thank you, and you?
demo
軟件安裝
這些軟件全部是開源或共享軟件,不存在版權問題,可以放心使用。
- 安裝 Sublime
Sublime 是個強大的可擴展的文本編輯器。進入官網下載對應操作系統下的版本安裝即可。 - 安裝 graphviz
graphviz 是個開源的圖片渲染庫。安裝了這個庫才能在 Windows 下實現把 PlantUML 腳本轉換為圖片。 - 安裝 PlantUML for Sublime 插件
有了這個插件後,我們就可以在 Sublime 裏寫 PlantUML 腳本,然後直接通過一個快捷鍵生成圖片。安裝步驟如下- 下載插件,並解壓
- 通過
Preferences -> Browse Packages ...
打開 sublime 的Packages
目錄,解壓後的插件放在Packages
目錄下 - 重啟 Sublime
為了簡化使用,可以在 Sublime 裏配置個快捷鍵。打開 Preferences -> Key Binding - User
,添加一個快捷鍵:
{ "keys": ["alt+d"], "command": "display_diagrams"}
上面的代碼配置成按住 Alt + d
來生成 PlantUML 圖片,你可以修改成你自己喜歡的按鍵。
效果檢驗
最後檢驗一下工作安裝是否正確。打開 Sublime 輸入:
Bob -> Alice : Hello, how are you
Alice -> Bob : Fine, thank you, and you?
選中這些文本內容,按 Alt + d 會在當前工作目錄下生成這個圖片文件,同時自動彈出窗口顯示圖片。
註意事項
- Sublime Text 3 安裝失敗問題
安裝plantUML插件時,出現 unable to load diagram plugin,check console for details. 把例子粘過來 alt+D 時顯示nothing to process. 剛剛找到了解決辦法:原因是下載的插件裏無法加載文件:Diagram.sublime-settings,其中第三行將編碼方式”charset”: null改為”charset”: “UTF-8″,關掉sublime Text 3重啟即可。感謝 @niminote 提供的解決方案。 - 按 Alt + d 前需要讓要生成圖片的 PlantUML 腳本處於選中狀態,否則會提示 No diagrams overlap selections 。留言裏有不止一位同學犯了這個錯誤。
PlantULM 快速入門
時序圖
@startuml
title 時序圖
== 鑒權階段 ==
Alice -> Bob: 請求
Bob -> Alice: 應答
== 數據上傳 ==
Alice -> Bob: 上傳數據
note left: 這是顯示在左邊的備註
Bob --> Canny: 轉交數據
... 不超過 5 秒鐘 ...
Canny --> Bob: 狀態返回
note right: 這是顯示在右邊的備註
Bob -> Alice: 狀態返回
== 狀態顯示 ==
Alice -> Alice: 給自己發消息
@enduml
sequence diagram
TIPS:
- 使用
title
來指定標題 - ‘->’ 和 ‘–>’ 來指示線條的形式
- 在每個時序後面加冒號
:
來添加註釋 - 使用
note
來顯示備註,備註可以指定顯示在左邊或右邊 - 使用
== xxx ==
來分隔時序圖 - 使用
...
來表示延遲省略號 - 節點可以給自己發送消息,方法是發送方和接收方使用同一個主體即可
用例圖
@startuml
left to right direction
actor 消費者
actor 銷售員
rectangle 買單 {
消費者 -- (買單)
(買單) .> (付款) : include
(幫助) .> (買單) : extends
(買單) -- 銷售員
}
@enduml
use case
TIPS:
- 用例圖使用
actor
來定義參與者- 用例圖是指由參與者(Actor)、用例(Use Case)以及它們之間的關系構成的用於描述系統功能的靜態視圖
- 百度百科上有簡易的入門資料,其中用例之間的關系 (include, extends) 是關鍵
- 使用括號
(xxx)
來表示用例,用例用橢圓形表達 - 使用不同的線條表達不同的關系。包括參與者與用例的關系,用例與用例的關系
流程圖
@startuml
title 流程圖
(*) --> "步驟1處理"
--> "步驟2處理"
if "條件1判斷" then
->[true] "條件1成立時執行的動作"
if "分支條件2判斷" then
->[no] "條件2不成立時執行的動作"
-> === 中間流程匯總點1 ===
else
-->[yes] === 中間流程匯總點1 ===
endif
if "分支條件3判斷" then
-->[yes] "分支條件3成立時執行的動作"
--> "Page.onRender ()" as render
--> === REDIRECT_CHECK ===
else
-->[no] "分支條件3不成立時的動作"
--> render
endif
else
-->[false] === REDIRECT_CHECK ===
endif
if "條件4判斷" then
->[yes] "條件4成立時執行的動作"
--> "流程最後結點"
else
endif
--> "流程最後結點"
-->(*)
@enduml
activity diagram
上面的流程圖寫的時候還是挺直觀的,但畫出來的圖片渲染效果不好,對邏輯的顯示不清楚。由於這個原因 PlantUML 實現了另外版本的流程圖腳本。
下面是 PlantUML 支持的新版本的流程圖腳本,從使用角度來講,更直觀,畫出來的圖片也更漂亮,推薦使用。
@startuml
start
:"步驟1處理";
:"步驟2處理";
if ("條件1判斷") then (true)
:條件1成立時執行的動作;
if ("分支條件2判斷") then (no)
:"條件2不成立時執行的動作";
else
if ("條件3判斷") then (yes)
:"條件3成立時的動作";
else (no)
:"條件3不成立時的動作";
endif
endif
:"順序步驟3處理";
endif
if ("條件4判斷") then (yes)
:"條件4成立的動作";
else
if ("條件5判斷") then (yes)
:"條件5成立時的動作";
else (no)
:"條件5不成立時的動作";
endif
endif
stop
@enduml
active diagram 2
TIPS:
- 使用
start
來表示流程開始,使用stop
來表示流程結束 - 順序流程使用冒號和分號
:xxx;
來表示 - 條件語句使用
if ("condition 1") then (true/yes/false/no)
來表示 - 條件語句可以嵌套
組件圖
我們經常使用組件圖來畫部署視圖,或者用來畫系統的拓撲結構圖。
@startuml
package "組件1" {
["組件1.1"] - ["組件1.2"]
["組件1.2"] -> ["組件2.1"]
}
node "組件2" {
["組件2.1"] - ["組件2.2"]
["組件2.2"] --> [負載均衡服務器]
}
cloud {
[負載均衡服務器] -> [邏輯服務器1]
[負載均衡服務器] -> [邏輯服務器2]
[負載均衡服務器] -> [邏輯服務器3]
}
database "MySql" {
folder "This is my folder" {
[Folder 3]
}
frame "Foo" {
[Frame 4]
}
}
[邏輯服務器1] --> [Folder 3]
[邏輯服務器2] --> [Frame 4]
[邏輯服務器3] --> [Frame 4]
@enduml
component diagram
TIPS:
- 使用方括號
[xxx]
來表示組件 - 可以把幾個組件合並成一個包,可以使用的關鍵字為
package, node, folder, frame, cloud, database
。不同的關鍵字圖形不一樣。 - 可以在包內部用不同的箭頭表達同一個包的組件之間的關系
- 可以在包內部直接表達到另外一個包內部的組件的交互關系
- 可以在流程圖外部直接表達包之間或包的組件之間的交互關系
狀態圖
我們一般使用狀態圖來畫狀態機。
@startuml
scale 640 width
[*] --> NotShooting
state NotShooting {
[*] --> Idle
Idle --> Processing: SignalEvent
Processing --> Idle: Finish
Idle --> Configuring : EvConfig
Configuring --> Idle : EvConfig
}
state Configuring {
[*] --> NewValueSelection
NewValueSelection --> NewValuePreview : EvNewValue
NewValuePreview --> NewValueSelection : EvNewValueRejected
NewValuePreview --> NewValueSelection : EvNewValueSaved
state NewValuePreview {
State1 -> State2
}
}
@enduml
State Diagram
TIPS:
- 使用
[*]
來表示狀態的起點 - 使用 state 來定義子狀態圖
- 狀態圖可以嵌套
- 使用
scale
命令來指定生成的圖片的尺寸
總結
不需要去記這些標記,在需要的時候去使用它,通過不斷地使用來熟悉不同的圖的語法。可以下載 PlanUML 官方文檔 作為參考,遇到問題的時候翻一翻,這樣很快就可以學會使用 PlantUML 高效地畫圖。
文/kamidox(簡書作者)
使用sublime+platUML快速畫流程圖