GooFlow入门级使用

GooFlow api

https://gooflow.xyz/docs

demo查看地址

http://www.17sucai.com/pins/26954.html

效果预览

代码展示（希望水品不要太低，我的代码使用业务地址的，自己需要修改）

html

js-data(数据)

var jsondata = {
    "title": "手机上网套餐办理",
    "nodes": {
        "demo_node_1": {"name": "子树入口", "left": 295, "top": 0, "type": "start round", "width": 24, "height": 24},
        "demo_node_2": {"name": "广告语", "left": 256, "top": 79, "type": "state", "width": 86, "height": 24},
        "demo_node_3": {"name": "菜单", "left": 265, "top": 146, "type": "join", "width": 86, "height": 24},
        "demo_node_7": {"name": "流量叠加包", "left": 433, "top": 149, "type": "join", "width": 109, "height": 24},
        "demo_node_8": {"name": "手机上网套餐", "left": 247, "top": 246, "type": "join", "width": 117, "height": 25},
        "demo_node_9": {"name": "夜猫套餐", "left": 64, "top": 253, "type": "join", "width": 86, "height": 24},
        "demo_node_15": {"name": "套餐及上网流量剩余查询", "left": 93, "top": 140, "type": "node", "width": 119, "height": 36},
        "demo_node_17": {"name": "10元夜猫", "left": 106, "top": 358, "type": "node", "width": 86, "height": 24},
        "demo_node_18": {"name": "5元夜猫", "left": 2, "top": 363, "type": "node", "width": 86, "height": 24},
        "demo_node_21": {"name": "2元叠加包", "left": 591, "top": 2, "type": "node", "width": 86, "height": 24},
        "demo_node_22": {"name": "5元叠加包", "left": 598, "top": 45, "type": "node", "width": 86, "height": 24},
        "demo_node_23": {"name": "10元叠加包", "left": 603, "top": 102, "type": "node", "width": 102, "height": 24},
        "demo_node_24": {"name": "20元叠加包", "left": 606, "top": 147, "type": "node", "width": 106, "height": 24},
        "demo_node_25": {"name": "30元叠加包", "left": 597, "top": 224, "type": "node", "width": 113, "height": 24},
        "demo_node_26": {"name": "5元套餐", "left": 87, "top": 448, "type": "node", "width": 86, "height": 24},
        "demo_node_27": {"name": "8元套餐", "left": 210, "top": 405, "type": "node", "width": 86, "height": 24},
        "demo_node_28": {"name": "10元套餐", "left": 272, "top": 451, "type": "node", "width": 91, "height": 24},
        "demo_node_29": {"name": "20元套餐", "left": 341, "top": 412, "type": "node", "width": 91, "height": 24},
        "demo_node_30": {"name": "30元套餐", "left": 460, "top": 437, "type": "node", "width": 91, "height": 24},
        "demo_node_31": {"name": "50元套餐", "left": 580, "top": 464, "type": "node", "width": 92, "height": 24},
        "demo_node_32": {"name": "GPRS功能办理", "left": 683, "top": 464, "type": "node", "width": 130, "height": 24}
    },
    "lines": {
        "demo_line_4": {"type": "sl", "from": "demo_node_1", "to": "demo_node_2", "name": ""},
        "demo_line_5": {"type": "sl", "from": "demo_node_2", "to": "demo_node_3", "name": ""},
        "demo_line_11": {"type": "sl", "from": "demo_node_3", "to": "demo_node_7", "name": "2"},
        "demo_line_12": {"type": "sl", "from": "demo_node_3", "to": "demo_node_8", "name": "1"},
        "demo_line_13": {"type": "sl", "from": "demo_node_3", "to": "demo_node_9", "name": "3"},
        "demo_line_16": {"type": "sl", "from": "demo_node_3", "to": "demo_node_15", "name": "4"},
        "demo_line_19": {"type": "sl", "from": "demo_node_9", "to": "demo_node_17", "name": "2"},
        "demo_line_20": {"type": "sl", "from": "demo_node_9", "to": "demo_node_18", "name": "1"},
        "demo_line_33": {"type": "sl", "from": "demo_node_7", "to": "demo_node_21", "name": "1"},
        "demo_line_34": {"type": "sl", "from": "demo_node_7", "to": "demo_node_22", "name": "2"},
        "demo_line_35": {"type": "sl", "from": "demo_node_7", "to": "demo_node_23", "name": "3"},
        "demo_line_36": {"type": "sl", "from": "demo_node_7", "to": "demo_node_24", "name": "4"},
        "demo_line_37": {"type": "sl", "from": "demo_node_7", "to": "demo_node_25", "name": "5"},
        "demo_line_39": {"type": "sl", "from": "demo_node_8", "to": "demo_node_26", "name": "1"},
        "demo_line_42": {"type": "sl", "from": "demo_node_8", "to": "demo_node_29", "name": "4"},
        "demo_line_43": {"type": "sl", "from": "demo_node_8", "to": "demo_node_30", "name": "5"},
        "demo_line_44": {"type": "sl", "from": "demo_node_8", "to": "demo_node_31", "name": "6"},
        "demo_line_45": {"type": "sl", "from": "demo_node_8", "to": "demo_node_32", "name": "7"},
        "demo_line_46": {"type": "sl", "from": "demo_node_8", "to": "demo_node_27", "name": "2"},
        "demo_line_47": {"type": "sl", "from": "demo_node_8", "to": "demo_node_28", "name": "3"}
    },
    "areas": {},
    "initNum": 48
};

js-render(渲染)

/*
 * createAuthor:jaden.liu
 * createTime:2018-04-30
 * version:1.0.0
 */
var options = {
    width: 800,
    height: 500,
    haveHead: true,//是否需要展示标题及顶部按钮的顶部栏。
    headLabel: true,//是否显示标题
    initLabelText: '你好吗',//初始化时标题的内容，headLabel==true时有效。
    headBtns: ["new", "open", "save", "undo", "redo", "reload"],//如果haveHead=true，则定义HEAD区的按钮
    haveTool: true,//是否需要左边的工具栏，这决定了渲染完成后是编辑模式还是只读模式。
    toolBtns: ["start round mix", "end round", "task", "node", "chat", "state", "plug", "join", "fork", "complex mix"],
    haveGroup: true,//是否有节点连线编辑与分组泳道编辑两种工作区状态的切换开关。即是否有展示或编辑分组泳道的功能。
    useOperStack: true,//是否要使用事务序列管理工作区内的操作事务，选true时将开启撤销undo和重做redo的功能，该设定只在编辑模式下有效
};
var gooflowBean = GooFlow.init("#demo", options);
//左侧工具栏鼠标悬停提示
var remark = {
    cursor: "选择指针",
    direct: "结点连线",
    start: "入口结点",
    "end": "结束结点",
    "task": "任务结点",
    node: "自动结点",
    chat: "决策结点",
    state: "状态结点",
    plug: "附加插件",
    fork: "分支结点",
    "join": "联合结点",
    "complex mix": "复合结点",
    group: "组织划分框编辑开关",
};
gooflowBean.setNodeRemarks(remark);
//加载数据 jsondata js对象
gooflowBean.loadData(jsondata);
//导出数据
//gooflowBean.exportData()

总结：多看api和网上的案例