程序员绘图神器-文字生成流程图的插件flowchart.js

程序员绘图神器-文字生成流程图的插件flowchart.js

程序员绘图神器-文字生成流程图的插件flowchart.js

大家在日常工作中需要用到流程图,一般通过word就可以画出流程图,今天介绍一种通过文字生成流程图的js插件,flowchart.js,非常强大,他的原理就是根据文字的结构生成svg图形文件,好了,我们来看看吧。

对于程序员来说这个写几个就能绘制流程图,是不是很牛掰呢,它就是flowchart,js,flowchart.js 是一款文字描述转换流程图的js插件,他的文字描述定义格式如下:

tag=>type: content:>url

tag:标签,用于连接元素时使用
type:该标签的类型。共有6种类型如下:

start
end
operation
subroutine
condition
inputoutput

content:流程语句中放置的内容
type:与content之间一定要有一个空格,否则会出问题!
url:链接,与流程语句绑定

下面我们举个例子

st=>start: 开始|past:>http://www.bfw.wiki[blank]
e=>end: 结束:>http://www.bfw.wiki
op1=>operation: 操作|past:$myFunction
op2=>operation: 例子|current
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

上面的描述会生成如下的流程图

程序员绘图神器-文字生成流程图的插件flowchart.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="http://repo.bfw.wiki/bfwrepo/js/raphael.min.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="http://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');

                $('[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>



{{collectdata}}

网友评论0

阿里云香港主机,免备案大优惠 打开浏览器开发html,体验云开发的乐趣bfweditor 打开浏览器即可开发php,bfwstudio
其他文章