1、LogicFlow

(1) 介绍：

LogicFlow 是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端研发自定义开发各种逻辑编排场景，如流程图、ER图、BPMN流程等。在工作审批配置、机器人逻辑编排、无代码平台流程配置上都有较好的应用。

(2) 源码下载：

https://github.com/didi/LogicFlow

(3) 项目说明：

http://logic-flow.org/guide/start.html#安装

(4) 效果截图：

2、easy-flow

(1) 介绍：

easy-flow 基于VUE ElementUI JsPlumb的流程设计器，通过 vuedraggable 插件来实现节点拖拽。

(2) 源码下载：

https://gitee.com/xiaoka2017/easy-flow#项目介绍

(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) 效果截图：