html画流程图插件,基于SVG的流程图插件Flowchart.js

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

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' }

}

});

相关链接