flawchart.js笔记及语法

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.comop1=>operation: 执行框|pastop2=>operation: 执行框|currentsub1=>subroutine: 子程序|invalidcond=>condition: 判断框1|yes:>http://www.google.comc2=>condition: 判断框2|rejectedio=>inputoutput: 输入输出框|request//连接元素st->op1(right)->condcond(yes, right)->c2cond(no)->sub1(left)->op1c2(yes)->io->ec2(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是可选的方向