--- theme: jzman --- > ✨✨✨**目前成都的"小学生"大佬和作者一起开发了 Flowable 流程引擎组件（包含前端设计器与后端流程引擎）。** **该组件与 Flowable 流程引擎深度融合，结合实际业务场景和使用方式，对属性编辑面板进行了重新设计，优化了用户体验。增加了符合业务场景的流程校验与进度预览、引入富文本编辑器与代码编辑器。结合后端引擎，可直接嵌入系统中使用。** 详情请访问：https://www.bpmport.com/products ；预览： 1. Flowable 编辑器：[flowable-designer](https://designer.bpmport.com/designer/)， 2. Activiti 编辑器：[activiti-designer](https://designer.bpmport.com/activiti/)， 3. 预览与模拟：[viewer](https://designer.bpmport.com/viewer/)， 4. DMN决策设计器：[dmn](https://designer.bpmport.com/dmn/) *** ## 2024年8月21日更新原 vue2 版设计器 (Bpmn process designer)：很早之前已经停止维护。目前该项目新建分支 `next`，**使用 TypeScript 与最新版 bpmn-js，实现了大部分业务需求常用方法（纯函数方法，与使用库无关）**，可根据文档与示例项目自行实现。 > [🎉 **Tips**] > > **若有 bpmn-js 或者前端工作流开发的相关问题，可以在 [bpmn-js-questions/issues](https://github.com/miyuesc/bpmn-js-questions/issues/new/choose) 中查询或者提出新的议题，在有时间的情况下作者会给出相关解决方案** 如果时间紧迫，作者团队提供 flowable 与 activiti 对应的流程图编辑器源码，详情见上述地址。 *** # 一、bpmn-js 中文文档 > 均是社区开发者提供和编写的文档，暂无官方中、英文文档。 ## 0. bpmn-js 源码解析和实践 > 之前准备的小册的内容，由于实践部分写起来太麻烦，加上官方版本迭代比较快，所以就改成掘金专栏吧，会单独起一个专栏更新。 ## 1. 霖呆呆 - 全网最详bpmn.js中文教材/文档 ⭐⭐⭐⭐ > bpmn-js 中国区启蒙导师\~ 多种自定义组件讲解，但内容比较老 ## 2. MiyueFE - bpmn.js 中文进阶专栏 ⭐⭐⭐⭐⭐ > 文章内容丰富，但是比较枯燥。 > > 当前有核心源码解析与二次自定义开发的相关说明，部分文章较长，稍显枯燥。 ## 3. 选型建议（logicflow，bpmn-js）⭐⭐⭐⭐ > 具有少量个人倾向 ## 4. 运维咖啡吧 ⭐⭐⭐ > 稍微基础，有部分API说明 ## 5. 官方论坛（英文，支持 GitHub 登录和订阅）⭐⭐⭐⭐ # 二、bpmn-js 改造开源案例 > 仅编辑器部分 ## 1. 官方案例 ⭐⭐⭐⭐ ## 2. MiyueFE ⭐⭐⭐⭐ > 两个开源版本，有细节不够完美，但已经有多个团队和公司基于此项目进行二次开发，例如若依、橙单等 (Vue2 + js)：

(Vue3 + ts)：

# 三、仿钉钉风格流程编辑器开源案例 ## 1. 蔡晓峰(Vue3 完整版)：支持侧边栏配置与流程编辑 ⭐⭐⭐⭐ > 钉钉风格，配置较丰富，可结合后端项目进行 json 通信与 xml 转换

## 2. 蔡晓峰(仿钉钉JSON转XML，Java端) ⭐⭐⭐ > 耦合性较强，建议咨询作者二开 ## 3. MiyueFE(Vue3 基础示例)：最基础的流程配置 ⭐⭐ > 基础三类节点、支持拖拽；没有实现侧边栏，需要自己实现；通过链表结构实现顺序固定

# 四、admin system 系统开源案例 > 包含完整的后台管理系统模板 ## 1. 蒜蓉辣椒酱(Vue3 + ts + flowable) ⭐⭐⭐⭐

## 2. cto-kevin(Vue3 + ts + camunda) ⭐⭐⭐⭐

## 3. 芋道源码(若依Pro)(Vue3/2 + ts/js + flowable) ⭐⭐⭐

# 五、bpmn-js 开源工具仓库 ## 1. 自动布局（官方，不支持泳道等） ⭐⭐⭐ ## 2. 自动布局（开发者修复案例，不支持泳道等）⭐⭐⭐ ## 3. 适配缩放的自定义配置网格背景（MiyueFE）⭐⭐⭐⭐

## 4. 支持官方 camunda 与 zeebe 引擎的属性面板汉化（MiyueFE）⭐⭐⭐⭐

## 5. 更美观的上下文菜单（MiyueFE）⭐⭐⭐⭐

## 6. 可折叠的 Palette（MiyueFE）⭐⭐⭐ ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/68f4b3eb05a84a0a95fad8145417583a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=524&h=855&s=35195&e=png&b=ffffff)

# 六、闭源项目 ## 1. MiyueFE (Vue3 + ts) 多个自定义功能实现 ⭐⭐⭐⭐⭐ > 实现了垂直泳道、多种自定义、activiti、flowable、camunda 三种流程引擎的属性配置；好东西，就是没开源。。。

# 七、其他相关项目 ## 1. didi/logic-flow - 专注于业务自定义的流程图编辑框架 ⭐⭐⭐⭐ > 单独针对复杂 BPMN 需求 ⭐⭐

## 2. didi/epage - 一款基于schema的可视化页面配置工具 ⭐⭐⭐⭐

## 3. FormMaking - 基于Vue的可视化表单设计器 ⭐⭐⭐⭐