Markdown支持的几种图表和代码实例（流程图、时序图、甘特图）

Markdown图表支持类型包括：

• 流程图：指定 mermaid（样式流程图） 或 flow （标准流程图）解析语言
• 时序图：指定 sequence（标准时序图） 或 mermaid（样式时序图） 解析语言
• 甘特图：指定 mermaid 解析语言

一、流程图

①简单流程图

```mermaid
flowchat
start=>start: 接收消息
info=>operation: 读取信息
setCache=>operation: 更新缓存
end=>end: 处理结束
start->info->setCache->end

②选择流程图

```mermaid
flowchat
start=>start: API请求
cache=>operation: 读取Redis缓存
cached=>condition: 是否有缓存？
sendMq=>operation: 发送MQ，后台服务更新缓存
info=>operation: 读取信息
setCache=>operation: 保存缓存
end=>end: 返回信息
start->cache->cached
cached(yes)->sendMq
cached(no)->info
info->setCache
setCache->end
sendMq->end

③标准流程图

```mermaid
flowchat
st=>start: 开始
ipt=>inputoutput: 输入x
op=>operation: 处理加工，取除以2的余数：i = mod(x, 2)
cond=>condition:  i 等于 0 ？
sub=>subroutine: 子流程: x=x+1
io=>inputoutput: 输出x
ed=>end: 结束
st->ipt->op->cond
cond(yes)->io->ed
cond(no)->sub->io->ed

④复杂流程图

```mermaid
flowchat
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: get_hotel_ids|past
op2=>operation: get_proxy|current
sub1=>subroutine: get_proxy|current
op3=>operation: save_comment|current
op4=>operation: set_sentiment|current
op5=>operation: set_record|current
cond1=>condition: ids_remain空?
cond2=>condition: proxy_list空?
cond3=>condition: ids_got空?
cond4=>condition: 爬取成功??
cond5=>condition: ids_remain空?
io1=>inputoutput: ids-remain
io2=>inputoutput: proxy_list
io3=>inputoutput: ids-got
st->op1(right)->io1->cond1
cond1(yes)->sub1->io2->cond2
cond2(no)->op3
cond2(yes)->sub1
cond1(no)->op3->cond4
cond4(yes)->io3->cond3
cond4(no)->io1
cond3(no)->op4
cond3(yes, right)->cond5
cond5(yes)->op5
cond5(no)->cond3
op5->e

⑤样式流程图

```mermaid
graph LR
A(开始) -->B(起床)
B --心情好--- C>搬砖]
C ==> D{午休时间}
D -.yes.-> E((休息))
D -.no.-> C
E --> F(下班
)

```graph LR
A(开发) -->B(采购)
B --- C>上架]
C -.-> D{上架运营}
D --> E((出单))
E --> F(物流)
F --> G(评价)

二、时序图

①标准时序图

基本语法：
**Title:**标题 ：指定时序图的标题
**Note direction of 对象:**描述 ： 在对象的某一侧添加描述，direction 可以为 right/left/over ， 对象 可以是多个对象，以 , 作为分隔符
**participant 对象 ：**创建一个对象
**loop…end ：**创建一个循环体
**对象A->对象B:**描述 ： 绘制A与B之间的对话，以实线连接
-> 实线实心箭头指向
–> 虚线实心箭头指向
->> 实线小箭头指向
–>> 虚线小箭头指向

```mermaid
sequenceDiagram
Title:时序图示例
客户端->>服务端: 我想找你拿下数据 SYN
服务端-->>客户端: 我收到你的请求啦 ACK+SYN
客户端->>服务端: 我收到你的确认啦，我们开始通信吧 ACK
Note right of 服务端: 我是一个服务端
Note left of 客户端: 我是一个客户端
Note over 服务端,客户端: TCP 三次握手
participant 观察者

②UML时序图

```mermaid
sequenceDiagram
客户端->>打印机: 打印请求(id)
打印机->>数据库:请求数据(id)
Note right of 数据库: 执行SQL获取数据
数据库-->>打印机:返回数据信息
Note right of 打印机:使用数据打印
打印机-->>客户端:返回打印结果
客户端->>客户端:等待提取结果

③带样式时序图

基本语法同标准时序图，不同的是
需要使用 mermaid 解析，并在开头使用关键字 sequenceDiagram 指明
线段的样式遵循 mermaid 的解析方式
-> ： 实线连接
--> ：虚线连接
->> ：实线箭头指向
-->> ：虚线箭头指向
以下为代码：

```mermaid
sequenceDiagram
对象A->>对象B:中午吃什么？
对象B->>对象A: 随便
loop 思考
对象A->>对象A: 努力搜索
end
对象A-->>对象B: 火锅？
对象B->>对象A: 可以
Note left of 对象A: 我是一个对象A
Note right of 对象B: 我是一个对象B
participant 对象C
Note over 对象C: 我自己说了算

三、甘特图

①甘特图

基本语法：
使用 mermaid 解析语言，在开头使用关键字 gantt 指明
deteFormat 格式 指明日期的显示格式
title 标题 设置图标的标题
section 描述 定义纵向上的一个环节
定义步骤：每个步骤有两种状态 done（已完成）/ active（执行中）
描述: 状态,id,开始日期,结束日期/持续时间
描述: 状态[,id],after id2,持续时间
crit ：可用于标记该步骤需要被修正，将高亮显示
如果不指定具体的开始时间或在某个步骤之后，将默认依次顺序排列
以下为代码：

```mermaid
gantt
dateFormat YYYY-MM-DD
title 软件开发甘特图
section 设计
需求:done,des1, 2019-01-06,2019-01-08
原型:active,des2, 2019-01-09, 3d
UI设计:des3, after des2, 5d
未来任务:des4, after des3, 5d
section 开发
学习准备理解需求:crit, done, 2019-01-06,24h
设计框架:crit, done, after des2, 2d
开发:crit, active, 3d
未来任务:crit, 5d
休息时间:2d
section 测试
功能测试:active, a1, after des3, 3d
压力测试:after a1, 20h
测试报告: 48h