2. Mermaid 教程 — 流程图

所有的流程图都由节点、几何形状及其轮廓、箭头或者线条组成。

mermaid 定义流程图的代码类似于：

下面是这个例子的效果：

你可以将 flowchart 作为流程图的关键字（对于其他图表，也是如此，我们不再赘述）, LR 则指明了流程图的定位或者说是走向。mermaid 提供了几种走向选择，分别是：TB/TD(top to bottom / top to down)、BT(bottom to top)、RL(right to left)、LR(left to right)。--> 简单地将 id1 与 id2 两个节点用箭头连接了起来。

2.1 节点

在上面的一个例子中，id1 即声明了一个默认节点(node)： id1 为节点的文本/id，节点形状是默认的方形。同理，id2 也是如此。

2.1.1 节点 id 与文本

通过 node[text] 的格式，可以在创建节点时同时为其添加节点 id 与 节点文本(text)。需要说明的是，在同时添加节点 id 与文本后，连接指定节点应该使用节点的 id 连接。例如，下面的代码我们声明了三个同时有 id 与文本的节点，并将其中两个节点连接至同一节点。

其中可以看到第三行的节点 3 我们是直接使用 id l连接的。图表效果如下：

可以试一下将第三行的 id3 改为第一行的 id3 对应的文本，看看会发生什么。

2.1.2 节点形状

mermaid 提供了一些方法以修改节点形状，注意：在下面的部分中，我们将同时声明节点 id 与节点文本以阐明此节。

除了一个特殊形状外，节点形状通常由两个或者四个符号来控制（简记为 C1、C2、C3、C4，后文同），格式形如：

前文提到的 node[text] 则是两个符号的版本，可见，四个符号是可以部分省略的。需要注意的是，内容两侧控制形状的符号数量一定是相等的，即内容两侧有一个或者两个符号。

而符号如何控制节点形状的情况我把它们分成了三种情况。

2.1.2.1 类型 1

这类形状只由两个符号控制，且其上下两条边是不变的，只修改了侧边。符号涉及到 []、()、{}、>  。

从我的理解来看，[] 让侧边竖直，() 让侧边变为同样的圆弧状，{} 则让两边变为形如 <> 的形状，> 同样地让一边变为 > 的形状。

所以，如果把所有情况列出的话是这样：

效果如下：

注意：只使用 []、()、{} 只在和 > 搭配使用可以单独使用其中一个符号，且只可用于右侧。例如上文节点 4。

2.1.2.2 类型 2

在上一个类型中提到了对几个符号的理解，现在，让我们复合使用。

效果如下：

结合类型 1 中提到的理解来看，外层的符号同样是改变侧边形状的，而内层符号改变上下形状，值得注意的就只剩节点 1 和节点 5 了。

2.1.2.3 类型 3

这组类型由默认形状派生而来，但它需要四个符号控制。首先它的形状同默认一样是一个四边形，其次它的上下两条边同类型 1 一致都是平行的水平线。格式形如：

其中 C2、C3 为字符 /、\ 的组合。[] 决定了节点的上下两条边始终水平，而/\ 则控制本为垂直的侧边的倾斜方向。例如：

效果如下：

2.1.2.4 特殊情况

唯一一个使用六个符号的形状如下：

官方文档上的演示效果是这样的：

2.2 箭头及线条

箭头和线条的类型归纳如下：

2.2.1 插入文本

在箭头/线条内部可以插入文本。插入文本有两种方式，一种是直接在箭头的对应代码中间插入，另一种则是在箭头尾部添加代码，比较常用的是后面一种。

%% 为注释符号。下面是插入效果：

第一种方式有局限性，比如某些箭头不支持在内部插入，且在代码处不容易辨别，第二种插入方式则方便许多。

2.3 子图表

子图表也许称为子区域更为合适，使用以下格式定义一块区域：

看下面一个例子：

它的效果如下：

在这个例子中，没有子元素的连接，s1 与 s2 两块区域按照定义的 LR 方向连接。

我们可以使用 direction 定义子区域中的子元素的排列方向，例如：

效果如下：

direction 的参数与 flowchart 一致。注意，direction 作用处和它所处的代码位置有关。在上面的例子中，因为要改变 s1、s2 的方向，所以 direction 分别写在两个区域代码内部的（即使我们想让它们的方向相同）。

和节点一样，你也可以为子区域附上 id，然后使用 id 连接各区域。例如，下面的代码为区域 graph1 附上了 id，id 名为 id1。

有趣的是，subgraph 支持嵌套，及在一个子区域中继续划分区域，例如下面的代码实现了一个“同心矩形”。

效果如下：

2.4 其他

1. mermaid 使用 %% 进行注释，格式如下：

但在我的环境中，`mermaid 8.8.3` 里单独使用注释是会报错的。

2. mermaid 支持 fontawesome 图标。例如：

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