守望的麦子

像写 Markdown 一样画出流程图

2017-05-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 并引用,例如:

<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 指定页面。

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

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

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

最近更新: