换掉bpmn-js，让前端更熟悉工作流业务

最新推荐文章于 2025-03-21 11:27:33 发布

相续心

最新推荐文章于 2025-03-21 11:27:33 发布

阅读量1.5k

点赞数 1

分类专栏：工作流文章标签：前端工作流流程图

本文链接：https://blog.youkuaiyun.com/towersxu/article/details/125265647

版权

本文探讨了为何在前端工作流项目中考虑替换bpmn-js，主要原因是业务逻辑黑盒、源码可读性差和职业发展的限制。文章介绍了如何选用LogicFlow作为替代方案，因其完善的自定义机制、良好的可维护性和更易于前端理解的源码。通过定义流程图元素、自定义业务属性并转换为流程引擎可识别的XML，实现了与bpmn-js的平滑过渡，提升了项目的可维护性和前端开发体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

看到这个标题可能有些同学会奇怪，bpmn.js不是工作流系统前端最普遍的方案吗？为什么我们需要换掉bpmn.js。这里我们站在前端的角度先明确一下工作流、工作流管理系统、工作流引擎、BPMN规范、bpmn-js的关系。

工作流

工作流的概念在百度百科和wiki上描述的都比较抽象，我们可以大致理解为做一些事情的时候，我们把做事情抽象为几个步骤，然后再合理的组织这些步骤，最终通过组织好的步骤来做这些事情。例如我们早上起来做的事情看做一项工作流，可以拆分为上厕所、洗手、刷牙、吃饭这些步骤。有的人“上厕所->洗手->吃饭->刷牙”；有的人“刷牙->上厕所->吃饭->洗手”。这里可以看到“组织步骤”的不同，最后表现的效果也不同。我们把事情的拆分、组织、执行、最后到管理都搬到计算机上面来，就可以叫做工作流。

工作流管理系统

这个就是我们平时开发的系统，这些系统大多是以流程为中心，用图形化的方式来表示工作流。既然是图形化，那就需要画图，现在大多数系统都把画图搬到网页上来，所以才需要我们前端参与进来。

工作流引擎

这个一般是后端用来执行我们组织的步骤的引擎，决定着我们上厕所后是吃饭还是洗手。工作流引擎有很多，最常见的有Activiti、Camunda BPM、Flowable。

BPMN规范

翻译成中文是业务流程建模符号，是一个组织定的行业标准。前面提到可以通过画图的方式来描述一个事情怎么做，但是不同的人画的图不一样，不同的工作流引擎对图产出的数据也不一样。为了让图更好的被人和机器理解，就有一个组织就提出了一个标准，从图上节点、连线的具体含义到提交给工作流引擎的数据格式，都有给出了具体的定义。国内的资料大家可以看这个文档：前言 | AWS BPMN2 Activity参考指南。目前大部分开源的工作流引擎都支持BPMN规范，下面截的是wiki上的资料：

bpmn-js

这个很好理解，就是一个开源的实现BPMN2.0规范的web建模器。需要注意一下，bpmn-js虽然名字中有bpmn，但是并不是提出BPMN规范的官方组织开发的。所以不代表工作流引擎支持BPMN规范，前端就一定要用bpmn-js。我们也可以基于BPMN规范重新开发一套符合自己业务的流程设计器。