最近在梳理之前工作的项目,于是就不可避免地需要绘制流程图,然后就又双叒叕发现自己又给忘了怎么用markdown来绘制流程图了……
so,干脆这次就抽点时间整理一下markdown中的绘图方法吧,毕竟这次还算运气好,多少还记得绘图用的是mermaid,哪天要是一直不用连mermaid都忘了,那真的是要查都不知道如何下手了……
需要注意的是,我其实主要也就用一下流程图,因此这里其实也就是基于下述参考链接1中的博客进行一下整理,作为入门其实也就差不多了,但是后来发现mermaid语法其实非常的强大,远不止这篇文章中提到的这些内容,除了文中提到的流程图、时序图、gantt图等,还包括了饼状图等大量的图表绘制功能,有兴趣的读者还是建议直接阅读参考链接3中的官方教程进行学习。
首先,我们来看一下如何使用mermaid来绘制一个流程图。
这部分内容其实可以抽象为如下过程:
当然,其中2和3往往可以一起做,我们给出一个简单的样例如下:
下面,我们来分别考察一下画布定义,节点定义以及连线关系的语法。
画布的定义语法如下:
其中,graph LR
即为画布的定义命令。
其中,不同方向画布的定义如下表所示:
方向 | |
---|---|
Graph LR | 从左到右 |
Graph RL | 从右到左 |
Graph TB | 从上到下 |
Graph BT | 从下到上 |
Graph TD | 从上到下 |
然后,我们来考察一下流程图中的节点定义方法。
单纯创建一个节点其实比较简单,只要给出节点命名就行了,比如:
这样,我们就可以用区分节点命名和内容展示了。
而关于节点的形状,我们则可以根据下述表格进行自行替换。
形状 | |
---|---|
[] | 方形 |
{} | 菱形 |
() | 圆角方形 |
(()) | 圆形 |
而有关连线的定义,mermaid语法中给出了3种连线的定义,具体详见下述表格:
线段类型 | 表示 |
---|---|
–> | 一般实线 |
-.-> | 虚线 |
==> | 加粗实线 |
最后,mermaid还支持子图的定义。
不过mermaid的子图定义比较简陋,他事实上就是开设一个单独的模块,将一些节点放置到这个设置的模块内。
因此:
其基础的用法如下:
时序图是mermaid提供的第二类图表绘制类型。
其整体的架构和流程图没有太大的差异,主要就是:
下面,我们来具体考察一下其相关的内容。
首先,我们来看如何来绘制一张最为基础的时序图。
直接给出一个样例如下:
可以看到,时序图的基本用法可以包括:
时序图的画布定义方式其实没啥好多说的,使用关键词sequenceDiagram
即可。
而有关时序图中的元素定义,则是使用关键词participant
进行实现。
给出样例如下:
需要注意的是,在定义元素时,其顺序是按照从左至右顺序定义的,因此写作的时候需要多少注意一下。
现在,我们来看一下如何进行时序图之中的连线定义。
其实我们在1中的演示样例中已经可以看到,其基础的语法定义如下:
Alice ->> Bob: comment
可以看到,其基本的组成即为:{参与元素1} {连线} {参与元素2}: {comment}
我们来考察其中关于连线的定义如下表所示:
description | |
---|---|
-> | 无箭头实线 |
–> | 无箭头虚线 |
->> | 带箭头实线 |
–>> | 带箭头虚线 |
-x | 带x实线 |
–x | 带x虚线 |
-) | 实线菱形箭头 |
–) | 虚线菱形箭头 |
时序图同样可以加入注释,其注释的定义语法如下:
Note {位置} {参与元素}: {comment}
其中,位置内容关键词如下表所示:
description | |
---|---|
right of | 在右侧 |
left of | 在左侧 |
over | 在上方 |
我们给出使用样例如下:
需要注意的是:
,
连接;最后,我们来看一下关于子图的定义。
子图的定义其实和流程图中差不多,基本也就是在原图中划拉出部分然后作为子图,一个典型的例子如下:
最后,我们给出mermaid时序图中的子图定义以及语法如下:
关系 | 语法 |
---|---|
循环(for) | loop {comment}end |
条件(if…else) | alt {case1} else {case2} end |
可选 | opt {action} end |
mermaid此外还支持gantt图的绘制,产品经理大概对这个会更熟一点,就是不知道他们会不会用markdown来画gantt图。
我们同样先给出一个gantt图的简单demo如下:
可以看到:
下面,我们来堆对其进行具体的介绍。
gantt图的定义如上所示,主要申明一个gantt
就行,然后可以加入一些可选特征控制,包括:
YYYY-MM-DD
%Y-%m-%d
excludes weekends
下面,我们来看一下gantt图中关于section的内容定义。
其典型结构如下:
task_name: status, abbr, start_time, end_time/duration
其中,status
表示任务状态,可选项包括:
<empty>
: 未开始done
: 已完成active
: 进行中crit
: 关键任务而abbr
表示该任务的别称,可以直接不填。
关于start_time
,如样例中显示的一样,既可以使用绝对时间,也可以根据其他任务采用相对时间。
最后,有关最后一项,同样如上述显示,既可以使用结束时间点来表示,也可以采用一个时间段来表示持续时间。