您的位置: 首页  >  文章  >  MarkDown流程图全指导(高级开发者与项目经理必须技能）

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

分类: 文章 • 2022-10-26 09:35:11

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

一个最简单的流程图

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

 

请点击输入图片描述

代码：

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

简易四步骤流程图

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

 

请点击输入图片描述

代码：

  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

简易五步骤流程图

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

 

请点击输入图片描述

代码：

  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

详解标准流程图

基本语法：

  • 定义模块 id=>关键字: 描述 （“描述”的前面必须有空格，“=>” 两端不能有空格）
  • 关键字：
    • start 流程开始，以圆角矩形绘制
    • opearation 操作，以直角矩形绘制
    • condition 判断，以菱形绘制
    • subroutine 子流程，以左右带空白框的矩形绘制
    • inputoutput 输入输出，以平行四边形绘制
    • end 流程结束，以圆角矩形绘制
  • 定义模块间的流向：
    • 模块1 id->模块2 id ：一般的箭头指向
    • 条件模块id (描述)->模块id(direction) ：条件模块跳转到对应的执行模块，并指定对应分支的布局方向

示例：

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

 

请点击输入图片描述

代码：

  1. ```flow
  2. st=>start: 开始
  3. ipt=>inputoutput: 输入一个x
  4. op=>operation: 处理加工x+1
  5. cond=>condition: 溢出（是或否？）
  6. sub=>subroutine: 子流程
  7. io=>inputoutput: 输出x
  8. ed=>end: 结束
  9.  
  10. st->ipt->op->cond
  11. cond(yes)->io->ed
  12. cond(no)->sub->io->ed

复杂三支线流程图

效果：

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

 

请点击输入图片描述

代码：

  1. ```flow
  2. st=>start: Start|past:>http://www.google.com[blank]
  3. e=>end: End:>http://www.google.com
  4. op1=>operation: get_hotel_ids|past
  5. op2=>operation: get_proxy|current
  6. sub1=>subroutine: get_proxy|current
  7. op3=>operation: save_comment|current
  8. op4=>operation: set_sentiment|current
  9. op5=>operation: set_record|current
  10.  
  11. cond1=>condition: ids_remain空?
  12. cond2=>condition: proxy_list空?
  13. cond3=>condition: ids_got空?
  14. cond4=>condition: 爬取成功??
  15. cond5=>condition: ids_remain空?
  16.  
  17. io1=>inputoutput: ids-remain
  18. io2=>inputoutput: proxy_list
  19. io3=>inputoutput: ids-got
  20.  
  21. st->op1(right)->io1->cond1
  22. cond1(yes)->sub1->io2->cond2
  23. cond2(no)->op3
  24. cond2(yes)->sub1
  25. cond1(no)->op3->cond4
  26. cond4(yes)->io3->cond3
  27. cond4(no)->io1
  28. cond3(no)->op4
  29. cond3(yes, right)->cond5
  30. cond5(yes)->op5
  31. cond5(no)->cond3
  32. op5->e

1.2样式流程图

基本语法：

  • graph 指定流程图方向：graph LR 横向，graph TD 纵向
  • 元素的形状定义：
    • id[描述] 以直角矩形绘制
    • id(描述) 以圆角矩形绘制
    • id{描述} 以菱形绘制
    • id>描述] 以不对称矩形绘制
    • id((描述)) 以圆形绘制
  • 线条定义：
    • A-->B 带箭头指向
    • A---B 不带箭头连接
    • A-.-B 虚线连接
    • A-.->B 虚线指向
    • A==>B 加粗箭头指向
    • A--描述---B 不带箭头指向并在线段中间添加描述
    • A--描述-->B 带描述的箭头指向
    • A-.描述.->B 带描述的虚线连指向
    • A==描述==>B 带描述的加粗箭头指向
  • 子流程图定义
  • subgraph title
  • graph direction
  • end

示例：

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

 

请点击输入图片描述

  1. graph LR
  2. A(开始) -->B(起床)
  3. B --天气不好--- C>干活]
  4. C ==> D{休息时间到了}
  5. D -.yes.-> E((休息))
  6. D -.no.-> C
  7. E --> F(吃饭)

代码：

  1. ```mermaid
  2. graph LR
  3. A(开始) -->B(起床)
  4. B --天气不好--- C>干活]
  5. C ==> D{休息时间到了}
  6. D -.yes.-> E((休息))
  7. D -.no.-> C
  8. E --> F(吃饭)

二、时序图

时序图（Sequence Diagram）用于描述对象之间发送消息的时间顺序或显示多个对象之间的动态协作。时序图中的每条消息对应一个类操作或一个事件。

时序图元素
时序图主要有一下几个元素：角色，对象，生命线，**器和消息

  • 1、角色（Actor）
    任何主体都可以是角色，角色对外发布消息。示例中，客户端，打印机，数据库都是角色。
  • 2，对象(Object)
    对象代表时序图中的对象在交互中所扮演的角色，位于时序图顶部和对象代表类角色。有的时候可能有多个打印机 ，那么这些打印机都是同一角色的不同对象
  • 3，生命线(Lifeline)
    生命线代表时序图中的对象在一段时期内的存在。时序图中每个对象和底部中心都有一条垂直的线，这就是对象的生命线，对象间 的消息存在于两条虚线间。
  • 4，**期(Activation)
    **期代表时序图中的对象执行一项操作的时期，在时序图中每条生命线上的窄的矩形代表活动期。它可以被理解成C语言语义中一对花括号“{}”中的内容。****的Markdown中并没有这一举行，只能以右侧或左侧的注解来表示“` python
  • 5，消息(Message)
    消息是定义交互和协作中交换信息的类，用于对实体间的通信内容建模，信息用于在实体间传递信息。允许实体请求其他的服务，类角色通过发送和接受信息进行通信。

2.1标准时序图

基本语法：

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

示例：

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

 

请点击输入图片描述

代码：

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

再来一个UML时序图：

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

 

请点击输入图片描述

代码：

  1. ``` sequence
  2. 客户端->打印机: 打印请求(id)
  3. 打印机->数据库:请求数据(id)
  4. Note right of 数据库: 执行SQL获取数据
  5. 数据库-->打印机:返回数据信息
  6. Note right of 打印机:使用数据打印
  7. 打印机-->>客户端:返回打印结果
  8. 客户端->客户端:等待提取结果

2.2带样式时序图

基本语法同标准时序图，不同的是

  • 需要使用 mermaid 解析，并在开头使用关键字 sequenceDiagram 指明
  • 线段的样式遵循 mermaid 的解析方式
    • -> ： 实线连接
    • --> ：虚线连接
    • ->> ：实线箭头指向
    • -->> ：虚线箭头指向

示例：

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

 

请点击输入图片描述

  1. sequenceDiagram
  2. 对象A->对象B:中午吃什么？
  3. 对象B->>对象A: 随便
  4. loop 思考
  5. 对象A->对象A: 努力搜索
  6. end
  7. 对象A-->>对象B: 火锅？
  8. 对象B->>对象A: 可以
  9. Note left of 对象A: 我是一个对象A
  10. Note right of 对象B: 我是一个对象B
  11. participant 对象C
  12. Note over 对象C: 我自己说了算

代码：

  1. ```mermaid
  2. sequenceDiagram
  3. 对象A->对象B:中午吃什么？
  4. 对象B->>对象A: 随便
  5. loop 思考
  6. 对象A->对象A: 努力搜索
  7. end
  8. 对象A-->>对象B: 火锅？
  9. 对象B->>对象A: 可以
  10. Note left of 对象A: 我是一个对象A
  11. Note right of 对象B: 我是一个对象B
  12. participant 对象C
  13. Note over 对象C: 我自己说了算

三、甘特图

基本语法：

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

示例：

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

 

请点击输入图片描述

  1. gantt
  2. dateFormat YYYY-MM-DD
  3.  
  4. title 软件开发甘特图
  5.  
  6. section 设计
  7. 需求:done,des1, 2019-01-06,2019-01-08
  8. 原型:active,des2, 2019-01-09, 3d
  9. UI设计:des3, after des2, 5d
  10. 未来任务:des4, after des3, 5d
  11.  
  12. section 开发
  13. 学习准备理解需求:crit, done, 2019-01-06,24h
  14. 设计框架:crit, done, after des2, 2d
  15. 开发:crit, active, 3d
  16. 未来任务:crit, 5d
  17. 休息时间:2d
  18.  
  19. section 测试
  20. 功能测试:active, a1, after des3, 3d
  21. 压力测试:after a1, 20h
  22. 测试报告: 48h

代码：

  1. ```mermaid
  2. gantt
  3. dateFormat YYYY-MM-DD
  4.  
  5. title 软件开发甘特图
  6.  
  7. section 设计
  8. 需求:done,des1, 2019-01-06,2019-01-08
  9. 原型:active,des2, 2019-01-09, 3d
  10. UI设计:des3, after des2, 5d
  11. 未来任务:des4, after des3, 5d
  12.  
  13. section 开发
  14. 学习准备理解需求:crit, done, 2019-01-06,24h
  15. 设计框架:crit, done, after des2, 2d
  16. 开发:crit, active, 3d
  17. 未来任务:crit, 5d
  18. 休息时间:2d
  19.  
  20. section 测试
  21. 功能测试:active, a1, after des3, 3d
  22. 压力测试:after a1, 20h
  23. 测试报告: 48h

用Gravizo第三方插件画流程图

介绍一个在markdown中插入流程图、各种图的方法
http://g.gravizo.com

打开上面这个网站, 这个网站提供动态生成各种图的http接口
像这样使用, 接口根据传入的参数返回图，免费版带一个西文LOGO水印。

相关推荐