惊呆！原来 markdown 的画图功能如此强大！
1. 引言
Markdown 是一种轻量级标记语言，相比于 xml、html 等超文本标记语言，Markdown 的语法更简单，结构更清晰，更加易读易用。
博主作为一个经常写些东西的笔记爱好者，已经成为了 markdown 的拥趸，甚至为了方便自己使用，自定义了很多类 markdown 语法从而形成了自己的个人博客。
然而，markdown 这个看似简单轻量的标记语言，却支持非常强大的绘图功能，使用起来十分方便，本文我们就来详细介绍下 markdown 语言如何绘制流程图、饼图、序列图、甘特图。
2. markdown 绘图块
启用 markdown 绘图块与代码块非常像：
```mermaid
··· 绘图指令 ···
```3. 流程图
3.1 流程图声明
绘制流程图的第一行是流程图的声明，包含关键字 graph 和流程图方向。
流程图方向包含以下标识：
- TB，从上到下
- TD，从上到下
- BT，从下到上
- RL，从右到左
- LR，从左到右
T = TOP，B = BOTTOM，L = LEFT，R = RIGHT，D = DOWN
例如：
graph *LR;*
A-->B
B-->C
C-->D
D-->A
3.2 节点形状
- 默认节点 A
- 文本节点 B[bname]
- 圆角节点 C(cname)
- 圆形节点 D((dname))
- 非对称节点 E>ename]
- 菱形节点 F{fname}
graph TB
A
B[bname]
C(cname)
D((dname))
E>ename]
F{fname}
3.3 连线形状
节点间的连接线有多种形状，可以在连接线中加入标签：
箭头连接 A1–->B1 开放连接 A2—B2 标签连接 A3–text—B3 箭头标签连接 A4–text–>B4 虚线开放连接 A5.-B5 虚线箭头连接 A6-.->B6 标签虚线连接 A7-.text.-B7 标签虚线箭头连接 A8-.text.->B8 粗线开放连接 A9===B9 粗线箭头连接 A10==>B10 标签粗线开放连接 A11==text===B11 标签粗线箭头连接 A12==text==>B12
3.4 实例
3.5 子图
markdown 的语法中，还允许用户添加子图，子图就是以 subgraph 关键字标识的 graph，并以 end 结尾，但所有节点名都是全局的，并不隔离，因此子图之间是可以相互连接的。
- 实例
graph LR
subgraph g1
a1*-->b1*
end
• subgraph g2
a2*-->b2*
end
subgraph g3
a3*-->b3*
end
a3*-->a2*
4. 时序图
用来描述两个或更多模块之间的交互过程首选就是时序图，markdown 也同样提供了绘制时序图的功能。
绘制时序图的关键字是 sequenceDiagram。
4.1 参与者 -- 模块声明
作为多个模块之间交互过程的表现，首要的工作就是要声明共有哪些模块。
我们需要通过 participant 关键字进行声明，声明的顺序就是模块从左到右的展示顺序。
例如：
sequenceDiagram
participant B
participant A4.2 连线
markdown 时序图支持以下连线方式：
- 无箭头实线 ->
- 有箭头实线 ->>
- 无箭头虚线 –>
- 有箭头虚线 –>>
- 带x实线 -x
- 带x虚线 –x
sequenceDiagram
participant server
participant CA
participant client
server->>CA: 这是我的公钥
CA-->>server: 下发证书
server->client: 建立连接
client->>server: 我要 RSA 算法加密的公钥
server-->>client: 下发证书与公钥
client-->>server: 上报通过公钥加密的随机数
server->>server: 生成对称加密秘钥
client-->server: 加密通信
client-->server: 加密通信
client-xserver: 关闭连接 
4.3 高级特性
在实际的使用场景中，往往并不是这样简单地相互通信，而是需要分支、循环等特殊处理，markdown 也同样可以支持。
4.3.1 循环
loop Loop_text
... statements...
end 4.3.2 分支
alt Describing_text
...statements...
else
...statements...
end
*# 推荐在没有else的情况下使用 opt(option,选择)*
opt Describing_text
...statements...
End4.3.3 注释
注释或者称之为便签，用来对模块做额外标记。
- 单个标签
note [right of | left of][Actor]: Text
- 给多个模块打标签
note over [Actor1, Actor2...]:Text
4.3.4 实例
sequenceDiagram
participant Doctor
participant Bob
note right of Bob: Bob is a patient
loop Look Bob each hour
Doctor->>Bob: How are you?
alt Bob is sick
Bob->>Doctor: Not so good.
else
Bob->>Doctor: Fine, thank you.
end
loop Ask about patient
Doctor-->Bob: Inquire about the situation
end
opt Extra response
Bob->>Doctor:Thanks for asking
end
end
note right of Doctor: hourly ask finished
5. 甘特图
在项目管理中，甘特图是一个非常得力的好帮手，通过甘特图，我们可以对整个项目的进展情况一目了然。
用 markdown 绘制甘特图十分简单快捷。
他有以下关键字：
- dateFormat -- 日期格式
- section -- 模块声明
- Completed -- 已经完成
- Active -- 进行中
- Future -- 待后续处理
- crit -- 关键阶段
下面是一个完整的甘特图展示：
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h
附录 -- 参考资料
- https://en.wikipedia.org/wiki/Unified_Modeling_Language#Interaction_diagrams
腾讯云开发者
