当前位置:   article > 正文

Markdown画流程图、时序图(顺序图)、甘特图_顺序图 md

顺序图 md

typora 画流程图、时序图(顺序图)、甘特图

复制以下代码使用 typora 的源码模式粘贴到编辑器中查看效果:

以下几个实例效果图如下:

1、横向流程图源码格式:

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

2、竖向流程图源码格式:

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

3、标准流程图源码格式:

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

4、标准流程图源码格式(横向):

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

5、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. ```

6、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. ```

7、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. ```

8、甘特图样例:

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

效果图如下:

参考文献:https://www.runoob.com/markdown/md-advance.html

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/207516
推荐阅读
相关标签
  

闽ICP备14008679号