129 Star 1.5K Fork 578

MiyueFE / bpmn-process-designer

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
Apache-2.0

logo

Bpmn Process Designer

GitHub stars GitHub forks star fork

GitHub license GitHub issues GitHub pull requests

💻在线演示 · 🐛报告 Bug

项目简介

一个基于 bpmn.jsVue 2.xElementUI 开发的 BPMN 2.0 流程设计器(网页版),您可以使用它在浏览器上查看和编辑符合 BPMN 2.0 规范的流程文件。

项目内置 activiti、flowable、camunda 三种流程引擎支持文件,并提供了常见功能自定义方法与演示代码。

但由于 bpmn.js 与实际业务的特殊性,本项目暂不支持直接使用与发布 NPM 依赖,建议根据实际需求参照 App.vue 进行使用和二次开发。

TypeScript 支持

bpmn.js 的核心依赖 —— diagram.js,其核心模块已经支持 TypeScript,但是 bpmn.jstds 仍然处于积压状态。所以在此情况下我编写了 bpmn.js 常用插件部分的 ts 声明,声明地址:vite-vue-bpmn-process/types/declares

为支撑 Vue3vite 开发模式,提供了该项目的 Vue3 + tsx 实现:vite-vue-bpmn-process

目前 bpmn-js 与 diagram-js 均已支持 typescript。


2023年10月1日 更新

由于该项目目前依然存在一些未实现的功能和 Bug,但是修复起来比较麻烦,所以暂时停止维护。

目前已经新增了一个 闭源 的 Vue 3 + typescript 的项目,基本解决了所有已知 bug,并且增加了一些比较实用的功能。

已有功能:

  1. 自适应网格背景(支持颜色、网格大小等设置)
  2. 元素大小设置(初始化时可配置函数等)
  3. 多元素组合创建
  4. 自定义元素渲染(初始化时接收自定义元素渲染方法)
  5. 自定义Palette
  6. 工具栏
  7. 兼容 camunda/activiti/flowable 部分属性配置的属性面板
  8. 垂直泳道(有一点小问题)
  9. 任务类节点外置label
  10. 自动布局(无法识别泳道和子流程)
  11. 美化 ContextPad
  12. 扩展的自定义元素与属性

有需要的同学可以联系通过微信公众号联系我。

预览地址:VercelGitHub Page

安装和使用

# 克隆仓库
git clone https://github.com/miyuesc/bpmn-process-designer.git -b v2

# 安装依赖
npm install

# 启动项目
npm run 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 关联。目前包含 palettecontextMenurenderer 等部分,也是扩展大家进行二次开发的核心参考代码
  • bo-utils:与元素 businessObject 相关的公共方法,主要涉及属性读取和更新;与后端使用的流程引擎绑定
  • bpmn-utilsbpmn.js 相关的一些公共方法
  • moddle-extensionsBPMN 2.0 规范格式的 JSON Schema 文档,包含基础的 bpmn.json,三大流程引擎文档与自定义元素文档

整个项目包含了 storeEventBus 两种消息传递方式:

  • store 中主要存放当前 Modeler 实例与节点实例,以及项目配置项,在二次开发过程中可以采用别的数据共享方式取代
  • EventBus 事件总线是该项目的 核心消息传递方式:因为 节点实例不能被 Vue 进行响应式处理,影响性能且容易产生属性读取更新错误,并且 表单需要实时监听节点变化,所以通过消息总线共享事件和数据是比较好的处理方式。

可用功能

1. 工具栏

  • 导入文件
  • 导出文件(xml, bpmn, svg)
  • 预览文件字符串(xml, json)
  • 元素对其(垂直上中下、水平左中右)
  • 缩放
  • 撤销恢复与重做
  • 扩展功能(流程模拟,小地图,快捷键提示,bpmn 事件查询)

2. 编辑器

  • 自定义流程id与名称
  • 可选流程引擎(camunda,activiti,flowable)
  • 动态背景设置
  • 自定义 PaletteProvider
  • 自定义 Renderer
  • 自定义 ContentPadProvider
  • 自定义 Rules
  • 自定义 ElementFactory
  • 扩展右键菜单
  • 自定义 Overlays
  • 扩展 Tooltip
  • 部分元素高亮

3. 属性面板

  • 基础信息(id, name, version, executable ...)
  • 附件文档(documentation)
  • 执行作业
  • 异步配置
  • 流程启动项
  • 扩展属性
  • 执行监听器
  • 流转条件
  • 任务监听器
  • 任务多实例(会签、或签)

image-20240117164127927 Bpmn-js 相关工具库

🎁 Projects
⭐ Description ☄ Downloads ✨ License
diagram-js-grid-bg A visual grid backgroud for diagram-js, base on diagram-js-grid.
基于 diagram-js-grid 的 SVG 网格背景,可用于diagram-js的相关项目,例如 bpmn-js、dmn-js 等。
NPM Downloads NPM License
diagram-js-context-pad An element context menu component for diagram-js/bpmn-js use, base on diagram-js/lib/features/context-pad.
一个提供给 diagram-js/bpmn-js 使用的元素上下文菜单组件,基于 diagram-js/lib/features/context-pad
NPM Downloads NPM License
diagram-js-accordion-palette A palette that supports folding and unfolding, provided for diagram-js use。Base on diagram-js/palette
一个支持折叠展开的调色板,提供给 diagram-js 使用。基于 diagram-js 本身的 Palette。
NPM Downloads NPM License
bpmn-js-i18n-zh Chinese internationalization resources for bpmn-js.
关于 bpmn-js-properties-panel 的中文支持。
NPM Downloads NPM License
bpmn-js-external-label-modeling A bpmn-js plugin used to render Label tags outside of nodes.
一个用来将Label标签渲染在节点外部的bpmn-js插件。
NPM Downloads NPM License

贡献

在这里列出如何为项目做出贡献,例如:

  1. Fork 本仓库
  2. 创建分支 (git checkout -b feature/your-feature)
  3. 提交更改 (git commit -am 'Add some feature')
  4. 推送到分支 (git push origin feature/your-feature)
  5. 创建一个新的 Pull Request

界面预览

img.png

img_1.png

img_2.png

img_3.png

img_4.png

img_5.png

img_6.png

作者简介

MiyueFE(白小米),也可以叫我小白或者小米,常驻 掘金社区,也可以通过一下方式联系我:

赞助

如果该项目对您有帮助,您可以请我喝杯咖啡~

如果有其他开发支持,请联系微信或者掘金(复杂问题可能需要收费)

微信 支付宝

其他项目

  1. diagram-js-grid-bg:基于 diagram-js-grid 的 SVG 网格背景,可用于diagram-js的相关项目,例如 bpmn-js、dmn-js 等
  2. bpmn-js-external-label-modeling:一个用来将 Label 标签渲染在节点外部的bpmn-js插件。

友情链接

  1. MiyueFE:Bpmn.js 全面进阶指南
  2. Yiuman:低代码平台 citrus ,已集成 activiti7 工作流引擎后端部分
  3. 霖呆呆:《全网最详bpmn.js教材目录》关于bpmn.js交流群的说明
  4. PL-FE:Bpmn Document
  5. 芋道源码: ruoyi-vue-pro ,一套全部开源的企业级的快速开发平台,毫无保留给个人及企业免费使用。
  6. dialYun:React Bpmn Designer - github, gitee
  7. kstry:流程编排、规则引擎、并发、微服务整合框架 - github, gitee

开源许可

Apache License © 2023 miyuesc

Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and (b) You must cause any modified files to carry prominent notices stating that You changed the files; and (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. END OF TERMS AND CONDITIONS APPENDIX: How to apply the Apache License to your work. To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives. Copyright © 2023 miyuesc Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

简介

Base on Vue 2.x and ElementUI,基于 Bpmn.js、Vue 2.x 和 ElementUI 的流程编辑器(前端部分),支持监听器,扩展属性,表单等配置,可自由扩展 展开 收起
JavaScript 等 4 种语言
Apache-2.0
取消

发行版 (2)

全部

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/MiyueSC/bpmn-process-designer.git
git@gitee.com:MiyueSC/bpmn-process-designer.git
MiyueSC
bpmn-process-designer
bpmn-process-designer
v2

搜索帮助

14c37bed 8189591 565d56ea 8189591