時序圖繪制

最近在vs code上用markdown寫的一些總結文檔，需要繪制時序圖。

本來是想找一個工具去繪制的，由於之前用的ProcessOn畫流程圖，所以先去上面找了一下，竟然沒有時序圖相關的。。於是搜索了一下，得知了mermaid這個東西

 

mermaid

mermaid是通過類markdown語法，來繪制流程圖、時序圖等的方式，通過特定的工具將mermaid語法描述的內容以圖的形式展現。

mermaid有一些基礎的語法：

• 開頭的`sequenceDiagram`代表時序圖
• participant后跟時序圖中的對象
• 箭頭用簡單的->或-->>等表示，代表實線、虛線、箭頭樣式等
• loop/alt/opt等條件、循環語句結構
• Note right/left of xx增加文字描述

如下語句：

sequenceDiagram
    participant Alice
    participant Bob
    Alice->John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!

mermaid中可展示為：

實際使用起來，由於工具用的vscode，預覽有插件，但是生成html卻沒有插件支持轉換mermaid語法了。。無奈又搜索了下，發現了plantuml這個東西。。

 

PlantUML

官網廣告有點多，不過開源項目，能有收入支持是好事。

PlantUML和mermaid語法非常相似，很高興我已經畫好的時序圖不用大改~

代碼：

@startuml
Alice -> Bob: Authentication Request
alt successful case
Bob -> Alice: Authentication Accepted

else some kind of failure
Bob -> Alice: Authentication Failure
group My own label
	Alice -> Log : Log attack start
    loop 1000 times
        Alice -> Bob: DNS Attack
    end
	Alice -> Log : Log attack end
end

else Another type of failure
Bob -> Alice: Please repeat
end
 @enduml

對應的圖形：

對應在vs code中，有PlantUML插件，雖然不支持markdown嵌入，但是至少我可以用單獨的文件書寫語法，然后導出圖片在markdown中引入了。

該插件還支持如果多個圖形描述都在一個文件里，可以批量導出文件的圖形為圖片，不過有一點遺憾的是不支持直接導出到當前文件夾下，非要導出到一個out目錄中。。。

 

以上