Markdown流程图
- 基本流程图
- 方向调整
- 状态标记
- 箭头高亮
基本流程图
Markdown常用的元素有以下几种:
- start
- end
- operation
- condition
- inputoutput
subroutine
以简单的登录场景为例,流程图代码和效果如下:
start=>start: 开始
loginInfo=>inputoutput: 登录数据
verifyLogin=>subroutine: 登录验证
isSuccess=>condition: 验证成功?
respondSuccess=>operation: 响应成功
responseFailure=>operation: 响应失败
end=>end: 结束start->loginInfo->verifyLogin->isSuccess
isSuccess(yes)->respondSuccess->end
isSuccess(no)->responseFailure->end
注意:冒号和名称之间需要有一个空格。
方向调整
绘制流程图有时会出现比较一言难尽的情况,例如:
start=>start: start
operation1=>operation: operation1
isSuccess=>condition: success?
operation2=>operation: operation2
operation3=>operation: operation3
operation4=>operation: operation4
end=>end: 结束start->operation1->isSuccess
isSuccess(yes)->operation2->end
isSuccess(no)->operation3->operation4->operation1
这种情况下可以使用left、right和bottom关键字来调整线条的位置使流程图更加清晰,例如此处给operation4元素添加right关键字,就可以分离重叠的线条。
start=>start: start
operation1=>operation: operation1
isSuccess=>condition: success?
operation2=>operation: operation2
operation3=>operation: operation3
operation4=>operation: operation4
end=>end: 结束start->operation1->isSuccess
isSuccess(yes)->operation2->end
isSuccess(no)->operation3->operation4(right)->operation1
如果给condition元素添加这些关键字的话会调整整个分支的方向:
start=>start: start
operation1=>operation: operation1
isSuccess=>condition: success?
operation2=>operation: operation2
operation3=>operation: operation3
operation4=>operation: operation4
end=>end: 结束start->operation1->isSuccess
isSuccess(yes)->operation2->end
isSuccess(no,left)->operation3->operation4(left)->operation1
状态标记
Markdown会使用不同的颜色来标记状态,状态主要有以下几种:
- past
- current
- future
- approved
- rejected
- invalid
以软件生命周期的一部分为例:
start=>start: 开始|past
requirementAnalysis=>operation: 需求分析|past
design=>operation: 软件设计|past
coding=>operation: 编码|past
selfTestingPased=>condition: 自测通过?|approved
debug=>operation: debug|invalid
submitTestingPased=>condition: 提测通过?|rejected
modifyBug=>operation: 修bug|current
deploy=>operation: 部署|future
end=>end: 结束|futurestart->requirementAnalysis->design->coding->selfTestingPased
selfTestingPased(no)->debug(right)->selfTestingPased
selfTestingPased(yes)->submitTestingPased
submitTestingPased(yes)->deploy->end
submitTestingPased(no)->modifyBug(right)->submitTestingPased
箭头高亮
可以通过高亮某些箭头来标记出主流程:
start=>start: 开始
loginInfo=>inputoutput: 登录数据
verifyLogin=>subroutine: 登录验证
isSuccess=>condition: 验证成功?
respondSuccess=>operation: 响应成功
responseFailure=>operation: 响应失败
end=>end: 结束start->loginInfo->verifyLogin->isSuccess
isSuccess(yes)->respondSuccess->end
isSuccess(no)->responseFailure->endstart@>loginInfo({"stroke":"Red"})@>verifyLogin({"stroke":"Red"})@>isSuccess({"stroke":"Red"})@>respondSuccess({"stroke":"Red"})@>end({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})
参考链接:flowchat
Markdown流程图相关推荐
- markdown流程图画法小结
markdown流程图画法小结 markdown 画图 流程图 最简单的流程图为例 ```mermaid! graph TD A --> B //在没有(),[].{}等括号的情况之下,图标默 ...
- markdown流程图多分支_提高生产力的好工具MarkDown语法学习
Python自动化测试开发班3月7号开课,2月15号前报名优惠800 什么是Markdown Markdown 是一种用来写作的轻量级「标记语言」,它用简洁的语法代替排版,而不像一般我们用 ...
- markdown 流程图js_科学网—让Markdown支持ASCII流程图和JavaScript流程图 - 李继存的博文...
2014-12-25 12:08:34 计算机领域中一直存在两种不同的理念并彼此竞争, 可视化与可控化, 或称为所见即所得与所愿即所得. 前者是Windows的典型做法, 而后者是Linux的典型理念 ...
- markdown 流程图js_MarkDown 流程图示例
后知后觉的我,最近才知道MarkDown支持mermaid语法,可以用MarkDown画流程图! 犹记得当初做毕业设计时,自己用Word插入一个个形状再插入一条条线的方式作图,流程稍微有点改动就要牵一 ...
- markdown 流程图_Markdown 进阶技能:用代码画流程图(编程零基础也适用)
这篇文章主要介绍 流程图基础 以写代码的方式画流程图 相比于使用画图工具拖拽画图,用代码画图有什么好处? 首先,这种方式非常轻便,无需安装复杂的画图应用.Typora 等多种 Markdown 编辑器 ...
- markdown 流程图_测试了12款Markdown编辑器,推荐一个最好用的!
有很多喜欢写博客的小伙伴问我,这个代码笔记的格式怎么弄的简洁又好看,虽然csdn里面有Markdown的书写模式,但是我还是想推荐一款比较好用的写笔记的编辑器 - Typora. 相信很多小伙伴都在使 ...
- markdown 流程图js_在Markdown中用mermaid语法绘制图表
Python数据挖掘与文本分析&Stata应用能力提升与实证前沿云特训~ Mermaid可以用文本方式绘制图表和流程图,相比Visio而言更加的轻量便捷,此外Markdown内部支持Merma ...
- markdown 流程图js_如何在Markdown中画流程图
如何在Markdown中画流程图呢?当然是用mermaid了,mermaid支持三种图形的绘制, 分别是流程图, 时序图和甘特图, 本篇文章只介绍了mermaid中流程图在markdown的使用(现在 ...
- Markdown流程图绘制
文章目录 一.语法 1. 标准流程图 1)定义元素 2)建立连接 2. 简约流程图 二.建议 一.语法 流程图的绘制主要基于flowchart.js和mermaid.js.当需要在Markdown中绘 ...
最新文章
- java企业号回调模式,微信公众平台企业号开发—开启回调模式
- [机器学习]回归--Polinomial Regression 多项式回归
- java面向对象使用字符串_java面向对象中的String类中12种常用的方法
- Nginx性能提升--引入线程池性能提升9倍
- PowerGUI 如何调整字体
- 有些歌,放在这慢慢听
- springboot系列(二十七):如何实现word携带图片导出?这你得会|超级详细,建议收藏
- c语言中的各种“零”
- 前端开发:npm install 报错npm ERR! Cannot read property ‘extraneous‘ of undefined的解决方法
- 【GNN报告】北邮石川组
- 闲扯资管创新1:短债基金和摊余成本法定开债基
- Linux 命令(211)—— ssh-agent 命令
- MO call与MT call
- android 内存溢出问题分析
- 原生JS实现无限滚动瀑布流布局
- 哪些情况下会被银行拒贷?买房真的凑齐首付就够了吗?
- 17岁高中生证明27年数学难题,「他的论文值得任何数学家为之自豪」
- ORB-SLAM3运行时出现“段错误(核心已转储)”解决方案
- 微型计算机的软 硬件组成,微型计算机的软、硬件组成及主要性能指标
- [转]2004手机游戏年终点评