Markdown文件在開發中已經必不可少了，但只有文字描述始終有些枯燥，涉及到做圖表的話又需要切換到其他工具中，繪製好後再黏貼回來，如果要修改，萬一原始檔丟失就更麻煩了。對於這種問題實際上也早有方法，就是在各種現代Markdown編輯器都能見到的Mermaid 渲染方案。
Mermaid 是一個基於 Javascript 的圖表繪製工具，通過解析類 Markdown 的文字語法來實現圖表的建立和動態修改。Mermaid 誕生的主要目的是讓文件的更新能夠及時跟上開發進度。
Mermaid 支援的圖表也很豐富：流程圖、時序圖、類圖、狀態圖、實體關係圖、使用者旅程圖、甘特圖、餅圖、需求圖、Git圖。
就以流程圖為例，來了解一下如何在Markdown中繪圖的。
示例
來先看看樣子（官方線上編輯器地址：Online FlowChart & Diagrams Editor）：
flowchart TD
NodeA
NodeB[NodeB]
NodeA --> NodeB
NodeA <--> NodeB
NodeC(((start))) --Text--> NodeD{if}
NodeD -->|No| NodeN((loop)) -..- NodeC
NodeD -->|Yes| NodeY{{OK}}
NodeY --> NodeF & NodeE --x NodeG & NodeH
NodeH --> NodeI["中文與#quot;引號#quot;與 空格"]渲染後是這樣：
基礎語法
既然是在Markdown中繪圖，語法肯定必不可少，但不用怕，流程圖比較簡單語法也很易學。
與Markdown程式碼塊一樣，使用反引號語法填寫mermaid標識繪圖的程式碼區域開始，用三個反引號閉合。
流程圖首行要以flowchart開始，標明是流程圖。
流程圖方向
在flowchart之後加上空格可以傳入引數，可以定義流程圖方向。
| 引數值 | TB | TD | BT | RL | LR |
| 說明 | 從上到下 | 從上到下 | 從下到上 | 從右到左 | 從左到右 |
示例中的flowchart TD就是標識從上到下。
節點
節點：每一行輸入任意字元都會被識別為一個新節點。輸入的字元將被作為節點的ID，同時預設作為節點名稱顯示。預設形狀是矩形。
形狀
除了矩形還有多種形狀可選，在節點後面增加符號對即可。如示例中的NodeB[NodeB]，即是矩形。
整理了一份圖形表：
名稱
形狀符號中輸入字元作為展示的名稱。
預設可以不用引號，但如果需要使用轉義符、或者括號，則需要用引號包裹。
如示例中的最後節點NodeI["中文與#quot;引號#quot;與 空格"]，即是使用了引號轉義符。
連線線
語法結構大致是：節點ID 連線線符號 節點ID（示例中的NodeA <--> NodeB）。
如果一行末尾沒有節點ID，則會找到下一行第一個節點ID連線，也就意味著連線線的語法是可以換行的。
如果節點ID是前文沒有出現過的，會當做一個新的節點處理。所以節點的建立與連線是可以一次性書寫的。
線的定義
連線線由三個字元組成，末尾符號代表端點圖形，第一二個符號代表線的樣式。
繪製雙向箭頭的話，需要在頭部增加一個符號，一共是四個字元。
中間符號可以重複，重複會渲染出更長的連線線。
如示例中NodeA <--> NodeB就是雙箭頭符號，中間代表線段形狀，頭尾代表箭頭形狀。
線的形狀
線條有三種：
箭頭形狀
箭頭形狀也有三種：
雙向箭頭：
多個節點連線
&符號可以讓圖形一次性連線多個節點：
文字註釋
可以在連線線上增加連線線的註釋。註釋有兩種寫法：
寫在末尾：||符號，只需要在連線線符號末尾增加—>|文字|即可展示。
寫在中間：類似—文字—>、-. 文字 .->，等於是重複連線符號，前半部分是定義上一個圖形到文字的連線線樣式，後半部分是定義文字到圖形的連線線樣式。
通常來說寫在末尾會比較方便點。
註釋
%%號為註釋符，會將符號之後到此行結束都視為註釋。
子圖（分組）
以上核心的概念已經講完，基本畫圖足夠用了。但mermaid能支援的還不止這些，像是流程圖中套流程圖、流程圖增加事件、使用CSS定義流程圖樣式等。後兩個編輯器不一定會支援，但子圖還會比較常用的。
子圖實際上就是給圖形分組，增加一個背景色塊，使用subgraph ID、end包裹，中間圖語法與此前一樣。
subgraph ID之後用方括號包裹可以定義顯示名稱。其中元素可以任意連線，用子圖ID可以定義子圖與子圖的連線線。
flowchart TB
c1-->a2
subgraph one [子圖一]
a1-->a2
end
subgraph two [子圖二]
b1-->b2
end
subgraph three [子圖三]
c1-->c2
end
one --> two
總結
至此流程圖的邏輯就講完了，文字看著多，但實際上並不難，本身也是因為流程圖元素比較少而易學。來最後歸納一下。
節點：任意字元都會渲染成一個節點元素。後續跟隨的符號對代表圖形形狀，符號對中間代表圖形展示文字。
連線：使用橫線定義連線，連線頭尾可以用不同符號代表不同形狀。
連線文字：使用||符號或是在連線中間輸入文字。
註釋：使用%%符號。
子圖：使用subgraph ID、end包裹，內部語法一樣。其中元素可以任意連線。