关键词

流程图插件

Flowchart.js可视化流程图插件使用方法

在软件开发、项目管理等行业中,流程图是常用的一种工具,用于描述流程和流转规则。然而,手动绘制流程图常常耗时费力,尤其是需要修改时更加麻烦。许多流程图插件应运而生,以解决绘制和编辑流程图的难题。

流程图插件使流程图的绘制变得简单而直观。用户可以使用预定义的符号或绘制自定义符号来构建流程图。同时,用户还可以编辑所有元素的属性,如大小、位置和颜色。流程图插件还提供了连接线和箭头等基本的连线元素,并且拥有智能排列功能,可以将元素自动对齐和分布整齐。

您也可以从官方网站 去下载 下载Flowchart.js文件到本地,通过相对路径或绝对路径进行引用。

以下是一个简单的使用Flowchart.js绘制流程图的JavaScript代码示例:

<!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 src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.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 src="../release/flowchart.min.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"  rows="11">
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: My Operation|past:$myFunction
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request
para=>parallel: parallel tasks

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>

该示例中使用了Flowchart.js提供的parse()方法将一个字符串形式的流程图定义进行解析。通过drawSVG()方法将解析后得到的对象绘制成SVG图形,并指定了一些样式和属性。

上面的代码示例绘制的是一个包含起点、操作、判断和终点的简单流程图,其中判断有两个选项“Yes”和“No”,分别对应着不同的输出路径。在drawSVG()方法中还指定了各种状态的显示效果,如“过去”、“当前”、“未来”、“请求”等,以及不同状态下的文本内容和颜色等。

本文链接:http://task.lmcjl.com/news/13250.html

展开阅读全文