基于JsPlumb的流程设计器FlowDesigner

地址：https://gitee.com/openEA/FlowDesigner

项目介绍

FlowDesigner来源于Linkey BPM中的流程设计器，作用于流程运行过程中的图形描述。它的操作简捷轻巧，能快速绘制出流程图。组件单独也可以使用，并能嵌入到任何需要该组件的系统中。

技术选型

为什么选用JsPlumb呢？在项目开始之前我对各类技术进行了调研，主要看了一下jsplumb、joint、Raphael、GoJS、dagre-d3这几个，最后我选择了JsPlumb，因为它开源，使用起来也比较方便，文档也是比较齐全的。d3也非常强大，但是学习成本太高。 其中还用到了一个非常重要的用于描述图形的库GraphlibJS，使用它可以很方便的管理图形，它内部已经实现了关于图论的大部分算法。 JsPlumb官网：https://jsplumbtoolkit.com JsPlumb GitHub：https://github.com/sporritt/jsplumb/ GraphlibJS GitHub：https://github.com/dagrejs/graphlib

效果展示

● 基本面板 

● 拖拽节点到绘图区连线 

● 水平、垂直对齐

● 显示/隐藏网格 

● 单节点、多节点移动 

● 改变节点对齐的排序顺序(按住Ctrl键一个一个单击选中要对齐的节点，单击的顺序就是对齐的排列顺序) 

● 撤销与重做 

● 保存为图片 

● 修改连线样式 

● 退出流程设计器友好的未保存提示

● 修改节点文本和连接线文本 

● 保存流程图(会生成一段json数据，后台可以保存这段数据，为了便于调试，生成的json数据可以通过快捷键Ctrl+L打开的测试窗口看到。同时也可以从该窗口载入其他的符合流程图的json数据) 

立即前往码云Fork项目吧，地址：https://gitee.com/openEA/FlowDesigner