Markdown Mermaid 绘制流程图和时序图教程（以Joplin为例）
前几篇文章讲解了Joplin前面插件的作用和使用方法，如果大家还没有阅读但是有需要的话可以去这里找哦！需要说明的是虽然本文使用Joplin作为教程的演示Markdown编辑器，但是本教程适用于任何其它支持Mermaid的Markdown编辑器。
好了，我们开始进入今天的正题。首先我们来看看Mermaid是干什么的！这篇文章讲使用Mermaid 绘制流程图和时序图，剩下的我将在接下来的文章中讲解！
Mermaid插件的作用
Mermaid是一个用于画流程图、时序图、类图、状态图、甘特图、饼图的Markdown扩展，其中状态图是最新8.4版本的新功能。如果你不知道这些图是干什么的，不存在，下面的教程里面我会每个都给出例子。
在Joplin里面使用Mermaid
在Joplin里面如果想要使用Mermaid，那么你需要使用代码块，并且代码的类型填写mermaid，详细的格式如下：
```mermaid
graph TD
Start --> Stop
```在渲染区我们就能得到如下的结果
Mermaid流程图
下面我们讲解在Mermaid里面画流程图。上一节的示例便是流程图，我们把上一节的代码拿出来分析一下。首先我们看代码的第一行：graph TD，这一行代码有两个作用，graph表示我们图的类型，graph表示流程图，而第二个TD表示图的方向，可能的方向有如下几个
- TB：自顶向下
- BT：自底向上
- RL：从右到左
- LR：从左到右
- TD：和TB一样
上面我们的例子使用的是TD，如果你对其它的方向不明白，可以把代码拷贝到编辑器里面修改方向参数就可以理解各个方向的意义了。
上面的代码非常基础，因为如果要实现比较复杂的流程图，我们就需要使用一些比较高级的语法，比如定义节点。所谓的节点，你可以简单的理解为上面图片中的方框，但是如果我们要使用其它形状的节点怎么办呢？在上面的例子中我使用了默认的节点定义方法，也就是直接使用文本,这种方式定义节点的话id和显示文本是一样的，而且形状是固定的矩形。如果要定义不同的节点形状，或者使得id和显示文本不一样，可以使用下面的语法
- 定义矩形形状的节点：id[text]
- 定义圆角矩形的节点：id(text)
- 定义椭圆形的节点：id([text])
- 定义圆柱形的节点：id[(text)]
- 定义圆形的节点：id((text))
- 定义非对称图形的节点：id>text]
- 定义菱形的节点：id{text}
- 定义六角形的节点：id{{text}}
- 定义平行四边形的节点(两个方向)：id[/text/]或者[\text\]
- 定义梯形的节点(两个方向)：id[/text\] 或者 di[\text/]
注意上面的id和text是需要我们自己定义替换的，如果同一个id有多个text，取最后一次的定义值！
有了节点我们还需要将节点连接起来，也就是我们要使用线条或者箭头来进行节点的连接，Mermaid支持下面的方式：
- 实线箭头：A–>B
- 实线无箭头：A–B
- 无箭头实线上带文本：A–text–B
- 实线箭头带文本：A–>|text|B 或者 A–text–>B
- 虚线箭头：A-.->B
- 虚线箭头带文本：A-.text.->B
- 粗线箭头：A==>B
- 粗线箭头带箭头：A==text==>B
最好的办法就是把上面的代码拷贝进编辑器看看，一看你应该就能理解各个图形的形状！
上面我们讲解了节点和连线，下面我们说说图形的绘制。上面我使用的例子非常基础，下面来一个复杂点的例子供大家修改和研究
```mermaid
graph TD
light[LightZhan]
url[lightzhan.xyz]
QdownUrl[访问LightZhan博客Qdown页面]
Qdown((Qdown))
function[功能]
Qdown-->|作者|light
light--个人主页-->url
Qdown-->function
Qdown-->QdownUrl
function1[极速下载]
function2[磁链/BT下载]
function3[迅雷下载]
function5[下载体验]
function4[Http/Https/FTP/SFTP]
function-.功能1.->function1
function-.功能2.->function2
function-.功能3.->function3
function-.功能4.->function4
function-.更多功能.->function5
annocement[本文首发于lightzhan.xyz,允许规范转载]
```上面代码的渲染结果如下：
如果不清楚，可以把上面的代码拷贝到编辑器进行修改和摸索！
Mermaid时序图
时序图是用于展示过程的方式和顺序的。举例来说，两个人之间的对话:
A先问B：Qdown是啥？B回答：Qdown是全功能的下载软件！A又问：哪里可以下载呀？B回答： http://lightzhan.xyz/index.php/qdown/ 。我们使用mermaid绘制时序图来展示上面的对话过程：
这样是不是看上去清晰了很多了呢？希望通过这个例子能让你深切地感受到时序图是干什么用的！好了，放上上面的时序图的代码供大家研究：
```mermaid
sequenceDiagram
A->>B:Qdown是啥？
B-->>A:Qdown是全功能的下载软件！
A->>B:哪里可以下载呀？
B-->>A:http://lightzhan.xyz/index.php/qdown/
```让我们来简单分析一下上面的代码。你可能注意到了第一行的sequenceDiagram，这个就是告诉mermaid我们在这里绘制时序图，然后下面有箭头，在时序图里面，mermaid支持下面类型的箭头和线段：
- 实线并且没有箭头：A->B:text
- 虚线没有箭头：A–>B:text
- 实线带箭头：A->>B:text
- 虚线带箭头：A–>>B:text
- 实线并且在终点带一个x：A-xB:text
- 虚线并且在终点带一个x：A–xB:text
上面的text就是要显示在箭头或线段上的文本，在mermaid的时序图里面被称为消息，线段或箭头类型如果有不清楚的可以拷贝到编辑器里面看看，一目了然！
还记得上面我们在流程图里面的节点吗？在时序图里面不是定义节点，而是定义参与者，也就是上面的A和B。上面的代码中我们定义参与者的方式采用的是默认方式，也就是不显示定义，有时候我们的参与者的名字太长的话可以使用显示定义来定义别名：
participant John
participant Alice
participant A as Alice
participant J as John上面代码的第一二行仅仅是显式定义我们的参与者，第三四行给我们的参与者定义别名，定义了别名后我们在下面的使用中就可以直接使用A代替Alice，使用J代替John了，这样输入会方便很多！
好了，时序图差不多就讲到这里，接下来的一些高级用法大部分我们都用不到，或者要使用的话不如使用专业的绘图软件使用插图的方式导入。
下一篇文章讲解使用mermaid绘制类图和饼图，类图对于程序员来说非常有用，第二种饼图可以直观地进行数据展示，也非常实用。
