撰寫文件時，時常需要利用流程圖等，視覺化表達文件內容，幫助閱讀理解。
先前文章介紹過 docsify 文件工具(學習撰寫文件，初識好幫手 docsify)，docsify 使用的是 Markdown 語法。因此繪圖時，也希望可以一併使用 Markdown 語法繪圖。較多人推薦使用的工具為 Graphviz 及 mermaid。
兩者皆可以透過 Markdown 語法，以 JS 畫圖，不需另外透過外部 server 處理、存取圖片，隱私安全性較好。
筆者先前使用 Graphviz，畫流程圖、簡單的資料關聯表，使用上簡單好上手，也有滿足需求。後來看見 mermaid 能夠畫出更多不同的圖表，例如甘特圖、圓餅圖等，也想試著了解 mermaid，也許能夠幫助文件撰寫。因此本文先以最好入門的 Flowcharts 流程圖開始，入門 mermaid。
➤ 在 docsify 引入 mermaid
STEP 1：於 index.html 引入 CSS、JS 資源
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.css">
<script src="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>STEP 2：初始化設置
- num 為 mermaid 渲染時，每一區塊 id 命名用。
- initialize 初始化參數中的 theme 主題，亦可以選用其他主題，例如：default、forest、dark、neutral
- 如果要做其他更細微的 CSS 調整，亦可調整於初始化參數 themeCSS 中
➤ 畫出簡單的 Flowcharts
定義方向
- TB：上到下，同 TD
- BT：下到上
- RL：右到左
- LR：左到右
聲明語言為 mermaid，以 graph 為開頭，聲明圖表方向。
```mermaid
graph TB
id1(A)-->id2[B]
```以 A 至 B 為例，可以使用四種方向：
定義圖型
- 每一個圖型，皆有自己的表達方式，例如 方框 [] 、六角形 {{}}。圖型表達內的文字，即為顯示文字。圖型表達前方的 id，即為渲染後的元素 id。
- 體育場形狀指的是一對相對側具有半圓形的矩形構成的二維幾何形狀(查看更多說明)
```mermaid
graph LR
id1[方框]
id2(帶有圓角的方框)
id3([體育場形狀])
id4[[子例程]]
id5[(圓柱狀)]
id6((圓形))
id7>非對稱形狀]
id8{菱形}
id9{{六角形}}
id10[/平行四邊形1/]
id11[\平行四邊形2\]
id12[/梯形1\]
id13[\梯形2/]
```
- 若不特別更改圖型，預設為方框，其中 id 即為文本內容與元素 id
graph LR
id圖形之間的連接
- 線條分為實線(一般、箭頭、加粗)與虛線(一般、箭頭)。
```mermaid
graph LR
A --- B
C --> D
E -.- F
G -.-> H
I === J
```
- 線條間可以加上文字描述
```mermaid
graph LR
A-- 文字 ---B
C-- 文字 --> D
E -. 文字 .- F
G -. 文字 .-> H
I == 文字 ==> J
```
調整 CSS 樣式
- 使用 style 關鍵字，定義特定 id 元素的 CSS 樣式
```mermaid
graph LR
id1[方框]-- 文字 ---id2(帶有圓角的方框)
style id1 fill:#f6e6a1,stroke:#a1cdf6,stroke-width:4px
```
子圖
- 利用子圖可以標示出特定流程區塊
- 以 subgraph 表示子圖區塊開始，end 表示子圖區塊結束
- 子圖標題設定於 subgraph 關鍵字後
```mermaid
graph LR
subgraph 子圖A
A --- B --- C
end
C --> D
```
繪製流程
- 範例一
```mermaid
graph TD
id1[A] --> id2{B}
id2{B} -- YES --> id3[C]
id2{B} -- NO --> id4{D}
id4{D} -- YES --> id5[E]
id4{D} -- NO --> id6[F]
```
- 範例二
```mermaid
graph LR
id1([開始]) --> id2[B] --> id3{C}
subgraph block
id3{C} -- NO --> id2[B]
id3{C} -- YES --> id4[D]
end
id4[D] --> id5([結束])
```
以上是今天的小分享，之後有時間再補上其他的圖表繪製方式，有任何問題都歡迎留言指教，謝謝 😊
