很香的几款开源免费的流程设计器
原创2022-11-18 21:18·StruggleLittleAnt1、LogicFlow
(1) 介绍:
LogicFlow 是一款流程图编辑框架,提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端研发自定义开发各种逻辑编排场景,如流程图、ER图、BPMN流程等。在工作审批配置、机器人逻辑编排、无代码平台流程配置上都有较好的应用。
(2) 源码下载:
https://github.com/didi/LogicFlow
(3) 项目说明:
http://logic-flow.org/guide/start.html#%E5%AE%89%E8%A3%85
(4) 效果截图:
2、easy-flow
(1) 介绍:
easy-flow 基于VUE+ElementUI+JsPlumb的流程设计器,通过 vuedraggable 插件来实现节点拖拽。
(2) 源码下载:
https://gitee.com/xiaoka2017/easy-flow#%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D
(3) 项目说明:
- 支持拖拽添加节点
- 点击线进行设置条件
- 支持给定数据加载流程图
- 支持画布拖拽
- 支持连线样式、锚点、类型自定义覆盖
- 支持力导图
(4) 效果截图:
3、vue-flow-design-plus
(1) 介绍:
VUE FLOW DESIGN PLUS流程设计器,基于Vue + Ant Design Vue + JSPlumb,该组件目的是为了使用在Vue项目中,它前身是VFD流程设计器。
Vue版本以全新的技术栈重构了代码,并在原版基础上实现了更好的操作方式,新版会作为优先版本持续迭代。
(2) 源码下载:
https://gitee.com/zhangyeping/vue-flow-design-plus
(3) 项目说明:
VUE3 FLOW DESIGN 流程设计器,基于 Vue3 + TypeScript + Vite + Ant Design Vue 3 + JSPlumb。
(4) 效果截图:
4、approvalFlow--仿钉钉流程设计器
(1) 介绍:
一款模仿钉钉审批流程开发的表单+流程设计器,可以实现类似钉钉审批流程界面效果,前端使用vue开发。
(2) 源码下载:
https://github.com/SNFocus/approvalFlow
(3) 项目说明:
表单配置(form-generator)
- 拖拽表单,生成布局页面
- 配置拖拽组件属性,定制组件形态
- 生成JSON数据并生成预览页面
流程节点配置(仿钉钉界面)
- 创建审批流程(发起人,审批人,条件节点,抄送人)
- 配置节点详细数据,包括条件节点表达式及期望值等
- 配置节点对表单的权限(目前并未在预览页面中做控制)
- 必填节点校验
(4) 效果截图: