大貓咪的新玩具Mermaid，用簡單的方法畫出好看的流程圖！
前陣子在介紹流程圖
那麼現在就來介紹在 Markdown 裡面畫流程圖鼎鼎大名的 Mermaid 吧！
Mermaid
Mermaid 是一個 JavaScript 的套件可以畫出各種圖形出來，像是流程圖、時序圖、Class diagrams、圓餅圖、甘特圖….等，但這裡主要會介紹流程圖，有興趣的可以到 Mermaid 官網看說明。
這邊偷偷放一個用 Mermaid 做的 Pie Chart，我去內政部戶政司人口統計查了一下十五歲以上人口婚姻狀況，然後製作成下圖的 Pie Chart。
民國111年 - 臺灣15歲以上人口婚姻狀況
流程圖
在 Mermaid 中，宣告一個流程圖基本就是如下：
---
title: Node
---
flowchart LR
node
流程圖的方向也可以改變，上方的例子是 LR。
- TB - top to bottom
- TD - top-down/ same as top to bottom
- BT - bottom to top
- RL - right to left
- LR - left to right
主題
Mermaid 有提供以下幾個主題：
- default
- neutral
- dark
- forest
使用方法：
例如要設定為 forest 在最前面加上這行
%%{init: {'theme': 'forest'} }%%符號介紹
- Terminal 終端：
([]) - Process 程式：
[] - flowline 流程線：
--> - Input/Output 輸入輸出：
[//] - Database資料庫：
[()] - Defined Process 函式：
[[]] - Loop Initialization 迴圈初始化：
{{}} - Decision 決策判斷：
{}
%% 終端 ([])
start([Start])
%% 程式 []
process[Process]
%% 流程線 -->
start --> process
%% 輸入輸出 [//]
inout[/Input\nOutput/]
%% 資料庫 [()]
db[(Database)]
%% 函示 [[]]
def[[Defined Process]]
%% 迴圈初始化 {{}}
loop{{Loop Initialization}}
%% 決策判斷 {}
decision{Decision}
連接的線條也可以做一些改變，甚至可以加上說明文字，像是這樣：
- 實心箭頭：
--> - 實心箭頭 + 文字：
-- text -->-->|text|
- 實線：
--- - 實線 + 文字：
-- text ------|text|
- 虛線箭頭：
-.-> - 虛線箭頭+文字：
-. text .-> - 粗實心箭頭：
==> - 粗實心箭頭 + 文字：
== text ==>
%% 實心箭頭 -->
start --> process
%% 實心箭頭+文字
%% -- text -->
%% -->|text|
start1 -- I'm a text. --> process1
start1 -->|I'm a text.| process1
%% 實線 ---
start2 --- process2
%% 實線+文字
%% -- text ---
%% ---|text|
start3 -- I'm a text. --- process3
start3 ---|I'm a text.| process3
%% 虛線箭頭 -.->
start4 -.-> process4
%% 虛線箭頭+文字
%% -. text .->
start5 -. I'm a text. .-> process5
%% 粗實心箭頭 ==>
start6 ==> process6
%% 粗實心箭頭+文字
%% == text ==>
start7 == I'm a text. ==> process7
所以如果是決策判斷就可以畫成這樣：
%%{init: {'theme': 'forest'} }%%
flowchart TD
B{Tired ?}
B -- Yes --> C[Sleep]
B -- No --> D[Play Games]
HTML
Mermaid 會渲染所有 pre 元素上 class 是 mermaid 的內容，所以流程圖要放在這個裡面，如下圖。
<pre class="mermaid">
flowchart LR
A --> B
</pre>接著引入 js，要使用 ESM 的方式，如下圖。
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
</script>最後整合在一起就會變成這樣：
<!DOCTYPE html>
<html lang="en">
<body>
<pre class="mermaid">
flowchart LR
A --> B
</pre>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
</script>
</body>
</html>Mermaid Live Editor
在 Mermaid Live Editor 上面可以直接編輯你的流程圖，旁邊會即時顯示渲染出來的結果。
甚至也可以直接匯出圖片或是向量圖檔，如下圖：
Mermaid Ink
除了在 HTML 裡面放流程圖之外，我們也可以在 Markdown 上面放流程圖，有些地方的 Markdown 內建有支援 Mermaid，沒有支援的話，也可以用 Mermaid Live Editor 下載成圖片，但如果剛好沒有支援，也不想下載成圖片的話，我們可以使用 Mermaid Ink 來幫我們達成。
首先，我們一樣到 Mermaid Live Editor 製作我們的流程圖。
點開左下方的 Action。
接著選擇要 PNG 或是 SVG 檔案，並按下按鈕。
會開啟一個新的網頁，該網頁的網址大概會長如下這樣。
https://mermaid.ink/svg/pako:eNpVkMFqwzAMhl9F-LRB8gI5DNak66Vjg_W0JAeRKLVZbRlboZQk7z43YbDqJP3__wmhSXXckyrUcOFrpzEInKrGQarXutTBRLEYW8jzl_lAApYd3WbYPR0YombvjTs_b_ndPQTldLzHCEQb97NsVrnyH45mqOojemHf_ndOV55hX5tPndY_OjpQot7qAYsB8w4DlBhalSlLwaLp0-nTBjRKNFlqVJHagQNFaVTjlpTFUfjr5jpVSBgpU6PvUagyeA5oH8V9b4TDn0br9L69aP1Upjy6b-aEDXiJtPwC14ZpEQ我們就可以複製該網頁的連結到 Markdown 當作線上圖片使用了，像這樣：
運用 Mermaid Ink 的方式也有很多種，像是我可以在 Python 中製作我的流程圖，Mermaid Ink 可以製作一般圖片或是 SVG 的檔案，那後面看到的一長串的就是我們的流程圖的編碼，有支援 pako 和 base64 兩種編碼的方式。
我們還可以更改背景顏色，如果是要改成#123456，在結尾加上?bgColor=123456：
# SVG
https://mermaid.ink/svg/...?bgColor=
# 圖片
https://mermaid.ink/img/...?bgColor=這邊示範用 base64 的方式來製作流程圖：
import base64
import requests
from PIL import Image
def png(graph, bg = None):
graphbytes = graph.encode("ascii")
base64_bytes = base64.b64encode(graphbytes)
base64_string = base64_bytes.decode("ascii")
url = "https://mermaid.ink/img/" + base64_string
if bg is not None:
url += "?bgColor=" + bg
im = Image.open(requests.get(url, stream=True).raw)
im.save('flow.png')
def svg(graph, bg = None):
graphbytes = graph.encode("ascii")
base64_bytes = base64.b64encode(graphbytes)
base64_string = base64_bytes.decode("ascii")
url = "https://mermaid.ink/svg/" + base64_string
if bg is not None:
url += "?bgColor=" + bg
with open('flow.svg', 'w') as f:
f.write(requests.get(url).text)
g = """
graph LR;
A--> B & C & D;
B--> A & E;
C--> A & E;
D--> A & E;
E--> B & C & D;
"""
png(g, '123456')
svg(g, 'FF0000')Mermaid CLI
還有專門為了 Mermaid 推出的 CLI 版本，如果是喜歡用 CLI 版本的人呢，可以用這個。
安裝方式：
npm install -g @mermaid-js/mermaid-cli我們可以將 Mermaid 的流程圖寫在 `input.mmd` 裡面，然後用下方的指令輸出成 SVG 圖片。
mmdc -i input.mmd -o output.svg一樣可以調整主題和透明。
mmdc -i input.mmd -o output.png -t dark -b transparent如果說我的 Markdown 裡面有用到 Mermaid，我們也可以將 Mermaid 的部分圖片渲染出來儲存成檔案，並幫我將 Markdown 內的 Mermaid 改成儲存的圖片連結。
mmdc -i readme.template.md -o readme.md這是 readme.template.md
# Test
```mermaid
flowchart LR
A --> B
```執行上方的指令後，同個資料夾內多了個檔案 readme-1.svg，以下是 readme.md 的內容：
# Test
Reference
如果你覺得這篇文章有用 可以考慮贊助飲料給大貓咪