Mermaid 流程图语法

介绍
Mermaid 流程图是由节点(几何形状)和边(箭头或线条)组成。 Mermaid 代码定义了节点和边的创建方式,并支持不同类型的箭头、多方向箭头以及对子图的任意连接。
定义节点
类型 代码 图表 语法
节点
flowchart LR
  apple
只需输入节点名称。
带文本的节点
flowchart LR
  node["This is text"]
将文本放在括号中,使用双引号将文本括起来。
带 markdown 的节点
flowchart LR
  node["`This **is**
_Markdown_`"]
将 markdown 放在括号中,使用双引号和反引号将文本括起来。
节点形状
类型 代码 图表 语法
具有圆边的节点
flowchart LR
  node(Content)
Put text in (...)
体育场形状的节点
flowchart LR
  node([Content])
Put text in ([...])
子程序形状的节点
flowchart LR
  node[[Content]]
Put text in [[...]]
圆柱形的节点
flowchart LR
  node[(Content)]
Put text in [(...)]
圆形的节点
flowchart LR
  node((Content))
Put text in ((...))
不对称形状的节点
flowchart LR
  node>Content]
Put text in >...]
菱形节点
flowchart LR
  node{Content}
Put text in {...}
六边形节点
flowchart LR
  node{{Content}}
Put text in {{...}}
平行四边形 A
flowchart LR
  node[/Content/]
Put text in [/.../]
平行四边形 B
flowchart LR
  node[\Content\]
Put text in [\...\]
梯形 A
flowchart LR
  node[/Content\]
Put text in [/...\]
梯形 B
flowchart LR
  node[\Content/]
Put text in [\.../]
双圆
flowchart LR
  node(((Content)))
Put text in (((...)))
节点之间的连接
线条长度
长度 1 2 3
普通 --- ---- -----
普通带箭头 --> ---> ---->
粗线 === ==== =====
粗线带箭头 ==> ===> ====>
虚线 -.- -..- -...-
虚线带箭头 -.-> -..-> -...->
高级用法
高级用法包括子图、交互、样式和类等等,请查看 Mermaid.js 官方网站。