本篇文章讲诉使用Mermaid引擎绘制流程图,更多详情见官网:Mermaid绘制流程图
语法
所有流程图都由节点,几何形状和边缘,箭头或线条组成,Mermaid
主要定义了节点
和边缘
的绘制和交互方式
节点
节点有节点id和节点内容组成
格式: id[context]
代码
flowchart LR
id
示例
流程图方向
流程图的方向有下面几种:
关键字 | 描述 |
---|---|
TB | 从上到下 |
TD | 自上而下 |
BT | 从下到上 |
RL | 从右到左 |
LR | 从左到右 |
形状
mermaid
提供了12种形状,如下所示:
关键字 | 描述 |
---|---|
(内容) | 圆边形状 |
([内容]) | 体育场形状 |
[[内容]] | 子例程形状 |
[(内容)] | 圆柱形形状 |
((内容)) | 圆形形状 |
>内容] | 不对称形状 |
{内容} | 菱形 |
{{内容}} | 六边形 |
[/内容/] | 平行四边形1 |
[\内容\] | 平行四边形2 |
[/内容\] | 梯形1 |
[\内容/] | 梯形2 |
代码
flowchart TB
a(圆边)
b([体育场形状])
c[[子例程]]
d[(圆柱形)]
e((圆形))
f>不对称形状]
g{菱形}
h{{六边形}}
i[/平行四边形/]
j[\平行四边形\]
k[/梯形\]
l[\梯形/]
示例
连接线
关键字 | 描述 |
---|---|
–> | 带箭头的连接线 |
— | 不带箭头的连接线 |
–Text— | 连接线上文字 |
—|Text| | 连接线上的文字 |
–Text–> | 连接线上文字,带箭头 |
–>|Text| | 连接线上的文字,带箭头 |
-.- | 连接线虚线 |
-.-> | 连接线虚线,带箭头 |
==> | 连接线粗线 |
代码
flowchart LR
A-->B
A-.->B
A==>B
A---C
A-.-C
A===C
A-- 这是文字! ---D
A---|这是文字!|D
A--- 这个是文字 -->F
A-->|这个是文字|F
示例