用VSCode畫時序圖

前言

我不喜歡用圖形編輯器畫圖，由於經常陷入調整格式的深淵。因而找到了這個用代碼來畫圖的方法，發現極其好用。

配置

• 下載 Visual Studio Code

• 下載插件

  

• 新建文件擴展名.seqdiag

• 設置展現風格sequencediagrams.diagram.style，可選手繪or正常

• 啓動實時預覽：cmd + shift + p 調出命令模式，執行Show Sequence Diagram Preview

語法

• 註釋（不可預覽，也不會對預覽形成影響）

# comment
複製代碼

• 標題

Title: This is a title
複製代碼

• 同步調用

A->B: Hello
複製代碼

• 異步調用

A->>B
複製代碼

• 回覆消息

A-->B: Hello
複製代碼

• 筆記

Note left of A: Left note
Note right of A: right note
Note over A: over note
Note over A,B: over both A and B
複製代碼

• 從新排序，提早聲明順序，會覆蓋後續語法的順序

participant B
participant A
A->B: Hello
複製代碼

連接

• 語法官網：js-sequence-diagrams

歡迎關注個人公衆號SlowCoding