Mermaid

流程图 graph的基本用法

基础

  1. graph图开头要以graph TD从上到下或graph LR从左到右graph RL从右到左开头,代表画图的顺序
  2. 带方向的链接需要最少两个-和一个>-的数量代表连线的长度,如A -----> B
  3. 带方向的链接需要最少三个个--的数量代表连线的长度,如A ----- B
  • 图的方向支持一下几种方式:
1
2
3
4
5
6
7
graph LR

TB - 从上到下(top buttom)
BT - 从下到上(buttom top)
LR - 从左到右(left right)
RL - 从右到左(right left)
TD - 跟 TB 相同
  • 三种线类型
1
2
3
--- : 实现
-.- : 虚线
=== : 粗线
  • 虚线带箭头的话加 > ,实线和粗线则最后一个字符替换成 >
  • 注释的两种写法(中间加注释,后边加注释)
1
2
-- 中间加注释写法 -->
-->|后边加注释写法|
  • 文本框类型
1
2
3
4
[] - 方形文本框
{} - 菱形文本框
() - 边角圆滑文本框
(()) - 圆形文本框
  • 子图
1
2
3
subgraph 子图标题
子图开始 --> 子图结束
end

子图

1
2
3
4
graph BT
subgraph 子图标题
子图开始 --> 子图结束
end
graph TD subgraph 子图标题 子图开始 --> 子图结束 end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
graph LR
单独节点
开始 -- 带注释写法1 --> 结束
开始 -->|带注释写法2| 结束
实线开始 --- 实线结束
实线开始 --> 实线结束
实线开始 -->|带注释| 实线结束
虚线开始 -.- 虚线结束
虚线开始 -.-> 虚线结束
虚线开始 -.->|带注释| 虚线结束
粗线开始 === 粗线结束
粗线开始 ==> 粗线结束
粗线开始 ==>|带注释| 粗线结束
subgraph 子图标题
子图开始 --> 子图结束
end
节点1[方形文本框] --> 节点2{菱形文本框}
节点3(括号文本框) --> 节点4((圆形文本框))
graph LR 单独节点 开始 -- 带注释写法1 --> 结束 开始 -->|带注释写法2| 结束 实线开始 --- 实线结束 实线开始 --> 实线结束 实线开始 -->|带注释| 实线结束 虚线开始 -.- 虚线结束 虚线开始 -.-> 虚线结束 虚线开始 -.->|带注释| 虚线结束 粗线开始 === 粗线结束 粗线开始 ==> 粗线结束 粗线开始 ==>|带注释| 粗线结束 subgraph 子图标题 子图开始 --> 子图结束 end 节点1[方形文本框] --> 节点2{菱形文本框} 节点3(括号文本框) --> 节点4((圆形文本框))