## Mermaid 是什麼 Mermaid 是一個基於 Markdown 和 JavaScript 的圖表繪製工具，而繪製方式類似於寫程式碼，也就是在鍵盤上敲敲打打就可以做出各式圖表，下面的範例圖就是用 Mermaid 繪製出來的，跟著下面的教學就能輕鬆學會呦，做出專屬自己的圖表～ ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVzNsma6WUxtiyM_eaWbxoqNB85HReh8MzOHjUdaIsRnMSsV_2zW84TaO4_CaoNekHzgcaKFT-iX9ZHr3UUd2lO6hZN68Iki3XOaLznm7MpLsUA_WxwDcuGkSZV63dtmmDNXS60kynJMZFAAhK7SRDvM2Ie6be3f9FCtnl2BfJjBUXlFo/s1600/%E8%9E%A2%E5%B9%95%E6%93%B7%E5%8F%96%E7%95%AB%E9%9D%A2%202024-04-13%20010104.png =500x) ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxSZ0V22apG3wMjndAuonMD7pgDdZ-FIRYgg32yHujzYdEQt4X4bwK8H54TPLbvFvDTujSyaqsZYhq6UoWUfJWivisGosAzz_EjwtsWhbcRo6WWtbFC4SRC50RZD6eClhJY3Wjsr1IXbKEkgWzYAPSqtZpp8lA8CGPo0zdWq6QVg76jig/s1600/%E8%9E%A2%E5%B9%95%E6%93%B7%E5%8F%96%E7%95%AB%E9%9D%A2%202024-04-13%20010222.png =180x) ## 哪裡可以使用 Mermaid 有支援 markdown 的地方都可以使用喔，像是 Notion, HackMD 等等都有支援，使用方式為建立一個程式碼區塊，並將語言指定為 Mermaid 即可。 ## Mermaid Flowchar 語法 讓我們從簡單的流程圖開始教學，其他圖表語法可以參考[官方網站的教學](https://mermaid.js.org/syntax/flowchart.html) ### 起手式 由 flowchart 開頭，也可以在上方加上標題（選用） ``` --- title: 第一個 flowchat --- flowchart ``` ```mermaid --- title: 第一個 flowchat --- flowchart ``` ### 流程圖方向 指定你的流程圖要往哪個方向長 - TB：由上到下（預設） - BT：由下到上 - RL：由右到左 - LR：由左到右 ``` flowchart TB A --> B ``` ```mermaid flowchart TB A --> B ``` ``` flowchart RL A --> B ``` ```mermaid flowchart RL A --> B ``` ### 定義節點 沒錯剛剛的例子可以看到有兩個長方形 A 和 B，我們稱它為節點，透過不同的語法可以製造出更多不同形狀的節點。 直接打上文字 (id) 就可以建造出節點，再用方括號等表示語法去決定形狀和顯式的文字，如果不指定則會用長方形和 id 顯示 ``` flowchart id id1[方形] id2(圓角方形) id3([體育場形]) id4[[子例程]] id5[(圓柱)] id6((圓形)) ``` ```mermaid flowchart id id1[方形] id2(圓角方形) id3([體育場形]) id4[[子例程]] id5[(圓柱)] id6((圓形)) ``` ``` flowchart id7>非對稱] id8{菱形} id9{{六邊形}} id10[/平行四邊形/] id11[\平行四邊形\] id12[/梯形\] id13[\梯形/] ``` ```mermaid flowchart id7>非對稱] id8{菱形} id9{{六邊形}} id10[/平行四邊形/] id11[\平行四邊形\] id12[/梯形\] id13[\梯形/] ``` ### 串聯節點 有了節點之後可以用直線、箭頭等符號將流程表示出來 ``` flowchart A --- B C -.- D E === F G --> H I -.-> J K ==> L ``` ```mermaid 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 ``` ```mermaid flowchart A --- |文字| B C -.- |文字| D E === |文字| F G --> |文字| H I -.-> |文字| J K ==> |文字| L ``` 線還可以加長 ``` flowchart A --- B C -.- D E ---- F G -..- H ``` ```mermaid 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] ``` ```mermaid flowchart LR A[Start] --> B{Is it?} B --> |Yes| C[OK] C --> D[Rethink] D --> B B ----> |No| E[End] ``` ### 其他小技巧 兩個百分號代表註解，不會被顯示出來 ``` flowchart LR A --- B %% 註解 ``` ```mermaid flowchart LR A --- B %% 註解 ``` 節點增加連結 ``` flowchart LR A --- B click A "https://mermaid.js.org/" ``` ```mermaid flowchart LR A --- B click A "https://mermaid.js.org/" ``` 使用主題：有 default, forest, neutral, dark, base 五種主題可選用 ``` %%{init: {'theme': 'forest'} }%% flowchart LR A --- B ``` ```mermaid %%{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 ``` ```mermaid 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 官方網站](https://mermaid.js.org/)