Markdown绘图:Graph流程图

发布于 2020-04-12  287 热度


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

我一直在开辟我的天空