✨✨✨目前成都的"小学生"大佬和作者一起开发了 Flowable 流程引擎组件(包含前端设计器与后端流程引擎)。
该组件与 Flowable 流程引擎深度融合,结合实际业务场景和使用方式,对属性编辑面板进行了重新设计,优化了用户体验。 增加了符合业务场景的流程校验与进度预览、引入富文本编辑器与代码编辑器。 结合后端引擎,可直接嵌入系统中使用。
详情请访问:https://www.bpmport.com/products ;
预览:
- Flowable 编辑器:flowable-designer,
- Activiti 编辑器:activiti-designer,
- 预览与模拟:viewer,
- DMN决策设计器:dmn
2024年8月21日 更新
原 vue2 版设计器 (Bpmn process designer):https://github.com/miyuesc/bpmn-process-designer 很早之前已经停止维护。目前该项目新建分支 next
,使用 TypeScript 与最新版 bpmn-js,实现了大部分业务需求常用方法(纯函数方法,与使用库无关),可根据文档与示例项目自行实现。
如果时间紧迫,作者团队提供 flowable 与 activiti 对应的流程图编辑器源码,详情见上述地址。
一、bpmn-js 中文文档
均是社区开发者提供和编写的文档,暂无官方中、英文文档。
1. 霖呆呆 - 全网最详bpmn.js中文教材/文档
bpmn-js 中国区启蒙导师~ 多种自定义组件讲解
https://github.com/LinDaiDai/bpmn-chinese-document
https://juejin.cn/post/6844904017567416328
2. MiyueFE - bpmn.js 中文进阶专栏
需要了解部分源码,文章稍微枯燥,内容丰富
https://juejin.cn/column/6964382482007490590
3. 选型建议(logicflow,bpmn-js)
具有少量个人倾向
https://juejin.cn/post/7213547986483380282
4. 运维咖啡吧
稍微基础,有部分API说明
https://blog.ops-coffee.cn/bpmn
5. YuJianghao(GitHub)
刚刚开始的源码解析
https://yujianghao.github.io/bpmn-js-doc/
6. 官方论坛(英文,支持 GitHub 登录和订阅)
二、bpmn-js 改造开源案例
仅编辑器部分
1. 官方案例
https://github.com/bpmn-io/bpmn-js-examples
2. MiyueFE
两个开源版本,有细节不够完美,但已经有多个团队和公司基于此项目进行二次开发,例如若依、橙单等
(Vue2 + js):https://github.com/miyuesc/bpmn-process-designer
(Vue3 + ts):https://github.com/moon-studio/vite-vue-bpmn-process
三、仿钉钉风格流程编辑器开源案例
1. 蔡晓峰(Vue3 完整版):支持侧边栏配置与流程编辑
钉钉风格,配置较丰富,可结合后端项目进行 json 通信与 xml 转换
https://gitee.com/cai_xiao_feng/lowflow-design
2. 蔡晓峰(仿钉钉JSON转XML,Java端)
https://gitee.com/cai_xiao_feng/lowflow-design-converter
3. MiyueFE(Vue3 基础示例):最基础的流程配置
没有实现侧边栏,需要自己实现;通过链表结构实现顺序固定
https://miyuesc.github.io/useful-code/#/ComponentExtension/FlowDesignModule
四、admin system 系统开源案例
包含完整的后台管理系统模板
1. 蒜蓉辣椒酱(Vue3 + ts + flowable)
2. cto-kevin(Vue3 + ts + camunda)
https://gitee.com/ctokevin/vue-admin-system
3. 芋道源码(若依Pro)(Vue3/2 + ts/js + flowable)
https://gitee.com/zhijiantianya/ruoyi-vue-pro
五、bpmn-js 开源工具仓库
1. 自动布局(官方,不支持泳道等)
https://github.com/bpmn-io/bpmn-auto-layout
2. 自动布局(开发者修复案例,不支持泳道等)
https://github.com/marstamm/bpmn-auto-layout
3. 适配缩放的自定义配置网格背景(MiyueFE)
https://github.com/miyuesc/diagram-js-grid-bg
4. 支持官方 camunda 与 zeebe 引擎的属性面板汉化(MiyueFE)
https://github.com/miyuesc/bpmn-js-i18n-zh
5. 更美观的上下文菜单(MiyueFE)
https://github.com/miyuesc/diagram-js-context-pad
六、闭源项目
1. MiyueFE (Vue3 + ts) 多个自定义功能实现
实现了垂直泳道、多种自定义、activiti、flowable、camunda 三种流程引擎的属性配置;好东西,就是没开源。。。
https://vue-bpmn-process-designer.vercel.app
七、其他相关项目
1. didi/logic-flow - 专注于业务自定义的流程图编辑框架
https://github.com/didi/LogicFlow