一个基于 bpmn.js
,Vue 2.x
和 ElementUI
开发的 BPMN 2.0 流程设计器(网页版),您可以使用它在浏览器上查看和编辑符合 BPMN 2.0
规范的流程文件。
项目内置 activiti、flowable、camunda 三种流程引擎支持文件,并提供了常见功能自定义方法与演示代码。
但由于 bpmn.js 与实际业务的特殊性,本项目暂不支持直接使用与发布 NPM 依赖,建议根据实际需求参照 App.vue
进行使用和二次开发。
bpmn.js 的核心依赖 —— diagram.js,其核心模块已经支持 TypeScript
,但是 bpmn.js
的 tds
仍然处于积压状态。所以在此情况下我编写了 bpmn.js
常用插件部分的 ts
声明,声明地址:vite-vue-bpmn-process/types/declares。
为支撑 Vue3
与 vite
开发模式,提供了该项目的 Vue3
+ tsx
实现:vite-vue-bpmn-process
# 克隆仓库
git clone https://github.com/miyuesc/bpmn-process-designer.git -b v2
# 安装依赖
npm install
# 启动项目
npm demo
bpmn.js
的 核心原理与常规改造 可以参见我的文章:Bpmn.js 进阶指南之原理分析与模块改造
常用模块的开发及自定义,参见 Bpmn.js 全面进阶指南
当前项目内主要包含五个组件:
Designer
:bpmn.js 的画布部分,所有组件的基础依赖组件Toolbar
:顶部工具栏,依赖Designer
组件实现xml
文件的导入导出和预览,支持对齐、缩放、撤销恢复及其他第三方扩展模块开关Panel
:自定义属性面板,包括基础属性、扩展属性、监听器、注释文档等配置;支持使用原生属性面板ContextMenu
:自定义右键菜单,用于添加和更改节点类型Settings
:全局偏好设置组件,主要用于控制演示项目的配置,实际项目中建议取消
另外包含一些 bpmn.js
的扩展:
additional-components
:扩展组件,可能依赖bpmn.js
或者vue
组件的一些原生 js 控制方法additional-modules
:基于bpmn.js
的原生模块进行扩展/重写的功能模块,只有bpmn.js
关联。目前包含palette
、contextMenu
、renderer
等部分,也是扩展大家进行二次开发的核心参考代码bo-utils
:与元素businessObject
相关的公共方法,主要涉及属性读取和更新;与后端使用的流程引擎绑定bpmn-utils
:bpmn.js
相关的一些公共方法moddle-extensions
:BPMN 2.0
规范格式的JSON Schema
文档,包含基础的bpmn.json
,三大流程引擎文档与自定义元素文档
整个项目包含了 store
和 EventBus
两种消息传递方式:
store
中主要存放当前Modeler
实例与节点实例,以及项目配置项,在二次开发过程中可以采用别的数据共享方式取代EventBus
事件总线是该项目的 核心消息传递方式:因为 节点实例不能被Vue
进行响应式处理,影响性能且容易产生属性读取更新错误,并且 表单需要实时监听节点变化,所以通过消息总线共享事件和数据是比较好的处理方式。
- 导入文件
- 导出文件(xml, bpmn, svg)
- 预览文件字符串(xml, json)
- 元素对其(垂直上中下、水平左中右)
- 缩放
- 撤销恢复与重做
- 扩展功能(流程模拟,小地图,快捷键提示,bpmn 事件查询)
- 自定义流程id与名称
- 可选流程引擎(camunda,activiti,flowable)
- 动态背景设置
- 自定义 PaletteProvider
- 自定义 Renderer
- 自定义 ContentPadProvider
- 自定义 Rules
- 自定义 ElementFactory
- 扩展右键菜单
- 自定义 Overlays
- 扩展 Tooltip
- 部分元素高亮
- 基础信息(id, name, version, executable ...)
- 附件文档(documentation)
- 执行作业
- 异步配置
- 流程启动项
- 扩展属性
- 执行监听器
- 流转条件
- 任务监听器
- 任务多实例(会签、或签)
在这里列出如何为项目做出贡献,例如:
- Fork 本仓库
- 创建分支 (
git checkout -b feature/your-feature
) - 提交更改 (
git commit -am 'Add some feature'
) - 推送到分支 (
git push origin feature/your-feature
) - 创建一个新的 Pull Request
MiyueFE(白小米),也可以叫我小白或者小米,常驻 掘金社区,也可以通过一下方式联系我:
如果该项目对您有帮助,您可以请我喝杯咖啡~
如果有其他开发支持,请联系微信或者掘金(复杂问题可能需要收费)
- MiyueFE:Bpmn.js 全面进阶指南
- Yiuman:低代码平台 citrus ,已集成 activiti7 工作流引擎后端部分
- 霖呆呆:《全网最详bpmn.js教材目录》,关于bpmn.js交流群的说明
- PL-FE:Bpmn Document
- 芋道源码: ruoyi-vue-pro ,一套全部开源的企业级的快速开发平台,毫无保留给个人及企业免费使用。
- dialYun:React Bpmn Designer - github, gitee
Apache License © 2023 miyuesc