所有的流程圖都由節(jié)點(diǎn)、幾何形狀及其輪廓、箭頭或者線條組成。

mermaid 定義流程圖的代碼類似于：

下面是這個(gè)例子的效果：

你可以將 flowchart 作為流程圖的關(guān)鍵字（對于其他圖表，也是如此，我們不再贅述）, LR 則指明了流程圖的定位或者說是走向。mermaid 提供了幾種走向選擇，分別是：TB/TD(top to bottom / top to down)、BT(bottom to top)、RL(right to left)、LR(left to right)。--> 簡單地將 id1 與 id2 兩個(gè)節(jié)點(diǎn)用箭頭連接了起來。

2.1 節(jié)點(diǎn)

在上面的一個(gè)例子中，id1 即聲明了一個(gè)默認(rèn)節(jié)點(diǎn)(node)： id1 為節(jié)點(diǎn)的文本/id，節(jié)點(diǎn)形狀是默認(rèn)的方形。同理，id2 也是如此。

2.1.1 節(jié)點(diǎn) id 與文本

通過 node[text] 的格式，可以在創(chuàng)建節(jié)點(diǎn)時(shí)同時(shí)為其添加節(jié)點(diǎn) id 與 節(jié)點(diǎn)文本(text)。需要說明的是，在同時(shí)添加節(jié)點(diǎn) id 與文本后，連接指定節(jié)點(diǎn)應(yīng)該使用節(jié)點(diǎn)的 id 連接。例如，下面的代碼我們聲明了三個(gè)同時(shí)有 id 與文本的節(jié)點(diǎn)，并將其中兩個(gè)節(jié)點(diǎn)連接至同一節(jié)點(diǎn)。

其中可以看到第三行的節(jié)點(diǎn) 3 我們是直接使用 id l連接的。圖表效果如下：

可以試一下將第三行的 id3 改為第一行的 id3 對應(yīng)的文本，看看會發(fā)生什么。

2.1.2 節(jié)點(diǎn)形狀

mermaid 提供了一些方法以修改節(jié)點(diǎn)形狀，注意：在下面的部分中，我們將同時(shí)聲明節(jié)點(diǎn) id 與節(jié)點(diǎn)文本以闡明此節(jié)。

除了一個(gè)特殊形狀外，節(jié)點(diǎn)形狀通常由兩個(gè)或者四個(gè)符號來控制（簡記為 C1、C2、C3、C4，后文同），格式形如：

前文提到的 node[text] 則是兩個(gè)符號的版本，可見，四個(gè)符號是可以部分省略的。需要注意的是，內(nèi)容兩側(cè)控制形狀的符號數(shù)量一定是相等的，即內(nèi)容兩側(cè)有一個(gè)或者兩個(gè)符號。

而符號如何控制節(jié)點(diǎn)形狀的情況我把它們分成了三種情況。

2.1.2.1 類型 1

這類形狀只由兩個(gè)符號控制，且其上下兩條邊是不變的，只修改了側(cè)邊。符號涉及到 []、()、{}、> ?。

從我的理解來看，[] 讓側(cè)邊豎直，() 讓側(cè)邊變?yōu)橥瑯拥膱A弧狀，{} 則讓兩邊變?yōu)樾稳?<> 的形狀，> 同樣地讓一邊變?yōu)?> 的形狀。

所以，如果把所有情況列出的話是這樣：

效果如下：

注意：只使用 []、()、{} 只在和 > 搭配使用可以單獨(dú)使用其中一個(gè)符號，且只可用于右側(cè)。例如上文節(jié)點(diǎn) 4。

2.1.2.2 類型 2

在上一個(gè)類型中提到了對幾個(gè)符號的理解，現(xiàn)在，讓我們復(fù)合使用。

效果如下：

結(jié)合類型 1 中提到的理解來看，外層的符號同樣是改變側(cè)邊形狀的，而內(nèi)層符號改變上下形狀，值得注意的就只剩節(jié)點(diǎn) 1 和節(jié)點(diǎn) 5 了。

2.1.2.3 類型 3

這組類型由默認(rèn)形狀派生而來，但它需要四個(gè)符號控制。首先它的形狀同默認(rèn)一樣是一個(gè)四邊形，其次它的上下兩條邊同類型 1 一致都是平行的水平線。格式形如：

其中 C2、C3 為字符 /、\ 的組合。[] 決定了節(jié)點(diǎn)的上下兩條邊始終水平，而/\ 則控制本為垂直的側(cè)邊的傾斜方向。例如：

效果如下：

2.1.2.4 特殊情況

唯一一個(gè)使用六個(gè)符號的形狀如下：

官方文檔上的演示效果是這樣的：

2.2 箭頭及線條

箭頭和線條的類型歸納如下：

2.2.1 插入文本

在箭頭/線條內(nèi)部可以插入文本。插入文本有兩種方式，一種是直接在箭頭的對應(yīng)代碼中間插入，另一種則是在箭頭尾部添加代碼，比較常用的是后面一種。

%% 為注釋符號。下面是插入效果：

第一種方式有局限性，比如某些箭頭不支持在內(nèi)部插入，且在代碼處不容易辨別，第二種插入方式則方便許多。

2.3 子圖表

子圖表也許稱為子區(qū)域更為合適，使用以下格式定義一塊區(qū)域：

看下面一個(gè)例子：

它的效果如下：

在這個(gè)例子中，沒有子元素的連接，s1 與 s2 兩塊區(qū)域按照定義的 LR 方向連接。

我們可以使用 direction 定義子區(qū)域中的子元素的排列方向，例如：

效果如下：

direction 的參數(shù)與 flowchart 一致。注意，direction 作用處和它所處的代碼位置有關(guān)。在上面的例子中，因?yàn)橐淖?s1、s2 的方向，所以 direction 分別寫在兩個(gè)區(qū)域代碼內(nèi)部的（即使我們想讓它們的方向相同）。

和節(jié)點(diǎn)一樣，你也可以為子區(qū)域附上 id，然后使用 id 連接各區(qū)域。例如，下面的代碼為區(qū)域 graph1 附上了 id，id 名為 id1。

有趣的是，subgraph 支持嵌套，及在一個(gè)子區(qū)域中繼續(xù)劃分區(qū)域，例如下面的代碼實(shí)現(xiàn)了一個(gè)“同心矩形”。

效果如下：

2.4 其他

1. mermaid 使用 %% 進(jìn)行注釋，格式如下：

但在我的環(huán)境中，`mermaid 8.8.3` 里單獨(dú)使用注釋是會報(bào)錯(cuò)的。

2.?mermaid 支持 fontawesome 圖標(biāo)。例如：

但很遺憾，我所使用的 Typora 版本為 0.11 beta 版，mermaid 只支持到了 8.8.3 版本，似乎不支持此功能，故不做效果截圖。