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图形。