Mermaid是一个用于画流程图、状态图、时序图、甘特图的库，使用JS进行本地渲染，广泛集成于许多Markdown编辑器中。
之前用过PlantUML，但是发现这个东西的实现原理是生成UML的图片后上传服务端，每次再从服务端读取，因此觉得不够鲁棒，隐私性也不好，因而弃用。
Mermaid作为一个使用JS渲染的库，生成的不是一个“图片”，而是一段HTML代码，因此安全许多。
接下来介绍Mermaid的流程图及序列图的语法，也就是大家在工作中常使用的图表。
Mermaid支持多种图表的方向，语法如下：
graph方向描述图表中的其他语句...其中“方向描述”为
即流程图中每个文本块，包括开始、结束、处理、判断等。Mermaid中每个节点都有一个id，以及节点的文字。
需要注意的是，如果节点的文字中包含标点符号，需要时用双引号包裹起来。另外如果希望在文字中使用换行，请使用替换换行
使用以下语法添加子图表
subgraph子图表名称子图表中的描述语句...end对fontawesome的支持使用fa:#图表名称#的语法添加fontawesome。
举个例子
graphTBid1(圆角矩形)--普通线-->id2[矩形]subgraph子图表id2==粗线==>id3{菱形}id3-.虚线.->id4>右向旗帜]id3--无箭头---id5((圆形))end序列图使用以下语法开始序列图
sequenceDiagram[参与者1][消息线][参与者2]:消息体...例如
sequenceDiagram张三->>李四:吃了吗？李四->>张三:吃了参与者上例中的张三、李四都是参与者，上例中的语法是最简单的，也可以明显表明参与者有哪些
sequenceDiagramparticipant参与者1participant参与者2...participant简称as参与者3#该语法可以在接下来的描述中使用简称来代替参与者3消息线|类型|描述||->|无箭头的实线||-->|无箭头的虚线||->>|有箭头的实线||-->>|有箭头的虚线||-x|末端为叉的实线（表示异步）||--x|末端为叉的虚线（表示异步）|
在消息线末尾增加+，则消息接收者进入当前消息的“处理中”状态；在消息线末尾增加-，则消息接收者离开当前消息的“处理中”状态。
或者使用以下语法直接说明某个参与者进入“处理中”状态
activate参与者标注语法如下
Note位置表述参与者:标注文字其中位置表述可以为
语法如下
loop循环的条件循环体描述语句end判断alt条件1描述分支1描述语句else条件2描述#else分支可选分支2描述语句else......end