大貓咪的新玩具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
如果你覺得這篇文章有用 可以考慮贊助飲料給大貓咪