在工作中，我們在寫文檔的時候常常會遇到時序圖，時序圖可以表示各個部分之間是如何交互的，以及交互的順序是什麼樣的。一個好的時序圖，可以省掉一堆廢話，以下就是一個簡單的時序圖。但是如果徒手畫時序圖未免有點麻煩，那麼有沒有什麼辦法可以讓我們只關注邏輯，像寫markdown一樣畫時序圖呢--有，那就是神器Mermaid。
Mermaid
Mermaid是一個開源的js庫，可以讓我們使用類似於markdown的語法繪製圖表，Mermaid支持的圖標類型有：
- 流程圖
- 時序圖
- 餅圖
- 狀態圖
- 甘特圖
- git圖
- 用戶旅行圖
我們可以在官方編輯器裏面體驗這些圖的繪製過程，還可以保存下來。接下來我們就介紹下繪製時序圖的語法。
時序圖
繪製時許圖的基本語法如下：
[角色A][箭頭][角色B]: 消息描述
比如描述客戶端發送登錄賬號密碼給服務器可以這樣寫：
sequenceDiagram
客戶端->>服務器: 發送賬號密碼
這時服務器會在內部校驗密碼，可以這麼寫：
服務器-->>服務器: 校驗賬號密碼
時序圖支持8種箭頭類型：
| Type | Description |
|---|---|
| -> | 實線 |
| --> | 虛線 |
| ->> | 帶箭頭實線 |
| -->> | 帶箭頭虛線 |
| -x | 斷頭實線 |
| --x | 斷頭虛線 |
| -) | 表示異步的箭頭實線 (async) |
| --) | 表示異步的箭頭虛線 (async) |
筆記（Notes）
我們可以在流程圖上面添加一些筆記或者說明，語法如下：
Note [ right of | left of | over ] [Actor]
sequenceDiagram
客戶端->>服務器: 發送賬號密碼
Note over 服務器: 超時時間3s
服務器-->>服務器: 校驗賬號密碼
循環，選擇控制流
在時序圖中是可以表示循環和選擇的，比如我們要表示小明的女朋友叫小明每天向她說早安：
sequenceDiagram
actor G as 女朋友
actor XM as 小明
G->>XM: 每天跟我說早安
loop 每天
XM-->>G: 早安
end
後來小明的女朋友成了他老婆，有一天小明老婆讓小明下班時買一斤包子，如果遇到賣西瓜的，就買一個。圖示如下：
sequenceDiagram
actor G as 小明老婆
actor XM as 小明
actor BUN as 包子鋪
G->>XM: 下班時買一斤包子，如果遇到賣西瓜的，就買一個
alt 遇到賣西瓜的
XM-->>BUN: 買一個包子
else
XM-->>BUN: 買一斤包子
end
XM->>G: 回家跪戳衣板
背景高亮
有時候我們想給某塊流程設置高亮，可以用以下的語法：
rect rgba(0, 0, 255, .1)
... content ...
end
比如給上面的選擇分支加一個背景:
rect rgb(0,255,0)
alt 遇到賣西瓜的
XM-->>BUN: 買一個包子
else
XM-->>BUN: 買一斤包子
end
end
總結
上面我們講了如何用mermaid繪製時序圖，你學會了嗎