Markdown--绘制流程图(flowchart)

基本流程图

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
 
 

 
 
1
2
3
4
5
6
7
8
9
10
11

注意：冒号和名称之间需要有一个空格。

方向调整

绘制流程图有时会出现比较一言难尽的情况，例如：

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
 
 

 
 
1
2
3
4
5
6
7
8
9
10
11

这种情况下可以使用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
 
 

 
 
1
2
3
4
5
6
7
8
9
10
11

如果给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
 
 

 
 
1
2
3
4
5
6
7
8
9
10
11

状态标记

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: 结束|future

start->requirementAnalysis->design->coding->selfTestingPased
selfTestingPased(no)->debug(right)->selfTestingPased
selfTestingPased(yes)->submitTestingPased
submitTestingPased(yes)->deploy->end
submitTestingPased(no)->modifyBug(right)->submitTestingPased
 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

箭头高亮

可以通过高亮某些箭头来标记出主流程：

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@>loginInfo({"stroke":"Red"})@>verifyLogin({"stroke":"Red"})@>isSuccess({"stroke":"Red"})@>respondSuccess({"stroke":"Red"})@>end({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})
 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13

参考链接：flowchat

转载自：https://blog.csdn.net/u010908723/article/details/79188575#commentsedit