马上注册，阅读更多内容，享用更多功能！
您需要 登录 才可以下载或查看，没有账号？立即注册 
×
Markdown流程图全指导 (z01.com)
准备工作Markdown是一个轻量级的标记语言，使用普通文本编辑器就能快速编写，不仅显示格式丰富，功能也毫不含糊，分享一个md格式的API请求流程图。 在使用Markdown图表前，你首先需要有解析工具，在本地开发，用vs code再加Markdown preview插件，显然是可以胜任。 由于有些浏览器渲染不出来，所以少数样式流程图带用了图片插入，在强解析下会呈现出相同的两个效果。
基本原理Markdown图表支持类型包括： - 流程图：指定 mermaid（样式流程图） 或 flow （标准流程图）解析语言
- 时序图：指定 sequence（标准时序图） 或 mermaid（样式时序图） 解析语言
- 甘特图：指定 mermaid 解析语言
这些复杂图形的绘制都是使用代码块实现的，指定代码块的解析语言，按照响应的绘制语法即可实现。
1.2样式流程图基本语法： 示例：
 - graph LR
- A(开始) -->B(起床)
- B --天气不好--- C
- C ==> D{休息时间到了}
- D -.yes.-> E((休息))
- D -.no.-> C
- E --> F(吃饭)
代码： - ```mermaid
- graph LR
- A(开始) -->B(起床)
- C ==> D{休息时间到了}
- D -.yes.-> E((休息))
- D -.no.-> C
- E --> F(吃饭)
二、时序图时序图（Sequence Diagram）用于描述对象之间发送消息的时间顺序或显示多个对象之间的动态协作。时序图中的每条消息对应一个类操作或一个事件。 时序图元素
时序图主要有一下几个元素：角色，对象，生命线，激活器和消息 1、角色（Actor）
任何主体都可以是角色，角色对外发布消息。示例中，客户端，打印机，数据库都是角色。 2，对象(Object)
对象代表时序图中的对象在交互中所扮演的角色，位于时序图顶部和对象代表类角色。有的时候可能有多个打印机 ，那么这些打印机都是同一角色的不同对象 3，生命线(Lifeline)
生命线代表时序图中的对象在一段时期内的存在。时序图中每个对象和底部中心都有一条垂直的线，这就是对象的生命线，对象间 的消息存在于两条虚线间。 4，激活期(Activation)
激活期代表时序图中的对象执行一项操作的时期，在时序图中每条生命线上的窄的矩形代表活动期。它可以被理解成C语言语义中一对花括号“{}”中的内容。csdn的Markdown中并没有这一举行，只能以右侧或左侧的注解来表示“` python 5，消息(Message)
消息是定义交互和协作中交换信息的类，用于对实体间的通信内容建模，信息用于在实体间传递信息。允许实体请求其他的服务，类角色通过发送和接受信息进行通信。
2.1标准时序图基本语法： - Title:标题 ：指定时序图的标题
- Note direction of 对象:描述 ： 在对象的某一侧添加描述，direction 可以为 right/left/over ， 对象 可以是多个对象，以 , 作为分隔符
- participant 对象 ：创建一个对象
- loop...end ：创建一个循环体
- 对象A->对象B:描述 ： 绘制A与B之间的对话，以实线连接
- -> 实线实心箭头指向
- --> 虚线实心箭头指向
- ->> 实线小箭头指向
- -->> 虚线小箭头指向
示例： 时序图示例客户端客户端服务端服务端观察者观察者我想找你拿下数据 SYN我收到你的请求啦 ACK+SYN我收到你的确认啦，我们开始通信吧 ACK我是一个服务端我是一个客户端TCP 三次握手
代码： - ```sequence
- Title:时序图示例
- 客户端->服务端: 我想找你拿下数据 SYN
- 服务端-->客户端: 我收到你的请求啦 ACK+SYN
- 客户端->>服务端: 我收到你的确认啦，我们开始通信吧 ACK
- Note right of 服务端: 我是一个服务端
- Note left of 客户端: 我是一个客户端
- Note over 服务端,客户端: TCP 三次握手
- participant 观察者
再来一个UML时序图： 客户端客户端打印机打印机数据库数据库打印请求(id)请求数据(id)执行SQL获取数据返回数据信息使用数据打印返回打印结果等待提取结果
代码： - ``` sequence
- 客户端->打印机: 打印请求(id)
- 打印机->数据库:请求数据(id)
- Note right of 数据库: 执行SQL获取数据
- 数据库-->打印机:返回数据信息
- Note right of 打印机:使用数据打印
- 打印机-->>客户端:返回打印结果
- 客户端->客户端:等待提取结果
2.2带样式时序图基本语法同标准时序图，不同的是 - 需要使用 mermaid 解析，并在开头使用关键字 sequenceDiagram 指明
- 线段的样式遵循 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
- 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 ：可用于标记该步骤需要被修正，将高亮显示
- 如果不指定具体的开始时间或在某个步骤之后，将默认依次顺序排列
示例：
 - 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
代码： - ```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
|
