• markdown小技巧：mermaid绘图工具介绍
  • 0. 引言
  • 1. 流程图绘制方法
    • 1. 画布定义
    • 2. 节点定义
    • 3. 连线定义
    • 4. 子图定义
  • 2. 时序图绘制方法
    • 1. 基础用法说明
    • 2. 画布以及参与参与元素定义
    • 3. 时序图的连线定义
    • 4. 注释的定义方式
    • 5. 子图的定义方式
  • 3. gantt图绘制方法
    • 1. gantt图定义
    • 2. section定义
  • 4. 参考链接

0. 引言

最近在梳理之前工作的项目，于是就不可避免地需要绘制流程图，然后就又双叒叕发现自己又给忘了怎么用markdown来绘制流程图了……

so，干脆这次就抽点时间整理一下markdown中的绘图方法吧，毕竟这次还算运气好，多少还记得绘图用的是mermaid，哪天要是一直不用连mermaid都忘了，那真的是要查都不知道如何下手了……

需要注意的是，我其实主要也就用一下流程图，因此这里其实也就是基于下述参考链接1中的博客进行一下整理，作为入门其实也就差不多了，但是后来发现mermaid语法其实非常的强大，远不止这篇文章中提到的这些内容，除了文中提到的流程图、时序图、gantt图等，还包括了饼状图等大量的图表绘制功能，有兴趣的读者还是建议直接阅读参考链接3中的官方教程进行学习。

1. 流程图绘制方法

首先，我们来看一下如何使用mermaid来绘制一个流程图。

这部分内容其实可以抽象为如下过程：

1. 定义一张画布；
2. 定义流程图中的节点；
3. 定义节点之间的连线关系；

当然，其中2和3往往可以一起做，我们给出一个简单的样例如下：

下面，我们来分别考察一下画布定义，节点定义以及连线关系的语法。

1. 画布定义

画布的定义语法如下：

其中，graph LR即为画布的定义命令。

其中，不同方向画布的定义如下表所示：

	方向
Graph LR	从左到右
Graph RL	从右到左
Graph TB	从上到下
Graph BT	从下到上
Graph TD	从上到下

2. 节点定义

然后，我们来考察一下流程图中的节点定义方法。

单纯创建一个节点其实比较简单，只要给出节点命名就行了，比如：

不过这种定义方式节点命名和节点内容展示必须是一致的，且不允许空格存在，使用起来比较不方便。

更加合理的方式是如下：

这样，我们就可以用区分节点命名和内容展示了。

而关于节点的形状，我们则可以根据下述表格进行自行替换。

	形状
[]	方形
{}	菱形
()	圆角方形
(())	圆形

3. 连线定义

而有关连线的定义，mermaid语法中给出了3种连线的定义，具体详见下述表格：

线段类型	表示
–>	一般实线
-.->	虚线
==>	加粗实线

4. 子图定义

最后，mermaid还支持子图的定义。

不过mermaid的子图定义比较简陋，他事实上就是开设一个单独的模块，将一些节点放置到这个设置的模块内。

因此：

1. 子图的定义是与节点绑定的；
2. 同一个节点只能出现在一张子图当中；

其基础的用法如下：

2. 时序图绘制方法

时序图是mermaid提供的第二类图表绘制类型。

其整体的架构和流程图没有太大的差异，主要就是：

1. 画布定义有所区别；
2. 点线定义有所区别；
3. 注释定义有所区别；
4. 子图定义有所区别；

下面，我们来具体考察一下其相关的内容。

1. 基础用法说明

首先，我们来看如何来绘制一张最为基础的时序图。

直接给出一个样例如下：

可以看到，时序图的基本用法可以包括：

1. 定义画布
2. 定义参与元素
3. 按照时序给出交互作业

2. 画布以及参与参与元素定义

时序图的画布定义方式其实没啥好多说的，使用关键词sequenceDiagram即可。

而有关时序图中的元素定义，则是使用关键词participant进行实现。

给出样例如下：

需要注意的是，在定义元素时，其顺序是按照从左至右顺序定义的，因此写作的时候需要多少注意一下。

3. 时序图的连线定义

现在，我们来看一下如何进行时序图之中的连线定义。

其实我们在1中的演示样例中已经可以看到，其基础的语法定义如下：

• Alice ->> Bob: comment

可以看到，其基本的组成即为：{参与元素1} {连线} {参与元素2}: {comment}

我们来考察其中关于连线的定义如下表所示：

	description
->	无箭头实线
–>	无箭头虚线
->>	带箭头实线
–>>	带箭头虚线
-x	带x实线
–x	带x虚线
-)	实线菱形箭头
–)	虚线菱形箭头

4. 注释的定义方式

时序图同样可以加入注释，其注释的定义语法如下：

• Note {位置} {参与元素}: {comment}

其中，位置内容关键词如下表所示：

	description
right of	在右侧
left of	在左侧
over	在上方

我们给出使用样例如下：

需要注意的是：

1. over可以配合多个参与元素，相互之间用,连接；
2. right of以及left of只能配合单一参与元素；

5. 子图的定义方式

最后，我们来看一下关于子图的定义。

子图的定义其实和流程图中差不多，基本也就是在原图中划拉出部分然后作为子图，一个典型的例子如下：

最后，我们给出mermaid时序图中的子图定义以及语法如下：

关系	语法
循环(for)	loop {comment} end
条件(if…else)	alt {case1} else {case2} end
可选	opt {action} end

3. gantt图绘制方法

mermaid此外还支持gantt图的绘制，产品经理大概对这个会更熟一点，就是不知道他们会不会用markdown来画gantt图。

我们同样先给出一个gantt图的简单demo如下：

可以看到：

• gantt图的绘制和流程图还有时序图大差不差，都可以分为两个阶段，即画布的定义和具体内容的定义。

下面，我们来堆对其进行具体的介绍。

1. gantt图定义

gantt图的定义如上所示，主要申明一个gantt就行，然后可以加入一些可选特征控制，包括：

1. title
   • gantt图标题
2. dateFormat
   • 时间格式定义，典型如：YYYY-MM-DD
3. axisFormat
   • 坐标轴时间格式定义，典型如：%Y-%m-%d
4. excludes
   • 隐藏内容，典型如：excludes weekends
5. %%
   • 注释内容

2. section定义

下面，我们来看一下gantt图中关于section的内容定义。

其典型结构如下：

• task_name: status, abbr, start_time, end_time/duration

其中，status表示任务状态，可选项包括：

• <empty>: 未开始
• done: 已完成
• active: 进行中
• crit: 关键任务

而abbr表示该任务的别称，可以直接不填。

关于start_time，如样例中显示的一样，既可以使用绝对时间，也可以根据其他任务采用相对时间。

最后，有关最后一项，同样如上述显示，既可以使用结束时间点来表示，也可以采用一个时间段来表示持续时间。

4. 参考链接

1. Markdown 绘图插件之 Mermaid 语法
2. Markdown绘制甘特图教程
3. https://mermaid-js.github.io/mermaid/#/