码云 Gitee IDE 全新上线——支持 Git 管理的轻量在线编码环境
0 Watch 42 Star 136 Fork 42

lianglongqun / flowable-diagramJavaScript

加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
使用snap.svg生成flowable工作流流程图
llq 最后提交于 修复bug
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md 2.04 KB

flowable-diagram

使用snap.svg生成flowable工作流流程图

使用

引入脚本文件

<script src="snap.svg.js"></script>
<script src="diagram.js"></script>

定义流程图并渲染

流程图包含节点(开始节点, 任务节点, 判断节点和结束节点), 线条(直线和折线)和表格布局

<svg id="svg"></svg>
<script>

    var data = {

        "cellPadding" : 15,
        "tableMargin" : 10,

        "nodes": [
            {
                "type": "start",
                "cell" : "0,0"
            },
            {
                "type" : "task",
                "cell" : "1,0",
                "id" : "manager",
                "name" : "直属上司审批"
            },
            {
                "type" : "decision",
                "id" : "decision",
                "name" : "请假天数是否大于3",
                "cell" : "2,0",
                "w" : 180
            },
            {
                "type" : "task",
                "cell" : "3,1",
                "id" : "director",
                "name" : "总监审批",
                "highlight" : true
            },
            {
                "type": "end",
                "cell" : "4,0"
            }
        ],
        "lines": [
            {
                "from": "start",
                "to": "manager"
            },
            {
                "from": "manager",
                "to": "decision"
            },
            {
                "from": "decision",
                "to": "director",
                "direction" : "x",
                "text" : "是"
            },
            {
                "from": "decision",
                "to": "end",
                "text" : "否"
            },
            {
                "from": "director",
                "to": "end",
                "direction" : "y"
            }
        ]
    };

    var flow = new Flow("svg", data);
    flow.renderByTableLayout();

</script>

示例

multisources

项目点评 ( 7 )

你可以在登录后,发表评论

搜索帮助