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((圆形文本框))

英文单词缩写

四种布局方向的值是英文单词首字母大写缩写形式,默认仅支持垂直方向.

中文 英文 示例
图解 graph graph 流程图类型标识
子图 subgraph subgraph 嵌套子流程图标识
上 top TB 或 BT ,从上到下或从下到上的布局方向
下 bottom BT 或 TB,从下到上或从上到下的布局方向
左 left LR 或 RL,从左往右或从右往左的布局方向
右 right RL 或 LR,从右往左或从左往右的布局方向

几何化形状

键盘符号形象化几何形状,组合形式表示形状的叠加,其中最外层符号是主形状,嵌套符号是辅助形状.

  • 基本单元
表示法 含义 类型 备注
[] 矩形 节点形状 支持
() 圆角矩形 节点形状 支持
{} 菱形 节点形状 支持
<> 菱形 节点形状 不支持
-- 实线 连接线样式 支持
-. 虚线 连接线样式 支持
== 加粗实线 连接线样式 支持
=: 加粗虚线 连接线样式 不支持
> 有箭头 连接线样式 支持
- 无箭头 连接线样式 支持
双竖线 右边连接线描述文字 连接线描述文字 支持
-- 左边实线连接线描述文字 连接线描述文字 支持
-. 左边虚线连接线描述文字 连接线描述文字 支持
== 左边加粗实线连接线描述文字 连接线描述文字 支持
=: 左边加粗虚线连接线描述文字 连接线描述文字 不支持
  • 组合单元
表示法 含义 类型 备注
[[]] 正方形 节点形状 不支持
[()] 圆柱体 节点形状 支持
[{}] 棱柱体 节点形状 不支持
(()) 圆形 节点形状 支持
([]) 体育场 节点形状 支持
({}) 圆弧 节点形状 不支持
双大括号 六边形 节点形状 支持
{[]} 正多边形 节点形状 不支持
{()} 圆弧 节点形状 不支持
--> 实线带箭头 连接线样式 支持
--- 实线无箭头 连接线样式 支持
-.> 虚线带箭头 连接线样式 不支持
-.-> 虚线带箭头 连接线样式 支持
.-> 虚线带箭头 连接线样式 支持
-.- 虚线无箭头 连接线样式 支持
.- 虚线无箭头 连接线样式 支持
==> 加粗实线带箭头 连接线样式 支持
=== 加粗实线无箭头 连接线样式 支持
=:> 加粗虚线带箭头 连接线样式 不支持
=:=> 加粗虚线带箭头 连接线样式 不支持
=:= 加粗虚线无箭头 连接线样式 不支持
:= 加粗虚线无箭头 连接线样式 不支持
双竖线 右边连接线描述文字 连接线描述文字 支持
--connection line description--> 左边实线带箭头连接线描述文字 连接线描述文字 支持
-.connection line description-.-> 左边虚线带箭头连接线描述文字 连接线描述文字 支持
--connection line description--- 左边实线无箭头连接线描述文字 连接线描述文字 支持
-.connection line description-.- 左边虚线无箭头连接线描述文字 连接线描述文字 支持
==connection line description==> 左边加粗实线带箭头连接线描述文字 连接线描述文字 支持
=:connection line description=:=> 左边加粗虚线带箭头连接线描述文字 连接线描述文字 不支持
==connection line description=== 左边加粗实线无箭头连接线描述文字 连接线描述文字 支持
=:connection line description=:= 左边加粗虚线无箭头连接线描述文字 连接线描述文字 不支持