这是用于Web端构建流程图的在线流程设计器，提供js版，Vue版，React版本，但是其为闭源项目。
引入相关包
<!-- 引入.css -->
<link rel="stylesheet" type="text/css" href="./static/plugins/gooFlow1.3/GooFlow.css"/>
<!-- 引入jQuery -->
<script src="static/jquery/jquery-3.3.1.js"></script>
<!-- 引入.js-->
<script type="text/javascript" src="./static/plugins/gooFlow1.3/GooFlow.js"></script>
<!-- 可选(只读编辑)，将流程图左侧工具栏可编辑-->
<script type="text/javascript" src="./static/plugins/gooFlow1.3/GooFunc.js"></script>
<!-- 可选，将流程图导出为图片文件的扩展包 -->
<script type="text/javascript" src="./static/plugins/gooFlow1.3/GooFlow.export.js"></script>
<!-- 可选，将流程图输出打印-->
<script type="text/javascript" src="./static/plugins/gooFlow1.3/plugin/printThis.js"></script>
<!-- 可选，将流程图另存为PDF的扩展包-->
<script type="text/javascript" src="./static/plugins/gooFlow1.3/plugin/html2canvas.js"></script>
<script type="text/javascript" src="./static/plugins/gooFlow1.3/GooFlow.color.js"></script>
<script type="text/javascript" src="./static/plugins/gooFlow1.3/plugin/promise.min.js"></script>
设置面板使用的容器
<div id="demo" style="margin:10px"></div>初始化配置
var property={ width:1200, height:540, toolBtns:["start round mix","end round","task","node","chat","state","plug","join","fork","complex mix"], // 工具栏按钮 haveHead:true, // 头部工具 headLabel:true, // 文件名 headBtns:["new","open","save","undo","redo","reload","print"],//如果haveHead=true，则定义HEAD区的按钮 haveTool:true, // 侧边工具 haveDashed:true, // 虚线 haveGroup:true, // 组织 useOperStack:true }; demo=$.createGooFlow($("#demo"),property); // 初始化面板
基础配置
工具栏title配置
var remark={ cursor:"选择指针", direct:"结点连线", dashed:"关联虚线", start:"入口结点", "end":"结束结点", "task":"任务结点", node:"自动结点", chat:"决策结点", state:"状态结点", plug:"附加插件", fork:"分支结点", "join":"联合结点", "complex":"复合结点", group:"组织划分框编辑开关" }; demo.setNodeRemarks(remark); // 加载title文件加载配置
demo.loadData(jsondata); // 加载文件保存更新配置
flow.onBtnSaveClick = function () { // 保存更新 flow.blurItem(); wholeUpdate({nodes: flow.$nodeData, lines: flow.$lineData}); };
双击头部满屏配置
$('.GooFlow_head').dblclick(function () { fullscreen(); });添加节点，获取焦点，失去焦点，移动节点，删除节点
flow.onItemAdd = onItemAdd; flow.onItemFocus = onItemFocus; flow.onItemBlur = onItemBlur; flow.onItemDel = onItemDel; flow.onItemMove = function () { return true; };
其他配置
demo.onItemRightClick=function(id,type){ return false; //返回false可以阻止原组件自带的双击直接编辑事件 } demo.onItemDbClick=function(id,type){ return false; //返回false可以阻止浏览器默认的右键菜单事件 } demo.onPrintClick=function(){ demo.print(0.8); } // 初始化内容大小内部属性 this.$nodeData this.$lineData 内部方法 this.setName(id, '名称', 'node')；// 设置节点信息 this.setTitle('流程名称');// 设置流程名称 结束 标签：function,结点,false,入门,demo,flow,GooFlow,使用,true From： https://www.cnblogs.com/shiyujian/p/10954016.html