
基本语法
所有流程图 均由节点,几何形状和连线,箭头或线条组成。mermaid 代码定义了这些节点和边的组成和交互方式。
你还可以选择不同的箭头类型,多方向箭头以及与子图之间的链接。
一个节点(默认)



一个包含文本的节点
也可以在矩形框中设置与 id 不同的文本。如果多次设定文本,节点会使用最后一段文本用于显示。另外,如果稍后为节点定义连线,则可以省略文本定义。渲染矩形框时将使用之前定义的文本。


图
这条语句声明了流程图的方向。
下述代码声明了流程图是从上到下的( 或 )。


下述代码声明了流程图是从左到右的()。


流程图方向
可设置的流程方向有:
TB - 从上到下
TD - 从上到下(和 TB 相同)
BT - 从下到上
RL - 从右到左
LR - 从左到右
节点形状
圆角矩形节点


运动场形状节点


子程序形状节点


圆柱形节点



圆形节点


鱼尾旗形状节点

目前只有向右的鱼尾旗形状可用
菱形节点

六边形节点

平行四边形节点


梯形节点(下宽上窄、上宽下窄)


节点之间的连接
节点可以用连线进行连接。可以用不同类型的边线连接节点或文字附加在连线上。
带箭头的连接

开放式连接

带文字的连接

或者

带文字和箭头的连接

或者

虚线连接

带文字的虚线连接

加粗的连接

带文字的加粗链接

一串连接
可以在一行中声明多个连接:

也可以在同一行中声明多个节点连接:

可以以非常简洁的方式描述依赖关系,如下所示一行代码:

同样的图形,如果使用基本语法,需要四行代码。但也请注意,这可能会使流程图难以以 Markdown 形式阅读。我想到了瑞典语单词 ,意思是:不要太多也不要太少。
下面的代码和上面的一行代码等价:

新的箭头类型

多方向箭头

连接线的最小长度
流程图中的每个节点最终被分配到所呈现的图形中的一个级别,即被分配到垂直或水平级别 (取决于流程图的方向),基于它所连接的节点。默认情况下,连接可以跨越任意数量的级别,但是您可以通过在连接定义中添加额外的破折号来指定一个连接比其他连接更长。
在下面的示例中,从节点 B 到节点 E 的连接中添加了两个额外的破折号,因此它比常规连接跨越了多两个级别:



当连接标签写在连接的中间时,必须在连接的右侧添加额外的破折号。下面的例子和上述等价:


对于虚线或加粗的连接线,使用的字符看上去是同样的形状,如下表所示:

中断语法的特殊字符
可以将文本放在引号中,以渲染会引起歧义的文字。如下例所示:

转义字符的实体代码
可以使用下述示例的语法转义字符:

数字为十进制,因此 # 符号可以编码为 。此外,也支持使用 HTML 字符名称。