基本流程图
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: 结束|future
start->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->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"})
参考链接:flowchat