1、LogicFlow

(1) 介紹：

LogicFlow 是一款流程圖編輯框架，提供了一系列流程圖交互、編輯所必需的功能和靈活的節(jié)點自定義、插件等拓展機制。LogicFlow支持前端研發(fā)自定義開發(fā)各種邏輯編排場景，如流程圖、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 插件來實現節(jié)點拖拽。

(2) 源碼下載：

https://gitee.com/xiaoka2017/easy-flow#項目介紹

(3) 項目說明：

• 支持拖拽添加節(jié)點
• 點擊線進行設置條件
• 支持給定數據加載流程圖
• 支持畫布拖拽
• 支持連線樣式、錨點、類型自定義覆蓋
• 支持力導圖

(4) 效果截圖：

3、vue-flow-design-plus

(1) 介紹：

VUE FLOW DESIGN PLUS流程設計器，基于Vue Ant Design Vue JSPlumb，該組件目的是為了使用在Vue項目中，它前身是VFD流程設計器。

Vue版本以全新的技術棧重構了代碼，并在原版基礎上實現了更好的操作方式，新版會作為優(yōu)先版本持續(xù)迭代。

(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) 介紹：

一款模仿釘釘審批流程開發(fā)的表單 流程設計器，可以實現類似釘釘審批流程界面效果，前端使用vue開發(fā)。

(2) 源碼下載：

https://github.com/SNFocus/approvalFlow

(3) 項目說明：

表單配置(form-generator)

• 拖拽表單，生成布局頁面
• 配置拖拽組件屬性，定制組件形態(tài)
• 生成JSON數據并生成預覽頁面

流程節(jié)點配置(仿釘釘界面)

• 創(chuàng)建審批流程(發(fā)起人，審批人，條件節(jié)點，抄送人)
• 配置節(jié)點詳細數據，包括條件節(jié)點表達式及期望值等
• 配置節(jié)點對表單的權限（目前并未在預覽頁面中做控制）
• 必填節(jié)點校驗

(4) 效果截圖：