守望的麦子

像写 Markdown 一样画出流程图

2017-5-31    大连    /others/2017/05/31/fc.html others

所谓“千言万语不如一张图”,的确,有时候通过流程图可以更清楚地传递信息。今天这篇文章分享一下如何像写 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 并引用,例如:

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

2) 下载最新 flowchart.js 并引用,例如:

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

3) flowchart.js 解析(其中 the code definition 为 flowchart.js 语法):

 1 <div id="diagram"></div>
 2 <script>
 3   var diagram = flowchart.parse("the code definition");
 4   diagram.drawSVG('diagram');
 5 
 6   // you can also try to pass options:
 7 
 8   diagram.drawSVG('diagram', {
 9                               'x': 0,
10                               'y': 0,
11                               'line-width': 3,
12                               'line-length': 50,
13                               'text-margin': 10,
14                               'font-size': 14,
15                               'font-color': 'black',
16                               'line-color': 'black',
17                               'element-color': 'black',
18                               'fill': 'white',
19                               'yes-text': 'yes',
20                               'no-text': 'no',
21                               'arrow-end': 'block',
22                               'scale': 1,
23                               // style symbol types
24                               'symbols': {
25                                 'start': {
26                                   'font-color': 'red',
27                                   'element-color': 'green',
28                                   'fill': 'yellow'
29                                 },
30                                 'end':{
31                                   'class': 'end-element'
32                                 }
33                               },
34                               // even flowstate support ;-)
35                               'flowstate' : {
36                                 'past' : { 'fill' : '#CCCCCC', 'font-size' : 12},
37                                 'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'},
38                                 'future' : { 'fill' : '#FFFF99'},
39                                 'request' : { 'fill' : 'blue'},
40                                 'invalid': {'fill' : '#444444'},
41                                 'approved' : { 'fill' : '#58C4A3', 'font-size' : 12, 'yes-text' : 'APPROVED', 'no-text' : 'n/a' },
42                                 'rejected' : { 'fill' : '#C45879', 'font-size' : 12, 'yes-text' : 'n/a', 'no-text' : 'REJECTED' }
43                               }
44                             });
45 </script>

实例一:

实例一的书写格式:

 1 st=>start: Start:>https://www.google.com[blank]
 2 e=>end:>https://www.google.com
 3 op1=>operation: My Operation
 4 sub1=>subroutine: My Subroutine
 5 cond=>condition: Yes
 6 or No?:>https://www.google.com
 7 io=>inputoutput: catch something...
 8 
 9 st->op1->cond
10 cond(yes)->io->e
11 cond(no)->sub1(right)->op1

实例二:

实例二的书写格式:

 1 st=>start: Start|past:>https://www.google.com[blank]
 2 e=>end: End|future:>https://www.google.com
 3 op1=>operation: My Operation|past
 4 op2=>operation: Stuff|current
 5 sub1=>subroutine: My Subroutine|invalid
 6 cond=>condition: Yes
 7 or No?|approved:>https://www.google.com
 8 c2=>condition: Good idea|rejected
 9 io=>inputoutput: catch something...|future
10 
11 st->op1(right)->cond
12 cond(yes, right)->c2
13 cond(no)->sub1(left)->op1
14 c2(yes)->io->e
15 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 指定页面。

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

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

关于作者
麦子,80 后,现从事通信行业。安卓玩家一个人的书房朗读者。
MRJENGLISH
jsntn
jasonwtien
jasonwtien
更多…… /about.html

最近更新: