flowable-diagram
/
demo-tablelayout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="snap.svg.js"></script>
    <script src="diagram.js"></script>
</head>
<body>
<style>
    #svg {
        border : 1px solid #000000;
    }
</style>
<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>
</body>
</html>