MarkDown(十一）——绘制流程图、时序图（顺序图）、甘特图

最近使用到了MarkDown，就像发现了宝藏一样。然后，为了加强记忆，基本上算是在我的博文里照抄了菜鸟教程里的Markdown系列的文章。由于本人可能对作图的使用频率不高，这里还是照抄了一篇笔记——感觉好厉害的样式。本文的章节目录如下：

横向流程图

横向流程图源码如下：

1 ```mermaid
2 graph LR
3 A[方形] -->B(圆角)
4     B --> C{条件a}
5     C -->|a=1| D[结果1]
6     C -->|a=2| E[结果2]
7     F[横向流程图]
8 ```

显示效果如下：

竖向流程图

竖向流程图源码如下：

```mermaid
graph TD
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    F[竖向流程图]
```

显示效果如下：

标准流程图

标准流程图源码如下：

 1 ```flow
 2 st=>start: 开始框
 3 op=>operation: 处理框
 4 cond=>condition: 判断框(是或否?)
 5 sub1=>subroutine: 子流程
 6 io=>inputoutput: 输入输出框
 7 e=>end: 结束框
 8 st->op->cond
 9 cond(yes)->io->e
10 cond(no)->sub1(right)->op
11 ```

显示效果如下：

标准流程图（横向）

标准流程图（横向）源码如下：

 1 ```flow
 2 st=>start: 开始框
 3 op=>operation: 处理框
 4 cond=>condition: 判断框(是或否?)
 5 sub1=>subroutine: 子流程
 6 io=>inputoutput: 输入输出框
 7 e=>end: 结束框
 8 st(right)->op(right)->cond
 9 cond(yes)->io(bottom)->e
10 cond(no)->sub1(right)->op
11 ```

显示效果如下：

UML时序图

 UML时序图源码如下：

1 ```sequence
2 对象A->对象B: 对象B你好吗?（请求）
3 Note right of 对象B: 对象B的描述
4 Note left of 对象A: 对象A的描述(提示)
5 对象B-->对象A: 我很好(响应)
6 对象A->对象B: 你真的好吗？
7 ```

显示效果如下：

复杂的UML时序图

复杂的UML时序图源码如下：

 1 ```sequence
 2 Title: 标题：复杂使用
 3 对象A->对象B: 对象B你好吗?（请求）
 4 Note right of 对象B: 对象B的描述
 5 Note left of 对象A: 对象A的描述(提示)
 6 对象B-->对象A: 我很好(响应)
 7 对象B->小三: 你好吗
 8 小三-->>对象A: 对象B找我了
 9 对象A->对象B: 你真的好吗？
10 Note over 小三,对象B: 我们是朋友
11 participant C
12 Note right of C: 没人陪我玩
13 ```

显示效果如下:

UML标准时序图

UML标准时序图源码如下：

 1 ```mermaid
 2 %% 时序图例子,-> 直线，-->虚线，->>实线箭头
 3   sequenceDiagram
 4     participant 张三
 5     participant 李四
 6     张三->王五: 王五你好吗？
 7     loop 健康检查
 8         王五->王五: 与疾病战斗
 9     end
10     Note right of 王五: 合理 食物 <br/>看医生...
11     李四-->>张三: 很好!
12     王五->李四: 你怎么样?
13     李四-->王五: 很好!
14 ```

显示效果如下：

甘特图

甘特图源码如下：

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

显示效果如下：

参考网址

posted @ 2021-08-02 21:07  陆陆无为而治者  阅读(15688)  评论(0)  编辑  收藏  举报