flawchart.js笔记及语法

flawchart.js语法跟markdown流程图的语法很像。我也是查看网上资料的，参考链接在这：http://blog.youkuaiyun.com/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是可选的方向