Mermaid 教學

Mermaid 是什麼

Mermaid 是一個基於 Markdown 和 JavaScript 的圖表繪製工具，而繪製方式類似於寫程式碼，也就是在鍵盤上敲敲打打就可以做出各式圖表，下面的範例圖就是用 Mermaid 繪製出來的，跟著下面的教學就能輕鬆學會呦，做出專屬自己的圖表～

mermaid flowchart mermaid piechart

哪裡可以使用 Mermaid

有支援 markdown 的地方都可以使用喔，像是 Notion, HackMD 等等都有支援，使用方式為建立一個程式碼區塊，並將語言指定為 Mermaid 即可。

Mermaid Flowchar 語法

讓我們從簡單的流程圖開始教學，其他圖表語法可以參考官方網站的教學

起手式

由 flowchart 開頭，也可以在上方加上標題（選用）

---
title: 第一個 flowchat
---
flowchart

---
title: 第一個 flowchat
---
flowchart

流程圖方向

指定你的流程圖要往哪個方向長

  • TB：由上到下（預設）
  • BT：由下到上
  • RL：由右到左
  • LR：由左到右
flowchart TB
  A --> B

flowchart TB
    A --> B

flowchart RL
  A --> B

flowchart RL
  A --> B

定義節點

沒錯剛剛的例子可以看到有兩個長方形 A 和 B，我們稱它為節點，透過不同的語法可以製造出更多不同形狀的節點。

直接打上文字 (id) 就可以建造出節點，再用方括號等表示語法去決定形狀和顯式的文字，如果不指定則會用長方形和 id 顯示

flowchart
  id
  id1[方形]
  id2(圓角方形)
  id3([體育場形])
  id4[[子例程]]
  id5[(圓柱)]
  id6((圓形))

flowchart
    id
    id1[方形]
    id2(圓角方形)
    id3([體育場形])
    id4[[子例程]]
    id5[(圓柱)]
    id6((圓形))

flowchart 
  id7>非對稱]
  id8{菱形}
  id9{{六邊形}}
  id10[/平行四邊形/]
  id11[\平行四邊形\]
  id12[/梯形\]
  id13[\梯形/]

flowchart 
  id7>非對稱]
  id8{菱形}
  id9{{六邊形}}
  id10[/平行四邊形/]
  id11[\平行四邊形\]
  id12[/梯形\]
  id13[\梯形/]

串聯節點

有了節點之後可以用直線、箭頭等符號將流程表示出來

flowchart
  A --- B
  C -.- D
  E === F
  G --> H
  I -.-> J
  K ==> L

flowchart
  A --- B
  C -.- D
  E === F
  G --> H
  I -.-> J
  K ==> L

線上也可以加入敘述文字（有下列兩種寫法）

flowchart 
  A -- 文字 --- B
  C -. 文字 .- D
  E == 文字 === F
  G -- 文字 --> H
  I -. 文字 .-> J
  K == 文字 ==> L

flowchart 
  A --- |文字| B
  C -.- |文字| D
  E === |文字| F
  G --> |文字| H
  I -.-> |文字| J
  K ==> |文字| L

flowchart 
  A --- |文字| B
  C -.- |文字| D
  E === |文字| F
  G --> |文字| H
  I -.-> |文字| J
  K ==> |文字| L

線還可以加長

flowchart 
  A --- B
  C -.- D
  E ---- F
  G -..- H

flowchart 
  A --- B
  C -.- D
  E ---- F
  G -..- H

自由組合

知道如建立節點和連接就可以自由的去組合流程圖，下面給大家一個範例，記得自己動手玩玩，可以更快上手喔

flowchart LR
  A[Start] --> B{Is it?}
  B --> |Yes| C[OK]
  C --> D[Rethink]
  D --> B
  B ----> |No| E[End]

flowchart LR
  A[Start] --> B{Is it?}
  B --> |Yes| C[OK]
  C --> D[Rethink]
  D --> B
  B ----> |No| E[End]

其他小技巧

兩個百分號代表註解，不會被顯示出來

flowchart LR
  A --- B
  %% 註解

flowchart LR
  A --- B
  %% 註解

節點增加連結

flowchart LR
  A --- B
  click A "https://mermaid.js.org/"

flowchart LR
  A --- B
  click A "https://mermaid.js.org/"

使用主題：有 default, forest, neutral, dark, base 五種主題可選用

%%{init: {'theme': 'forest'} }%%
flowchart LR
  A --- B

%%{init: {'theme': 'forest'} }%%
flowchart LR
  A --- B

自訂顏色

flowchart LR
  id1---id2
  style id1 fill:#d4bfb2, stroke:#877a71, stroke-width:2px, color:#ffffff
  style id2 fill:#e9b41b, stroke:#4f3d09, stroke-width:3px, stroke-dasharray:5 4

flowchart LR
  id1---id2
  style id1 fill:#d4bfb2, stroke:#877a71, stroke-width:2px, color:#ffffff
  style id2 fill:#e9b41b, stroke:#4f3d09, stroke-width:3px, stroke-dasharray:5 4

參考資料

Mermaid 官方網站