MarkDown流程图全指导(高级开发者与项目经理必须技能）

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标准流程图

一个最简单的流程图

 

请点击输入图片描述

代码：

1. ```flow
2. start=>start: 接收到消息
3. info=>operation: 读取信息
4. setCache=>operation: 更新缓存
5. end=>end: 处理结束
6.  
7. start->info->setCache->end

简易四步骤流程图

 

请点击输入图片描述

代码：

1. ```flow
2. st=>start: Start
3. op=>operation: Your Operation
4. cond=>condition: Yes or No?
5. e=>end
6. st->op->cond
7. cond(yes)->e
8. cond(no)->op

简易五步骤流程图

 

请点击输入图片描述

代码：

1. ```flow
2. start=>start: API请求
3. cache=>operation: 读取Redis缓存
4. cached=>condition: 是否有缓存？
5. sendMq=>operation: 发送MQ，后台服务更新缓存
6. info=>operation: 读取信息
7. setCache=>operation: 保存缓存
8. end=>end: 返回信息
9.  
10. start->cache->cached
11. cached(yes)->sendMq
12. cached(no)->info
13. info->setCache
14. setCache->end
15. sendMq->end