• 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 ```

    显示效果如下:

    参考网址

  • 相关阅读:
    git的命令操作指南
    【flask】RestFul的基本鉴权
    linux断电修复
    centos7安装libreoffice
    java -jar 后台启动
    yum安装nginx
    rpm安装mysql
    yum安装redis
    Centos 修改yum源
    centos8安装node.js v12.18.3
  • 原文地址:https://www.cnblogs.com/luyj00436/p/15091506.html
Copyright © 2020-2023  润新知