惊呆！原来 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 A

复制

4.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...  
  End

复制

4.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