利器 之 PlantUML

君子生非異也，善假於物也。

個人剛需

最近把背光調節的源碼梳理了一遍，到了要畫個時序圖，Visio 是個不錯的選擇，拖拖挺方便，但我不想用了，修改起來比較麻煩，我須要一勞永逸，就像 Markdown 這樣的利器，文本書寫，寫完一篇文章，全平臺通用。

Mermaid

我自己知道 Markdown 是支持時序圖的，那就是 Mermaid，Mermaid 可用於畫流程圖、狀態圖、時序圖、甘特圖，使用 JS 進行本地渲染，普遍集成於許多 Markdown 編輯器中。

sequenceDiagram
title: 序列圖sequence(示例)
participant A
participant B
participant C

note left of A: A左側說明
note over B: 覆蓋B的說明
note right of C: C右側說明

A->>A:本身到本身
A-->A:本身到本身
A->>B:實線帶箭頭
A->C:實線不帶箭頭
C-->>B:虛線帶箭頭
B-->A:虛線不帶箭頭
A-xB:實線箭頭帶叉
B--xC:虛線箭頭帶叉

複製代碼

在瞭解 Mermaid 時序圖語法，跟着示例畫出了個時序圖後，驚歎牛逼，我覺得有了大利器，當我實際去畫圖，涉及類不少，Mermaid 暴露了缺點，顯示出的時序圖是模糊的，所以本篇不打算花大篇幅介紹 Mermaid 了，你們知道 Mermaid 能夠畫簡單的時序圖這點就夠了。

PlantUML

個人剛需尚未解決，須要繼續尋找利器，就不得不試試 PlantUML，我自己也是知道 PlantUML，由於 PlantUML 配置複雜以及其語法看起來也比較複雜，所以一直沒有去學習 PlantUML，好吧，遇到困難真的不能選擇迴避，它必定會在某個時候再找回來的。

安裝

下載 VSCode

code.visualstudio.com/Download

下載 Graphviz

可選的，建議安裝，若是想繪製除時序圖和活動圖之外的圖，就須要安裝 Graphviz 軟件。

• Ubuntu

sudo apt-get install graphviz
複製代碼

• Windows

  www.graphviz.org/download/

• Mac

  mac.filehorse.com/download-gr…

VSCode 安裝插件

• PlantUML

• Markdown Preview Enhanced

時序圖預覽

@startuml
title: 序列圖sequence(示例)
participant A
participant B
participant C
participant D
participant E

note left of A: A左側說明
note over D: 覆蓋D的說明
note right of F: F右側說明

A ->x B: 丟失的消息
B -> C: 實線箭頭
C ->> D: 實線細箭頭
D -\ E: 實線半箭頭
E -\\ F: 實線半箭頭
F --/ E: 虛線半箭頭
E -->o D: 虛線箭頭加圈
D --\o C: 虛線半箭頭加圈
C <--> B: 實線雙向箭頭
A --> A: 本身到本身
@enduml
複製代碼

是否是語法和 Mermaid 有點像啊，因此說 PlantUML 語法也沒那麼難。

PlantUML 官網：plantuml.com ，有詳細的語法文檔，先都過一遍，用到時能夠去查下。

最後

其實 Android Studio 也能夠安裝 PlantUML，當我裝了，準備 Markdown 寫文章時，發現 Android Studio 只能畫圖，沒有知足個人剛需，最後才採用 VSCode + Graphviz + PlantUML + Markdown Preview Enhanced，效果也是槓槓的。

PlantUML 除了能畫時序圖，還能畫用例圖、類圖、活動圖、組件圖、狀態圖、對象圖、部署圖等，功能實在太強大了，後面有須要，再一一介紹。

更多文章請關注公號：吳小龍同窗。