Markdown 使用技巧之利用 Mermaid 进行绘制流程图

前言

  Markdown 的原生语法不支持绘制图形，但通过 Mermaid 扩展，我们可以将一些格式化的文字渲染成我们需要的图形。Mermaid 是一个类似 Markdown 的开源脚步语言，它能够根据输入的语句自动生成合适的图像，方便于 Markdown 文档撰写者通过文本方式生成图形的扩展工具。相比 Visio 它要轻很多，几行文字便可生成一幅完整且美观的流程图。
  Mermaid 中包含多种可以使用的图表定义结构，考虑到实用性和学习成本，仅重点学习几种图形语法，分别是流程图（FlowChart）、时序图（Sequence Diagram）、类图（Class Diagram）、状态图（State Diagram）、用户行程图（User Journey）、甘特图（Gantt）、饼图（Pie Chart）等。推荐的学习方法是随用随学，Mermaid 语法并不难学，根据需要进行学习是比较实用的方法。
  本文将重点介绍如何通过 Mermaid 绘制图，考虑到 Markdown 工具之间的不兼容，有的内容直接从页面复制粘贴到本地不会正常显示，有时还需要自己动手。本节所有实例代码及演示效果均使用 Typora 工具完成。Mermaid 为 Markdown 扩展语法，需要在 Typora 设置中开启对图表的语法支持。其方式为：「设置」->「Markdown」->「Markdown 扩展语法」-> 勾选「图表」，如下图：

Mermaid 官网：https://mermaid.js.org/

Mermaid 在线渲染编辑器：https://mermaid.live/

注意：需要注意的是，由于 Mermaid 本身还在发展，并非所有特性都能被所有 Markdown 编辑器支持。因此，某些效果展示我使用图片进行。

流程图可以用于展示某个过程中各个步骤的顺序和关系，例如软件开发过程中的各个阶段、某个业务流程中的各个环节等等。

一、基础语法

1.1 声明图像类型

  告诉 Mermaid 下列语法是什么图像，可以用 flowchart 或 graph 声明流程图类型。在 Markdown 中添加 Mermaid 图形，需要声明 Mermaid 类型的代码块，关键字graph表示一个流程图的开始，同时需要指定该图的方向。代码如下：

```mermaid
<!-- 此处的内容会被渲染成 mermaid 图形 -->
```

• 至于 flowchart、graph 声明流程图类型的区别，参考 扩展 4.1

1.2 声明排列方向

  声明完流程图图像类型后，还需要告诉 Mermaid 流程图的排列方向。其中：L代表Left左边、R代表Right右边、T代表Top上面、B代表Bottom下面，顺序为左边的字母到右边的字母：

顺序字母	代表意义	顺序字母	代表意义
RL	从右到左	LR	从左到右
TB	自上而下	BT	自下而上
TD	等同于 TB

• 基本的竖向流程图：

  ```mermaid
  graph TD
      开始 --> 结束
  ```
  

  此部分代码将会渲染成如下效果：

• 基本的横向流程图：

  ```mermaid
  graph LR
      开始 --> 结束
  ```
  

  此部分代码将会渲染成如下效果：

• 展示一个复杂的方向流程图

  ```mermaid
      flowchart TB
        subgraph 从左到右
          direction LR
          声明图像类型1 --> 声明排列方向1 --> 声明图像内容1
        end
        subgraph 从右到左
          direction RL
          声明图像类型2 --> 声明排列方向2 --> 声明图像内容2
        end
        subgraph 上下分明
          direction LR
          subgraph 从上到下
            direction TB
            声明图像类型3 --> 声明排列方向3 --> 声明图像内容3
          end
          subgraph 从下到上
            direction BT
            声明图像类型4 --> 声明排列方向4 --> 声明图像内容4
          end
          从上到下 --> 从下到上
        end
        从左到右 --> 从右到左 --> 上下分明
    ```
  

  此部分代码将会渲染成如下效果：

1.3 声明节点

  几何图形节点是流程图中的核心元素，在 Mermaid 语法中，有两种声明节点的方式:

• 直接声明：直接在 连接声明区域声明节点，此时节点名字作为节点内容，节点样式采用默认样式（即 [] 样式）
• 完整声明：使用 节点名字[节点内容] 声明节点，其中的 [] 代表节点样式，可以改变它以改变节点样式

```mermaid
graph LR
    直接声明
    M[完整声明]
```

此部分代码将会渲染成如下效果：

1.4 声明节点形状

  形状可用于区分节点的不同属性，有利于丰富流程图的信息量，同时保持其简洁性。在 Mermaid 中可以使用一些基本符号定义节点的形状，例如：圆角形、跑道形、气缸形、非对称形状、菱形、六角形、平行四边形、梯形。节点形状常用语法以及使用见下表：

节点样式	节点语法	节点样式	节点语法	节点样式	节点语法
默认	(文本)	圆角矩形	(文本)	胶囊	([文本])
子程序	[[文本]]	圆柱	[(文本)]	圆形	((文本))
六边形	{ {文本}}	棱形	{文本}	正四边形	[/文本/]
反四边形	[\文本\]	正梯形	[/文本\]	反梯形	[\文本/]
非对称的矩形	>文本]	双圆	(((文本)))

  在 Mermaid 语法中，不加任何修饰的文字内容会被渲染成几何图形节点。这里需要特意说明下，”双圆“这个形状的节点支持的不算太好，个人建议是实际情况而定是否使用。其渲染结果如下：