gqzt.huaruife.com/statics/admin/pages/scripts/charts-flowchart.js

var ChartsFlowchart = function() {

    var handleDemo1 = function() {

    	var flow = '';

    	flow += 'st=>start: Start:>http://keenthemes.com[blank]' + "\n";
		flow += 'e=>end:>http://keenthemes.com' + "\n";
		flow += 'op1=>operation: My Operation' + "\n";
		flow += 'sub1=>subroutine: My Subroutine' + "\n";;
		flow += 'cond=>condition: Yes' + "\n";
		flow += 'or No?:>http://keenthemes.com' + "\n";
		flow += 'io=>inputoutput: catch something...' + "\n";
		flow += 'st->op1->cond' + "\n";
		flow += 'cond(yes)->io->e' + "\n"; 
		flow += 'cond(no)->sub1(right)->op1';

        var diagram = flowchart.parse(flow);

        diagram.drawSVG('diagram_1', {
            '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'
                }
            }
        });
    }

    var handleDemo2 = function() {

    	var flow = '';

    	flow += 'st=>start: Start:>http://keenthemes.com[blank]' + "\n";
		flow += 'st=>start: Start|past:>http://keenthemes.com[blank]' + "\n";
		flow += 'e=>end: End|future:>http://keenthemes.com' + "\n";
		flow += 'op1=>operation: My Operation|past' + "\n";
		flow += 'op2=>operation: Stuff|current' + "\n";
		flow += 'sub1=>subroutine: My Subroutine|invalid' + "\n";
		flow += 'cond=>condition: Yes' + "\n";
		flow += 'or No?|approved:>http://keenthemes.com' + "\n";
		flow += 'c2=>condition: Good idea|rejected' + "\n";
		flow += 'io=>inputoutput: catch something...|future' + "\n";
		flow += 'st->op1(right)->cond' + "\n";
		flow += 'cond(yes, right)->c2' + "\n";
		flow += 'cond(no)->sub1(left)->op1' + "\n";
		flow += 'c2(yes)->io->e' + "\n";
		flow += 'c2(no)->op2->e' + "\n";

        var diagram = flowchart.parse(flow);

        diagram.drawSVG('diagram_2', {
            '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'
                }
            }
        });
    }

    return {

        init: function() {
            handleDemo1();
            handleDemo2();
        }

    };

}();

jQuery(document).ready(function() {
    ChartsFlowchart.init();
});