MarkDown流程图全指导
by Zoomla!逐浪CMS发哥 2020-09-11 18:03:32
准备工作
Markdown是一个轻量级的标记语言,使用普通文本编辑器就能快速编写,不仅显示格式丰富,功能也毫不含糊,分享一个md格式的API请求流程图。
在使用Markdown图表前,你首先需要有解析工具,在本地开发,用vs code再加Markdown preview插件,显然是可以胜任。
由于有些浏览器渲染不出来,所以少数样式流程图带用了图片插入,在强解析下会呈现出相同的两个效果。
基本原理
Markdown图表支持类型包括:
- 流程图:指定 mermaid(样式流程图) 或 flow (标准流程图)解析语言
- 时序图:指定 sequence(标准时序图) 或 mermaid(样式时序图) 解析语言
- 甘特图:指定 mermaid 解析语言
这些复杂图形的绘制都是使用代码块实现的,指定代码块的解析语言,按照响应的绘制语法即可实现。
一、流程图
1.1标准流程图
一个最简单的流程图
请点击输入图片描述
代码:
- ```flow
- start=>start: 接收到消息
- info=>operation: 读取信息
- setCache=>operation: 更新缓存
- end=>end: 处理结束
- start->info->setCache->end
简易四步骤流程图
请点击输入图片描述
代码:
- ```flow
- st=>start: Start
- op=>operation: Your Operation
- cond=>condition: Yes or No?
- e=>end
- st->op->cond
- cond(yes)->e
- cond(no)->op
简易五步骤流程图
请点击输入图片描述
代码:
- ```flow
- 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