官方网址:https://gooflow.xyz/
GooFlow已转为闭源项目,github上不再提供clone和下载。
试用版请访问gitee上的[项目主页]( https://gitee.com/gooflow/gooflow )
特点
- 跨领域:流程图设计器不止用在电信领域,在其它需要IT进行技术支持的领域中都有重大作用.
- 页面顶部栏、左边侧边栏均可自定义;
- 当左边的侧边栏设为不显示时,为只读状态,此时的视图区可当作是一个查看器而非编辑器。
- 当前最新版本已全部使用自定义的阿里巴巴矢量图标库,可不再需要一张用来显示图标样式的图片。
- 侧边工具栏除了基本和一些流程节点按钮外,还自定义新的节点按钮,自定义节点都可以有自有的图标、类型名称,定义后在使用可可在工作区内增加这些自定义节点。
- 顶部栏可显示流程图数据组的标题,也可提供一些常用操作按钮。
- 顶部栏的按钮,除了撤销、重做按钮外,其余按钮均可自定义点击事件。
- 可画直线、折线;折线还可以左右/上下移动其中段。
- 具有区域划分功能,能让用户更直观地了解哪些节点及其相互间的转换,是属于何种自定义区域内的。
- 具有标注功能,用橙红色标注某个结点或者转换线,一般用在展示流程进度时。
- 能直接双击结点、连线、分组区域中的文字进行编辑
- 在对结点、连线、分组区域的各种编辑操作,如新增/删除/修改名称/重设样式或大小/移动/标注时,均可捕捉到事件,并触发自定义事件,如果自定义事件执行的方法返回FALSE,则会阻止操作。
- 具有操作事务序列控制功能,在工作区内的各种有效操作都能记录到一个栈中,然后可以进行撤销(undo())或重做(redo()),像典型的C/S软件一样。
- 能将流程图以png图片的格式导出并下载(纯JS实现,但不支持IE9及以下浏览器)
一、入门使用:参考Jquery版API文档
1、引入 js 和 css 文件
<!-- 引入.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>
2、创建 div 设置参数(自定义参数): width 百分比和像素都可以
<div id="flowsuperviseTemp" style="width:750px;min-height:700px;margin:5px;float:left"></div>
3、 js 中初始化 GooFlow 实例
<script type="text/javascript">
var options = {
//width:800,
//height:500,
//initLabelText: "流程图",
toolBtns: ["start round mix", "end round mix", "task", "node", "chat", "state", "plug", "join", "fork", "complex mix"],
haveHead: true,
headLabel: true,
headBtns: ["new", "save", "undo", "redo", "reload", "print", "exportImg"],//如果haveHead=true,则定义HEAD区的按钮
haveTool: true,
haveDashed: true,
haveGroup: true,
useOperStack: true
};
//设定左侧工具栏中每一种节点或按钮的说明文字
GooFlow.prototype.remarks.toolBtns = {
cursor: "选择指针",
direct: "连接线",
dashed: "连接线(虚线)",
start: "开始节点",
"end": "结束节点",
"task": "事项节点",
group: "区块编辑开关"
};
//设定顶部栏中每个按钮的说明文字
GooFlow.prototype.remarks.headBtns = {
"new": "新建流程",
open: "打开流程",
save: "保存结果",
undo: "撤销",
redo: "重做",
reload: "重置流程",
print: "打印流程图",
exportImg: "导出流程图"
};
GooFlow.prototype.remarks.extendRight = "工作区向右扩展";
GooFlow.prototype.remarks.extendBottom = "工作区向下扩展";
var superviseDataStr; //全局模板初始流程图数据字符串
var flowsuperviseTemp; //GooFlow实例本身
//模拟数据
//superviseDataStr = "";
$(document).ready(function () {
flowsuperviseTemp = $.createGooFlow($("#flowsuperviseTemp"), options); //用jquery扩展方法初始化GooFlow
//flowsuperviseTemp = GooFlow.init("#flowsuperviseTemp",options);; //用jquery扩展方法初始化GooFlow
flowsuperviseTemp.setTitle("事项流程图");
//flowsuperviseTemp.loadData($.parseJSON(superviseDataStr)); //初始流程图数据
//组件获得焦点事件
flowsuperviseTemp.onItemFocus = function(id, type){
alert(id + ":" + type);
return true;
}
//组件失去焦点事件
flowsuperviseTemp.onItemBlur=function(id, type){
alert(id + ":" + type);
return true;
};
//保存按钮事件
flowsuperviseTemp.onBtnSaveClick = function () {
saveflowsupervise();
}
//组件删除事件(默认是取消的)
flowsuperviseTemp.onItemDel=function(id,type){
this.blurItem(); //取消所选节点/连线被选定的状态。
return true;
}
//重置按钮事件
flowsuperviseTemp.onFreshClick = function () {
flowsuperviseTemp.clearData();
//flowsuperviseTemp.loadData($.parseJSON(superviseDataStr));
}
//打印事件
flowsuperviseTemp.onPrintClick = function () {
flowsuperviseTemp.print(1);
}
//导出图片事件
var exportName = "事项流程图";
//flowsuperviseTemp.setNodeRemarks(GooFlow.prototype.remarks.toolBtns);
flowsuperviseTemp.onExportImgClick = function () {
flowsuperviseTemp.exportDiagram(exportName);
}
});
</script>
<script type="text/javascript">
function saveflowsupervise() {
var nodeCount = flowsuperviseTemp.$nodeCount; //节点数(包含开始结束节点数)
if(nodeCount > 0){
var flowchart = JSON.stringify(flowsuperviseTemp.exportData());
alert(flowchart);
}
}
</script>
访问结果: 可编辑自己的流程设计:(也可以初始化流程数据,注意数据格式)
总结:多看 API 和网上的案例