mermaid流程图工具_Mermaid用于画流程图 | 学步园

Mermaid是一个用于画流程图、状态图、时序图、甘特图的库，使用JS进行本地渲染，这是一个类似markdown语法的脚本语言，通过JavaScript实现图表的生成。Mermaid作为一个使用JS渲染的库，生成的不是一个“图片”，而是一段HTML代码，因此安全许多。

Mermaid流程图图表方向

Mermaid支持多种图表的方向，语法如下：

graph方向描述

图表中的其他语句...

1

2

其中“方向描述”为

用词 含义

TB 从上到下

BT 从下到上

RL 从右到左

LR 从左到右

节点定义

即流程图中每个文本块，包括开始、结束、处理、判断等。Mermaid中每个节点都有一个id，以及节点的文字。

表述 说明

id[文字] 矩形节点

id(文字) 圆角矩形节点

id((文字)) 圆形节点

id>文字] 右向旗帜状节点

id{文字} 菱形节点

需要注意的是，如果节点的文字中包含标点符号，需要时用双引号包裹起来。

另外如果希望在文字中使用换行，请使用

替换换行

节点间的连线

表述 说明

> 添加尾部箭头

- 不添加尾部箭头

-- 单线

--text-- 单线上加文字

== 粗线

==text== 粗线加文字

-.- 虚线

-.text.- 虚线加文字

子图表

使用以下语法添加子图表

subgraph子图表名称

子图表中的描述语句...

end

1

2

3

对fontawesome的支持

使用fa:#图表名称#的语法添加fontawesome。

Mermaid举个例子

graphTB

id1(圆角矩形)--普通线-->id2[矩形]

subgraph子图表

id2==粗线==>id3{菱形}

id3-.虚线.->id4>右向旗帜]

id3--无箭头---id5((圆形))

end

1

2

3

4

5

6

7

序列图

使用以下语法开始序列图

sequenceDiagram

[参与者1][消息线][参与者2]:消息体

...

1

2

3

例如

sequenceDiagram

张三->>李四:吃了吗？

李四->>张三:吃了

1

2

3

参与者

上例中的张三、李四都是参与者，上例中的语法是最简单的，也可以明显表明参与者有哪些

总之，mermaid使用的是d3.js绘制的SVG图形。