flawchart.js语法跟markdown流程图的语法很像。我也是查看网上资料的,参考链接在这:http://blog.csdn.net/aizhaoyu/article/details/44350821#comments
注意:如果是JS写定义和连接,每一行后面需要加换行符 /n
//定义元素
st=>start: 开始|past:>http://www.google.com[blank]
e=>end: 结束:>http://www.google.com
op1=>operation: 执行框|past
op2=>operation: 执行框|current
sub1=>subroutine: 子程序|invalid
cond=>condition: 判断框1|yes:>http://www.google.com
c2=>condition: 判断框2|rejected
io=>inputoutput: 输入输出框|request
//连接元素
st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
//--这边是引用和自定义---
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.0/raphael-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://flowchart.js.org/flowchart-latest.js"></script>
<script>
window.onload = function () {
var btn = document.getElementById("run"),
cd = document.getElementById("code"),
chart;
(btn.onclick = function () {
var code = cd.value;
if (chart) {
chart.clean();
}
chart = flowchart.parse(code);
chart.drawSVG('canvas', {
// 'x': 30,
// 'y': 50,
'line-width': 3,
'maxWidth': 3,//ensures the flowcharts fits within a certian width
'line-length': 50,
'text-margin': 10,
'font-size': 14,
'font': 'normal',
'font-family': 'Helvetica',
'font-weight': 'normal',
'font-color': 'black',
'line-color': 'black',
'element-color': 'black',
'fill': 'white',
'yes-text': 'yes',
'no-text': 'no',
'arrow-end': 'block',
'scale': 1,
'symbols': {
'start': {
'font-color': 'red',
'element-color': 'green',
'fill': 'yellow'
},
'end':{
'class': 'end-element'
}
},
'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' }
}
});
$('[id^=sub1]').click(function(){
alert('info here');
});
})();
};
</script>
流程图的语法大体分为两段,第一段用来定义元素,第二段用来连接元素 ,如
1. 定义元素
tag=>type: content:>url|option
- tag可以当作定义的一个标签,在第二段连接元素时用
- type是这个标签的类型,从上段内容看有6中类型,非别为:
start //开始
end //结束
operation //执行框
subroutine //子程序(一般用不上)
condition //判断框
inputoutput //输入输出框
- content 就是流程图框内显示的内容
- url就是流程图框内可点击的链接
- option就是可自定义的属性(可以在js代码里添加),比如你可以给框框添加颜色(如“执行框|past” past就是你可自定义的颜色)
2. 连接元素
tag->tag(option)->tag
- 用->来连接两个元素
- tag就是第一步定义的标签名字,option是可选的方向