什么是流程图

  • 流程图是对算法、过程、流程的一种图像表示,多用于技术设计、文档编写、商业简报等场景。
  • 用图框表示各种类型的操作,在框内写出各个步骤,用带箭头的线连接起来它们以表示执行的先后顺序。
  • 直观形象,易于理解。有时候也被称之为输入-输出图。

流程图可以作为一个markdown扩展插件,并不是所有的Markdown编辑器都支持流程图,各个编辑器语法存在细微差异。开发者目录的流程图渲染引擎是flowchart.js1,只需几行简单的代码就生成了一个优雅的流程图。

示例

st=>start: Start:>http://www.rdtoc.com[blank]
e=>end:>http://www.rdtoc.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...
para=>parallel: parallel tasks

st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1
st=>start: Start:>http://www.rdtoc.com[blank]
e=>end:>http://www.rdtoc.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...
para=>parallel: parallel tasks

st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1

语法

流程图相比时序图的语法,复杂一些。在Markdown中,流程图以```flow开头,```结尾,它的语法分为两部分:

  1. 定义元素,列出流程图中的各个实体对象
  2. 连接元素,指定流程图的顺序

定义元素

tag=>type: content:>url
  • tag:流程图的标签,可自定义。
  • type:标签类型,由于标签名称可以自定义,所以依赖type来确定标签的类型,标签类型分为6种:
    1. start:表示程序的开始
    2. end:表示程序的结束
    3. operation:表示程序的处理块
    4. subroutine:表示子程序块
    5. condition:表示程序的条件判断
    6. inputoutput:表示程序的出入输出
  • content:流程图文本框中的描述内容,中英文均可。注意,冒号与文本之间要有至少一个空格
  • url:链接,与框框中的文本绑定,点击文本即可跳转到 url 指定页面

连接元素

连接元素的语法相对简单,直接用 -> 连接两个元素:

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

  1. Flowchart.js 是一个JavaScript库,允许你用文本绘制简单的SVG流程图。