使用Markdown绘制流程图(Mermaid))

本篇文章讲诉使用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

示例