基于JsPlumb的流程设计器

真正的大师,永远都怀着一颗学徒的心！

一、项目简介

基于JsPlumb的流程设计器

二、实现功能

• 支持保存为图片

• 支持拖拽

• 支持重新绘制

• 支持节点删除

• 支持节点拉线

• 支持按流程执行

• 支持各种快捷键

三、技术选型

• jsplumb

• joint

• Raphael

• GoJS

• dagre-d3

四、界面展示

● 拖拽节点到绘图区连线 

● 水平、垂直对齐 

● 显示/隐藏网格 

● 单节点、多节点移动 

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

● 撤销与重做 

● 清空画布，重新绘制 

● 保存为图片 

● 修改连线样式 

● 调整对齐间距 

● 帮助文档和快捷键大全 

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

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

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

五、源码地址

私信回复：流程引擎