[项目总结篇]低代码——流程引擎：BPMNJS&Flowable工作流编辑器与引擎实现_工作流引擎bpmn

背景

项目设计多种灾害类型，各个课题组编码基础不同，所以设计流程引擎编排，结合拖拽式表单表单编排器，让各个课题组以拖拽式设计交互动态表单和模型流程，实现模型编排与集成.

技术方案选型

1.流程引擎：流程编辑器，编辑器用于设计流程，并保存为通用格式,如BPMN、XML，流程引擎负责解释、运行和监控流程实例,并调用底层逻辑 ，按照其运行在前端还是后端，又分为内存型、工作流引擎。

2.前端设计器，有LogicFlow、Bpmn以及Camunda、Activiti等封装好的编辑建模工具，且要求使用BPMN2国际规范，最后选型Bpmn.js

3.工作流引擎：是否支持保单功能，分为Activiti和Camunda、Flowable两大类，后两者支持表单和流程解耦，表单和表单单独设计，流程设计时进行表单动态绑定，且Flowable提供Activiti和Camunda工作流引擎的迁移工具所以选型Flowable

功能

BPMN编辑器技术实现总结&AI时代的工作流编辑器

• BPMN.js流程设计器负责流程编排BPMNJS详解
• Flowable工作流引擎负责解释、执行和监控流程实例

前端做了哪些内容

流程设计

流程设计（编辑器:考虑版本管理、限制规范行为、共享编辑（共享数据格式）、自定义扩展与渲染多个节点性能问题等）流程监控（以列表型式展示当前状态、并高亮当前运行节点状态、流程任务各个任务如何推送到指定审批人以及任务表单的动态渲染给用户进行交互)

1.流程编辑器主要功能：
BPMN(业务流程模型和符号)

• XML解析:使用bpmn-moddle解析BPMN2.0XML文件,熟悉BPMN2.0规范（XML->内存对象，AST解析）
• 图形渲染：通过diagram-js实现图表的渲染和编辑，了解diagramJS底层实现原理：渲染流程，Canvas&SVG、绘Shape&Connection、自定义RendererCanvas&SVG
• 事件系统：实现了完整的生命周期事件，包括导入、解析、渲染等阶段，熟悉事件总线（拖拽、连线、属性配置）
• 模块扩展：支持通过additionalModules进行功能扩展扩展机制：didi库依赖注入DI
  

2.重点过程（渲染流程）
diagramJS继承自BPMN的进行渲染流程 ****** 渲染流程二

• Canvas初始化
• ElementFactory创建元素
• ElementRegistry元素注册
• GraphicFactorySVG管理容器（组、元素、视觉）
• 基于EventBus触发绘图指令（绘制Shape图形和Connection连线）
• Renderer具体绘制SVG绘图

3.BPMN层面内容
1.基础能力

• 拖拽、连线、属性配置，验证机制：某些节点之间不能直接连线（如开始事件不能直接连接到结束事件)。可以通过监听BPMN.js的事件(如shape.added或connection.added）进行自定义验证，确保用户操作符合业务规则。
• 数据类型转换：BPMN转XML内置importXML&saveXML、XML转JSON（xml2js),如果不符合规范，可以通过err参数捕获错误，并向用户提示具体的错误信息，例如缺少必需属性或节点类型不匹配。

2.定制与扩展

• 自定义节点颜色、形状{自定义渲染器}和图标
  如果自定义样式过于复杂（如大量SVG操作），可能会影响渲染性能。优化CSS和SVG代码，并用requestAnimationFrame等技术减少重绘。
• 拓展上下文菜单（Paletee)/属性面板(PropertiesPanel)

3.事件与交互

• 处理用户操作事件（事件总线）
  弹窗确认弹窗或实现撤销/重做功能来减少误操作
• 实时协作（⭐⭐多人编辑⭐⭐与版本控制）

流程执行

实例部署、执行与监控
流程执行与调用时设计JSON Schema 规则记录不同模型的元数据信息（模型-方法-参数），不同类型模型（exe、dll、.Net程序集和python脚本等）设计JSON脚本，反序列化脚本存储至数据库进行持久化存储。流程引擎构建notify方法中统一调用函数调用Python，以弱类型语言Python为中间层可解释JSON Schema并生成代码调用具体不同模型。

布局引擎

提供可视化页面设计器，支持通过拖拽操作快速搭建交互表单，启动流程实例并提交表单提交就可触发工作流，表单驱动型应用：如审批系统。

表单编排（物料编排引擎）

动态表单渲染（物料渲染引擎）

流程绑定表单动态

。将流程引擎与表单绑定（如表单内容绑定到数据库字段）。
。设置统一触发器（如用户提交表单后调用后端接口）。
。配置工作流引擎，定义业务流程。

自定义渲染

监听状态：已执行

后端：查询流程实例的历史状态或者监听流程执行
前端：自定义可视化，SVG中defs自定义渲染， 是一个容器元素，用于存储可能会在文档其他地方重复引用的图形元素、样式、滤镜、渐变、图案等。

 <!-- 自定义箭头样式，用于成功状态下流程连线箭头 --> <defs ref=\"customSuccessDefs\"> <marker id=\"sequenceflow-end-white-success\" viewBox=\"0 0 20 20\" refX=\"11\" refY=\"10\" markerWidth=\"10\" markerHeight=\"10\" orient=\"auto\"> <path class=\"success-arrow\" d=\"M 1 5 L 11 10 L 1 15 Z\" style=\"stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;\"></path> </marker> <marker id=\"conditional-flow-marker-white-success\" viewBox=\"0 0 20 20\" refX=\"-1\" refY=\"10\" markerWidth=\"10\" markerHeight=\"10\" orient=\"auto\"> <path class=\"success-conditional\" d=\"M 0 10 L 8 6 L 16 10 L 8 14 Z\" style=\"stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;\"></path> </marker> </defs> addCustomDefs() { const canvas = this.bpmnViewer.get(\'canvas\'); const svg = canvas._svg; const customSuccessDefs = this.$refs.customSuccessDefs; const customFailDefs = this.$refs.customFailDefs; svg.appendChild(customSuccessDefs); svg.appendChild(customFailDefs); },

插件机制

ExtensionModdle

bpmn-moddle：用于处理 BPMN 模型的元数据，包括定义、创建、解析和验证，实现了BPMN 2.0标准中定义的BPMN 2.0元模型，它可以读取和写入符合BPMN 2.0模型的XML文档，并访问模型上绘制的形状和连接背后的BPMN相关信息（XML->内存对象）。

content-pad

PlatteProvider

PropertiesPanel