像写 Markdown 一样画出流程图

所谓“千言万语不如一张图”，的确，有时候通过流程图可以更清楚地传递信息。今天这篇文章分享一下如何像写 Markdown 一样画出流程图。

方法就是 flowchart.js: https://flowchart.js.org/

flowchart.js 仅需几行代码即可在 Web 上完成流程图的构建，可以从文字表述中画出简单的 SVG 流程图，也可以画出彩色的图表。

Draws simple SVG flow chart diagrams from textual representation of the diagram https://flowchart.js.org/

部署方法：

1) flowchart.js 依赖于 Raphael，首先下载最新 Raphael 并引用，例如：

<script src="raphael-min.js">

2) 下载最新 flowchart.js 并引用，例如：

<script src="flowchart.js"></script>

3) flowchart.js 解析（其中 the code definition 为 flowchart.js 语法）：

<div id="diagram"></div>
<script>
  var diagram = flowchart.parse("the code definition");
  diagram.drawSVG('diagram');

  // you can also try to pass options:

  diagram.drawSVG('diagram', {
                              'x': 0,
                              'y': 0,
                              'line-width': 3,
                              'line-length': 50,
                              'text-margin': 10,
                              'font-size': 14,
                              'font-color': 'black',
                              'line-color': 'black',
                              'element-color': 'black',
                              'fill': 'white',
                              'yes-text': 'yes',
                              'no-text': 'no',
                              'arrow-end': 'block',
                              'scale': 1,
                              // style symbol types
                              'symbols': {
                                'start': {
                                  'font-color': 'red',
                                  'element-color': 'green',
                                  'fill': 'yellow'
                                },
                                'end':{
                                  'class': 'end-element'
                                }
                              },
                              // even flowstate support ;-)
                              'flowstate' : {
                                'past' : { 'fill' : '#CCCCCC', 'font-size' : 12},
                                'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'},
                                'future' : { 'fill' : '#FFFF99'},
                                'request' : { 'fill' : 'blue'},
                                'invalid': {'fill' : '#444444'},
                                'approved' : { 'fill' : '#58C4A3', 'font-size' : 12, 'yes-text' : 'APPROVED', 'no-text' : 'n/a' },
                                'rejected' : { 'fill' : '#C45879', 'font-size' : 12, 'yes-text' : 'n/a', 'no-text' : 'REJECTED' }
                              }
                            });
</script>

实例一的书写格式：

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

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

实例二：

实例二的书写格式：

st=>start: Start|past:>https://www.google.com[blank]
e=>end: End|future:>https://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>https://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|future

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e

flowchart.js 语法：

定义元素有 6 种类型：start end operation subroutine condition inputoutput，可分别使用缩写代替，例如 st e op<i> sub<i> cond<i> io。

st=>start: Start 结构定义了一个元素的具体内容。其语法是 tag=>type: content:>url，其中 content 是流程图文本框中的描述内容，: 后面表示内容，中英文均可。特别注意，冒号与文本之间一定要有个空格。url 是一个链接，与元素框中的文本相绑定（:> 后面就是对应的 url 链接），点击文本时可以通过链接跳转到 url 指定页面。

连接流程图元素阶段的语法就简单多了，直接用 -> 来连接两个元素。几点说明如下：

• 使用 -> 来连接两个元素
• 对于 condition 类型，有 yes 和 no 两个分支，如示例中的 cond(yes) 和 cond(no)
• 每个元素可以制定分支走向，默认向下，也可以用 right 指向右边，如 sub1(right)

最后附上 flowchart.js 的 github 地址：https://github.com/adrai/flowchart.js