- Mermaid 是一個用於畫流程圖、狀態圖、時序圖、甘特圖的庫，使用 JS 進行本地渲染，廣泛集成於許多 Markdown 編輯器中。
- 之前用過 PlantUML，但是發現這個東西的實現原理是生成 UML 的圖片后上傳服務端，每次再從服務端讀取，因此覺得不夠魯棒，隱私性也不好，因而棄用。
- Mermaid 作為一個使用 JS 渲染的庫，生成的不是一個“圖片”，而是一段 HTML 代碼，因此安全許多。
- 接下來介紹 Mermaid 的流程圖及序列圖的語法，也就是大家在工作中常使用的圖表。
- 官網：https://mermaidjs.github.io/
- Github：https://github.com/knsv/mermaid
流程圖
圖表方向
Mermaid 支持多種圖表的方向，語法如下：
graph 方向描述
圖表中的其他語句...
其中“方向描述”為
| 用詞 |
含義 |
| TB |
從上到下 |
| BT |
從下到上 |
| RL |
從右到左 |
| LR |
從左到右 |
節點定義
即流程圖中每個文本塊，包括開始、結束、處理、判斷等。Mermaid 中每個節點都有一個 id，以及節點的文字。
| 表述 |
說明 |
| id[文字] |
矩形節點 |
| id(文字) |
圓角矩形節點 |
| id((文字)) |
圓形節點 |
| id>文字] |
右向旗幟狀節點 |
| id{文字} |
菱形節點 |
需要注意的是，如果節點的文字中包含標點符號，需要時用雙引號包裹起來。
另外如果希望在文字中使用換行，請使用 替換換行
節點間的連線
| 表述 |
說明 |
| > |
添加尾部箭頭 |
| - |
不添加尾部箭頭 |
| -- |
單線 |
| --text-- |
單線上加文字 |
| == |
粗線 |
| ==text== |
粗線加文字 |
| -.- |
虛線 |
| -.text.- |
虛線加文字 |
子圖表
使用以下語法添加子圖表
subgraph 子圖表名稱
子圖表中的描述語句...
end
對 fontawesome 的支持
使用 fa: #圖表名稱# 的語法添加 fontawesome。
舉個例子
graph TB
id1(圓角矩形)--普通線-->id2[矩形]
subgraph 子圖表
id2==粗線==>id3{菱形}
id3-.虛線.->id4>右向旗幟]
id3--無箭頭---id5((圓形))
end
graph TB
id1(圓角矩形)--普通線-->id2[矩形]
subgraph 子圖表
id2==粗線==>id3{菱形}
id3-.虛線.->id4>右向旗幟]
id3--無箭頭---id5((圓形))
end
序列圖
使用以下語法開始序列圖
sequenceDiagram
[參與者1][消息線][參與者2]:消息體
...
例如
sequenceDiagram
張三->>李四: 吃了嗎？
李四->>張三: 吃了
參與者
上例中的張三、李四都是參與者，上例中的語法是最簡單的，也可以明顯表明參與者有哪些
sequenceDiagram
participant 參與者 1
participant 參與者 2
...
participant 簡稱 as 參與者 3 #該語法可以在接下來的描述中使用簡稱來代替參與者 3
消息線
| 類型 |
描述 |
| -> |
無箭頭的實線 |
| --> |
無箭頭的虛線 |
| ->> |
有箭頭的實線 |
| -->> |
有箭頭的虛線 |
| -x |
末端為叉的實線（表示異步） |
| --x |
末端為叉的虛線（表示異步） |
處理中
在消息線末尾增加 + ，則消息接收者進入當前消息的“處理中”狀態；
在消息線末尾增加 - ，則消息接收者離開當前消息的“處理中”狀態。
或者使用以下語法直接說明某個參與者進入“處理中”狀態
標注
語法如下
Note 位置表述 參與者: 標注文字
其中位置表述可以為
| 表述 |
含義 |
| right of |
右側 |
| left of |
左側 |
| over |
在當中，可以橫跨多個參與者 |
循環
語法如下
loop 循環的條件
循環體描述語句
end
判斷
alt 條件 1 描述
分支 1 描述語句
else 條件 2 描述 # else 分支可選
分支 2 描述語句
else ...
...
end
如果遇到可選的情況，即沒有 else 分支的情況，使用如下語法：
opt 條件描述
分支描述語句
end
舉個例子
sequenceDiagram
participant z as 張三
participant l as 李四
loop 日復一日
z->>l: 吃了嗎您吶？
l-->>z: 吃了，您呢？
activate z
Note left of z: 想了一下
alt 還沒吃
z-xl: 還沒呢，正准備回去吃
else 已經吃了
z-xl: 我也吃過了，哈哈
end
opt 大過年的
l-->z: 祝您新年好啊
end
end
sequenceDiagram
participant z as 張三
participant l as 李四
loop 日復一日
z->>l: 吃了嗎您吶？
l-->>z: 吃了，您呢？
activate z
Note left of z: 想了一下
alt 還沒吃
z-xl: 還沒呢，正准備回去吃
else 已經吃了
z-xl: 我也吃過了，哈哈
end
opt 大過年的
l-->z: 祝您新年好啊
end
end
張三->李四: 嘿，小四兒, 寫博客了沒?
Note right of 李四: 李四愣了一下，說：
李四-->張三: 忙得吐血，哪有時間寫。
st=>start: 開始
e=>end: 結束
op=>operation: 我的操作
cond=>condition: 確認？
st->op->cond
cond(yes)->e
cond(no)->op
