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

画扇落汗

已于 2024-04-01 10:18:47 修改

阅读量2.3k

点赞数 13

分类专栏：笔记 Markdown 文章标签：流程图甘特图笔记

于 2024-03-29 17:11:02 首次发布

本文链接：https://blog.csdn.net/garbageSystem/article/details/137150900

版权

博客介绍了Markdown支持的图表类型及解析语言。图表类型包括流程图、时序图和甘特图。流程图指定mermaid或flow解析语言，时序图指定sequence或mermaid解析语言，甘特图指定mermaid解析语言，还介绍了各类图表的具体样式及标准时序图的基本语法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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