mermaid

graph（流程图）

节点名不能与关键字同名
使用引号可以避免一些不必要的麻烦，如避免与关键字同名

关键字graph表示一个流程图的开始，同时需要指定该图的方向
图方向:
– TB，从上到下
– TD，从上到下
– BT，从下到上
– RL，从右到左
– LR，从左到右

T = TOP，B = BOTTOM，L = LEFT，R = RIGHT，D = DOWN

举例：

graph LR
  A-->B
  B-->C
  C-->D
  D-->A

效果：

graph LR
  A-->B
  B-->C
  C-->D
  D-->A

节点

• 默认节点 A
• 文本节点 B[bname]
• 圆角节点 C(cname)
• 圆形节点 D((dname))
• 非对称节点 E>ename]
• 菱形节点 F{fname}

A\~F 是当前节点名字，类似于变量名，画图时便于引用
[b\~f]name是节点中显示的文字，如果省略默认节点的名字和显示的文字一样

举例：

graph TB
A
B[矩形节点]
C(圆角节点)
D((圆形节点))
E>非对称节点]
F{菱形节点}

效果：

graph TB
A
B[矩形节点]
C(圆角节点)
D((圆形节点))
E>非对称节点]
F{菱形节点}

边

节点间的连接线有多种形状，可以在连接线中加入标签：
– 无标签普通箭头：A1–>B1
– 带标签普通箭头：A2–text–>B2
– 无标签普通实线：A3—B3
– 带标签普通实线：A4–text—B4
– 无标签普通虚线：A5-.-B5
– 带标签普通虚线：A6-.text.-B6
– 无标签虚线箭头：A7-.->B7
– 带标签虚线箭头：A8-.text.->B8
– 无标签加粗虚线：A9===B9
– 带标签加粗虚线：A10==text===B10
– 无标签加粗箭头：A11==>B11
– 带标签加粗箭头：A12==text==>B12

举例：

graph TB
  A1-->B1
  A2--text-->B2
  A3---B3
  A4--text---B4
  A5-.-B5
  A6-.text.-B6
  A7-.->B7
  A8-.text.->B8
  A9===B9
  A10==text===B10
  A11==>B11
  A12==text==>B12

效果：

graph TB
  A1-->B1
  A2--text-->B2
  A3---B3
  A4--text---B4
  A5-.-B5
  A6-.text.-B6
  A7-.->B7
  A8-.text.->B8
  A9===B9
  A10==text===B10
  A11==>B11
  A12==text==>B12

subgraph（子图）

graph LR
  subgraph g1
    a1-->b1
  end
  subgraph g2
    a2-->b2
  end
  subgraph g3
    a3-->b3
  end
  a3-->a2

graph LR
  subgraph g1
    a1-->b1
  end
  subgraph g2
    a2-->b2
  end
  subgraph g3
    a3-->b3
  end
  a3-->a2