#挑战30天在头条写日记#

仁杰开源分享：探索优秀开源项目，发现创新价值。从Gitee到GitHub，让我们一起畅享开源的魅力！

大家好，我是仁杰，今天给大家一个基于 bpmn.js，Vue 2.x 和 ElementUI 开发的 BPMN 2.0 流程设计器（网页版）。

介绍

项目内置Activiti、Flowable、Camunda三种流程引擎，并提供了常见功能定义方法与演示代码。

由于bpmn.js与实际业务的特殊性，本项目暂不支持直接使用和发布npm依赖，建议根据您的具体业务需求，参考App.vue进行使用和二次开发。我们将继续努力完善这一项目，为您提供更加方便的流程可视化解决方案！

为了更好地支持Vue3和Vite开发模式，我们特别提供了该项目的Vue3 + tsx实现：vite-vue-bpmn-process。您可以通过这一项目来构建流程可视化应用，同时享受到最新的Vue3和Vite开发体验。

特点

工作流开发平台，可以通过拖拉拽的方式实现业务的流程，控制面板还有一些常规的属性，例如消息与信号、执行监听器、扩展属性等。

流程源代码预览，在真正的业务中我们可以保存这个数据，然后在实际使用中可以直接使用，能够达到快速的构建。

工作流模拟，当点击模拟按钮以后，可以在控制面板上模拟真实的业务流向，可以更好的模拟出流程的数据流向。

在业务流程中，可以为流程添加扩展属性，并设置属性的默认值。

业务流程中，可以通过设置偏好设置，动态实现了流程的快速编辑。

运行

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

# 安装依赖
npm install

# 启动项目
npm demo

总结

当前项目主要包含五个组件：Designer、Toolbar、Panel、ContextMenu、Settings等。

另外项目还包含了一些bpmn.js的扩展插件，Additional-components、Additional-modules、bo-utils、bpmn-utils、moddle-extensions等组件。

整个项目包含了Store和EventBus两种消息传递方式：第一种，store中主要存放当前Modeler实例与节点实例，第二种，Event事件总线是该项目的核心消息传递方式

结尾

每次看见好的开源项目都会收藏起来，但是收藏起来又不知道什么时候才能打开再看一下，其实每一个自己觉得好的项目，肯定有一个点是吸引自己的。我们把这些吸引自己的点汇总一下，这就是自己心中的项目。行动起来，别再做“收藏家”了。