markdown小技巧：mermaid绘图工具介绍
Posted 墨客无言
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了markdown小技巧：mermaid绘图工具介绍相关的知识，希望对你有一定的参考价值。
0. 引言
最近在梳理之前工作的项目，于是就不可避免地需要绘制流程图，然后就又双叒叕发现自己又给忘了怎么用markdown来绘制流程图了……
so，干脆这次就抽点时间整理一下markdown中的绘图方法吧，毕竟这次还算运气好，多少还记得绘图用的是mermaid，哪天要是一直不用连mermaid都忘了，那真的是要查都不知道如何下手了……
需要注意的是，我其实主要也就用一下流程图，因此这里其实也就是基于下述参考链接1中的博客进行一下整理，作为入门其实也就差不多了，但是后来发现mermaid语法其实非常的强大，远不止这篇文章中提到的这些内容，除了文中提到的流程图、时序图、gantt图等，还包括了饼状图等大量的图表绘制功能，有兴趣的读者还是建议直接阅读参考链接3中的官方教程进行学习。
1. 流程图绘制方法
首先，我们来看一下如何使用mermaid来绘制一个流程图。
这部分内容其实可以抽象为如下过程：
- 定义一张画布；
- 定义流程图中的节点；
- 定义节点之间的连线关系；
当然，其中2和3往往可以一起做，我们给出一个简单的样例如下：
下面，我们来分别考察一下画布定义，节点定义以及连线关系的语法。
1. 画布定义
画布的定义语法如下：
其中，graph LR即为画布的定义命令。
其中，不同方向画布的定义如下表所示：
| 方向 | |
|---|---|
| Graph LR | 从左到右 |
| Graph RL | 从右到左 |
| Graph TB | 从上到下 |
| Graph BT | 从下到上 |
| Graph TD | 从上到下 |
2. 节点定义
然后，我们来考察一下流程图中的节点定义方法。
单纯创建一个节点其实比较简单，只要给出节点命名就行了，比如：
不过这种定义方式节点命名和节点内容展示必须是一致的，且不允许空格存在，使用起来比较不方便。
更加合理的方式是如下：