markdown mermaid流程图

流程图

所有流程图都由节点、几何图像、箭头或线条组成。 mermaid代码定义了这些节点和边的制作和交互方式。可以有不同的箭头类型、多向箭头以及与子图的连接。

节点

flowchart LR

	id

flowchart LR
id

带文字的节点

可以在框中设置与id不同的文本。如果多次这样做，将使用的节点的最后一个文本。另外，如果稍后为节点定义边，则可以省略文本定义。之前定义的将在呈现框时使用。

flowchart LR

	node[id text]

flowchart LR
node[id text]

节点形状

图形	示例	备注
方形	id[方形]
圆角	id(圆角)
圆形	id((圆))
体育场	id([体育场])
圆柱	id[(圆柱)]	可以表示数据库
子程序	id[[子程序]]
不对称	id>不对称]
菱形	id{条件}	可以作为判断
六角形	id{{六角形}}
平行四边形	id[/平行四边形/]
平行四边形	id[\平行四边形\]
梯形	id[/梯形\]
梯形	id[\梯形/]

方形节点

flowchart TB

	A[默认节点]

flowchart TB
A[默认节点]

圆角节点

flowchart TB

	A(圆角节点)

flowchart TB
A(圆角节点)

圆形节点

flowchart LR

A((圆形))

flowchart TB
A((圆形))

体育场节点

flowchart TB

	A([体育场节点])

flowchart TB
A([体育场节点])

圆柱节点

flowchart LR

A[(圆柱形)]

flowchart LR
A[(圆柱形)]

子程序形状节点

flowchart LR

A[[子程序形状]]

flowchart TB
A[[子程序形状]]

不对称形状节点

flowchart LR

A>不对称形状]

flowchart TB
A>不对称形状]

菱形节点

flowchart LR

A{菱形}

flowchart TB
A{菱形}

六角形

flowchart LR

A{{六角形}}

flowchart TB
A{{六角形}}

平行四边行节点

flowchart BT

A[\平行四边形\]

B[/平行四边形/]

flowchart BT
A[\平行四边形\]
B[/平行四边形/]

梯形节点

flowchart LR

A[/梯形\] B[\梯形/]

flowchart LR
A[/梯形\] === B[\梯形/]

子程序形状节点

flowchart LR

A[[子程序形状]]

flowchart TB
A[[子程序形状]]

定义流程图的方向

方向	描述
TB或者TD	从上到下。默认
BT	从下到上
LR	从左到右
RL	从右到左

声明流程图从上到下（TD 或 TB）。

flowchart

	A-->B

flowchart
A-->B

声明了流程图是从左到右(LR)的方向。

flowchart LR

	A-->B

flowchart LR
A-->B

节点连接

分类

节点可以与连接/边连接。可以有不同类型的连接，也可以将文本字符串附加到连接。

分类如下：

flowchart TB
l[连接]-->x[线形]-->P[单线] & C[粗线] & X[虚线]
P-->PD["--"]
C-->CD["=="]
X-->XD["-.-"]
l-->箭头--> jy[有箭头] & jw[无箭头]
jy-->jyD[" "]
jw-->jwD[">"]
l-->注释-->zy(有注释) & zw(无注释)

线性和箭头的分类

根据线形、箭头（还有其他形状，但先默认为箭头，其他形状下面阐述）和注释（描述）的分类，可以有12种形式的连接形式：

表述	说明	使用示例
---	单线无箭头	A(出去游玩)---B[回家]
-->	单线加箭头	A(出去游玩)-->B[回家]
--text--	单线加描述	A(出去游玩)--玩够了--B[回家]
--text-->	单线箭头加描述	A(出去游玩)--玩够了-->B[回家]
===	粗线	A(出去游玩)===B[回家]
==>	粗线加箭头	A(出去游玩)==>B[回家]
== text==	粗线加描述	A(出去游玩)== 玩够了==B[回家]
== text==>	粗线箭头加描述	A(出去游玩)== 玩够了==>B[回家]
-.-	虚线	A(出去游玩) -.-[回家]
-.->	虚线加箭头	A(出去游玩)-.->B[回家]
-.text.-	虚线加描述	A(出去游玩)-.玩够了.-B[回家]
-.text.->	虚线箭头加描述	A(出去游玩)-.玩够了.->B[回家]

连接详细例

单线带箭头的连接

flowchart LR

	A-->B

	c<-->|双向箭头|c1

	A1--->B1

flowchart
A-->B
c<-->|双向箭头|c1
A1--->B1

最少2条线。超过2条连接就会越长。其他连接同样的道理。

粗线带箭头连接

flowchart LR

	A==>B

flowchart LR
A==>B

虚线带箭头连接

flowchart LR

A-.->B

flowchart LR
A-.->B

普通没有箭头的连接

flowchart LR

	A---B

flowchart LR
A---B

粗线没有箭头连接

flowchart LR

	A===B

flowchart LR
A===B

虚线无箭头连接

flowchart LR

A-.-B

flowchart LR
A-.-B

有文字的连接

flowchart LR

	A1-->|hello world|B1

	A11--"hello world<br>另种方式"-->B11

	ca11==>|hello world|ca21

	ca1=="hello world<br>另种方式"==>ca2

	xa-.->|I like the world|xa1

	xa11-."I like the world<br>另种方式".->xa111

flowchart LR

	a1---|"hello world, <br>我喜欢"|b1

	c1===|hello world|c2

	x1-.-|I like the world|x2

flowchart LR
a1---|"hello world, 我喜欢"|b1
c1===|hello world|c2
x1-.-|I like the world|x2

备注，连接的上文字不能是标点符号。所以连接上的文字要精炼。但如果确实需要特殊字符则可以放到英文双引号" "中。

其他箭头形状

flowchart LR

A --o B --x C

flowchart LR
A --o B --x C

flowchart LR

A o--o B x--x C

flowchart LR
A o--o B x--x C

连接长度

流程图中的每个节点最终都会根据其连接到的节点分配到渲染图中的等级，即垂直或水平级别（取决于流程图方向）。默认情况下，连接可以跨越任意数量的等级，但可以通过在连接定义中添加额外的破折号来要求任何连接比其他连接更长。

flowchart TB

	A[开始]-->A1{想去旅游吗}

	A1-->|想|B{有新冠疫情吗}

	B-->|No|可以去

	B-->|Yes|不能去

	A1----->|不想|结束

flowchart TB
A[开始]-->A1{想去旅游吗}
A1-->|想|B{有新冠疫情吗}
B-->|No|可以去 -->E
B-->|Yes|不能去 -->E

A1----->|不想|E[结束]

特殊字符

特殊字符比如,()[]*等等无法被渲染，可以将文本放在英文双引号""内。如下例所示：

flowchart LR

	A["我是特殊字符，比如：<br>[]{}*`:=->"]

flowchart LR
A["我是特殊字符，比如： []{}*`:=->"]

转义字符

flowchart LR

	A["我是特殊字符，比如：#9829;、&quot;"]

flowchart LR
A["我是特殊字符，比如：#9829;、""]

给出的数字是以 10 为基数，因此 # 可以编码为 #35;，#9829表示心形。还支持使用 HTML 字符名称，比如双引号可以用"表示。

子图(subgraph)

flowchart  LR

	subgraph R[需求]

	%%备注表示子图方向的命令不起作用： directive LR

		需求调研 --> 需求分析 --> 需求说明书

	end

	subgraph C[编码和调试]

		需求理解-->编码-->调试

	end

	subgraph D[上线]

		数据库初始化--> 软件部署-->应用启动

	end

	R==>C==>D

flowchart LR
subgraph R[需求]
%%备注表示子图方向的命令不起作用： directive LR
需求调研 --> 需求分析 --> 需求说明书
end

subgraph C[编码和调试]
需求理解-->编码-->调试
end

subgraph D[上线]
数据库初始化--> 软件部署-->应用启动
end

R==>C==>D

注解

如果需要注解则可以使用%%

flowchart RL

	%%从左到右的普通流程图

	A-->B

flowchart RL
%%从左到右的普通流程图
A-->B