Mermaid：如何在Markdown文本中添加流程图，附支持github的方法

[DenryDu]

Mermaid：流程图 in Markdown

@[toc]

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 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

Loading

指定流程图方向

写在最前面

	graph [TB|BT|LR|RL|TD]

• 纵向：TB：从上至下；BT：从下至上；TD：从上至下
• 横向：LR：从左至右；RL：从右至左

定义框体

结构：

	id【包围符】【显示文本】【包围符】

示例：

	```mermaid
		graph TD
    	id1[带文本的矩形]
    	id2(带文本的圆角矩形)
    	id3>带文本的不对称的矩形]
    	id4{带文本的菱形}
    	id5((带文本的圆形))
    ```

效果：

graph TD
    id1[带文本的矩形]
    id2(带文本的圆角矩形)
    id3>带文本的不对称的矩形]
    id4{带文本的菱形}
    id5((带文本的圆形))

Loading

框体只要定义一遍，之后只需要通过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
	```

效果：

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

Loading

如何在Github的md文档里支持mermaid？

解决办法：

• 需要插件支持
  Chrome、Firfox、Opera浏览器插件