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
Created with Raphaël 2.1.2 开始 登录数据 登录验证 验证成功? 响应成功 结束 响应失败 yes no

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

方向调整

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

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
Created with Raphaël 2.1.2 start operation1 success? operation2 结束 operation3 operation4 yes no

这种情况下可以使用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
Created with Raphaël 2.1.2 start operation1 success? operation2 结束 operation3 operation4 yes no

如果给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
Created with Raphaël 2.1.2 start operation1 success? operation2 结束 operation3 operation4 yes no

状态标记

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

Markdown流程图_第1张图片

箭头高亮

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

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"})

Markdown流程图_第2张图片

参考链接:flowchat

你可能感兴趣的:(工具)