flowchart.js是从表示图的文本中绘制简单的SVG流程图js插件-BFW插件库

flowchart.js是从表示图的文本中绘制简单的SVG流程图js插件

flowchart.js是从表示图的文本中绘制简单的SVG流程图js插件。图表也可以带有颜色视图。流程图的组成是图示+逻辑，所以 flowchart.js 存在元素的定义和元素的连接。

成员=>类型: 内容[:>链接]

示例：
    id_start=>start:        这是一个开始的图例
    id_operation=>operation: 这是一个操作的图例，你可以点击跳转:>https://cn.bing.com
    id_condition=>condition: 这是一个判断的图例
    id_end=>end:       这是一个结束的图例，但我可
                              以随便换行！！

注意：
上面有空格的地方可以输入多个空格（至少要有一个空格）。
但是没有空格的地方一定要连起来（不能添加空格）。

flowchart.js是从表示图的文本中绘制简单的SVG流程图js插件

示例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>flowchart.js · Playground</title>
    <style type="text/css">
        .end-element {
            fill: #FFCCFF;
        }
    </style>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/raphael.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/flowchart.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');
                });
            })();

        };

        function myFunction(event, node) {
            console.log("You just clicked this node:",
                node);
        }

    </script>
</head>
<body>
    <div>
        <textarea id="code" style="width: 100%;" rows="11">
            st=>start: 开始|past:>http://www.bfw.wiki[blank]
            e=>end: 结束:>http://www.bfw.wiki
            op1=>operation: 操作|past:$myFunction
            op2=>operation: 例子|current
            sub1=>subroutine: 另一个任务|invalid
            cond=>condition: 是否?|是:>http://www.bfw.wiki[blank]
            c2=>condition: 好的|否定
            io=>inputoutput: 异常|request
            para=>parallel: 并行任务

            st->op1(right)->cond
            cond(yes, right)->c2
            cond(no)->para
            c2(true)->io->e
            c2(false)->e

            para(path1, bottom)->sub1(left)->op1
            para(path2, right)->op2->e

            st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"})</textarea>
    </div>
    <div>
        <button id="run" type="button">Run</button>
    </div>
    <div id="canvas"></div>
</body>
</html>

官网：http://flowchart.js.org/