Mermaid:流程图 in Markdown
文章目录
Background
我们在写博客或者写项目的README文档的时候,往往都需要画流程图,有的时候用在线编辑器,有的时候用draw.io,有的时候用Visio
但是这些可视化工具再给我们带来直观性的同时,也增加了操作的难度,需要精细地调整组件的大小和样式,
更多的时候,我们不是为了写一份漂亮的报告而画流程图,只是需要便捷地向他人分享自己的idea,在这样的需求下,代码生成流程图显然更适合。
Introduction
Mermaid是什么?
Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库,使用 JS 进行本地渲染,广泛集成于许多 Markdown 编辑器中。
之前用过 PlantUML,但是发现这个东西的实现原理是生成 UML 的图片后上传服务端,每次再从服务端读取,因此觉得不够鲁棒,隐私性也不好,因而弃用。
为什么是Mermaid?
Mermaid 作为一个使用 JS 渲染的库,生成的不是一个“图片”,而是一段 HTML 代码,因此安全许多。
Usage
Mermaid代码如何撰写
基本格式
```mermaid
graph 流程图方向[TB|LR|RL|BT]
流程图内容
```
例子在前
```mermaid
graph LR
start[开始] --> input[输入A,B,C]
input --> conditionA{A是否大于B}
conditionA -- YES --> conditionC{A是否大于C}
conditionA -- NO --> conditionB{B是否大于C}
conditionC -- YES --> printA[输出A]
conditionC -- NO --> printC[输出C]
conditionB -- YES --> printB[输出B]
conditionB -- NO --> printC[输出C]
printA --> stop[结束]
printC --> stop
printB --> stop
```
指定流程图方向
写在最前面
graph [TB|BT|LR|RL|TD]
- 纵向:TB:从上至下;BT:从下至上;TD:从上至下
- 横向:LR:从左至右;RL:从右至左
定义框体
结构:
id【包围符】【显示文本】【包围符】
示例:
```mermaid
graph TD
id1[带文本的矩形]
id2(带文本的圆角矩形)
id3>带文本的不对称的矩形]
id4{带文本的菱形}
id5((带文本的圆形))
```
效果:
框体只要定义一遍,之后只需要通过id来指定就行了
定义连接线和子图
连接线结构:
id1【连接【文本】符】id2
子图结构:
subgraph 子图名
子图内容
end
连接线格式例子(用子图分组):
```mermaid
graph TB
subgraph 实线
A0[A] --- B0[B]
A1[A] --> B1[B]
A2[A] -- 描述 --> B2[B]
end
subgraph 虚线
A3[A] -.- B3[B]
A4[A] -.-> B4[B]
A5[A] -. 描述 .-> B5[B]
end
subgraph 加粗线
A6[A] === B6[B]
A7[A] ==> B7[B]
A8[A] == 描述 ==> B8[B]
end
```
效果:
如何在Github的md文档里支持mermaid?
解决办法:
- 需要插件支持
Chrome、Firfox、Opera浏览器插件