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

在这里插入图片描述

文章目录

前言
一、基础语法
- 1.1 声明图像类型
- 1.2 声明排列方向
- 1.3 声明节点
- 1.4 声明节点形状
- 1.5 声明节点间的连接
- - 1.5.1 基本连接线
  - 1.5.2 调整链接的长度
  - 1.5.3 调整链接的样式
二、流程图-进阶使用
- 2.1 自定义节点样式
- 2.2 自定义形状大小
- 2.3 自定义链接样式
- 2.4 视图分组
三、使用场景及实例
- 3.1 竖向流程图
- 3.2 冒泡排序流程图
- 3.3 横向流程图
四、扩展
- 4.1 flowchart VS graph
- 4.2 字符转义
五、结语

前言

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开始 --> 结束
```
```
此部分代码将会渲染成如下效果：
展示一个复杂的方向流程图
```
```mermaidflowchart TBsubgraph 从左到右direction LR声明图像类型1 --> 声明排列方向1 --> 声明图像内容1endsubgraph 从右到左direction RL声明图像类型2 --> 声明排列方向2 --> 声明图像内容2endsubgraph 上下分明direction LRsubgraph 从上到下direction TB声明图像类型3 --> 声明排列方向3 --> 声明图像内容3endsubgraph 从下到上direction BT声明图像类型4 --> 声明排列方向4 --> 声明图像内容4end从上到下 --> 从下到上end从左到右 --> 从右到左 --> 上下分明```
```
此部分代码将会渲染成如下效果：

1.3 声明节点

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

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

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

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

1.4 声明节点形状

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

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