GooFlow流程图绘制插件

GooFlow流程图编辑器使用详解

最新推荐文章于 2025-10-24 09:42:18 发布

原创最新推荐文章于 2025-10-24 09:42:18 发布 · 1.8w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#插件

前端插件专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个基于Web的流程图编辑器——GooFlow的使用方法。通过设置属性，可以自定义编辑器的功能，如按钮、工具栏等，并通过加载JSON数据来展示流程图。此外，还提供了导出绘制结果为JSON格式的功能。

var property = {
    width: 1200,
    height: 600,
    toolBtns: ["start round", "end round", "task round", "node", "chat", "state", "plug", "join", "fork", "complex mix"],
    haveHead: true,
    headBtns: ["new", "open", "save", "undo", "redo", "reload"], //如果haveHead=true，则定义HEAD区的按钮
    haveTool: true,
    haveGroup: true,
    useOperStack: true
};
var remark = {
    cursor: "选择指针",
    direct: "结点连线",
    start: "入口结点",
    "end": "结束结点",
    "task": "任务结点",
    node: "自动结点",
    chat: "决策结点",
    state: "状态结点",
    plug: "附加插件",
    fork: "分支结点",
    "join": "联合结点",
    "complex mix": "复合结点",
    group: "组织划分框编辑开关"
};
var demo;
$(document).ready(function() {
    demo = $.createGooFlow($("#demo"), property);
    demo.setNodeRemarks(remark);
    //demo.onItemDel=function(id,type){
    //	return confirm("确定要删除该单元吗?");
    //}
    demo.loadData(jsondata);
});
var out;
function Export() {
    document.getElementById("result").value = JSON.stringify(demo.exportData());
}

以json格式在线导出绘制结果