流程设计器技术选型评估报告

一、执行摘要

本报告对当前项目所采用的流程设计器技术进行系统性评估，并与市场主流方案进行多维度对比分析。

核心结论：

当前使用 bpmn-js 裸库（最小化配置） ，仅实现了画布渲染和基础工具栏，未集成属性面板，导致用户无法在设计器内配置任何 Flowable 扩展属性（指派人、网关条件、定时器等）。这是与企业级成熟方案之间最关键的功能鸿沟，需要优先补全。

二、当前技术栈分析

2.1 依赖组成

包名	版本	角色	实际使用状态
`bpmn-js`	^18.12.0	BPMN 2.0 核心建模器	✅ 已集成
`bpmn-js-properties-panel`	^5.52.1	属性面板（Flowable/Camunda 扩展）	⚠️ 已安装但未集成
`@bpmn-io/properties-panel`	^3.40.2	属性面板基础框架	⚠️ 已安装但未集成
Flowable	7.0.1（后端）	BPMN 2.0 执行引擎	✅ 运行中

2.2 当前架构

复制代码

BpmnModeler（最小配置）
  ├── 画布（diagram-js）              ✅ 正常工作
  ├── 基础工具栏（自定义）            ✅ 放大/缩小/撤销/重做/导入/保存
  ├── 右键上下文菜单（bpmn-js 内置）  ✅ 基础元素操作
  ├── 元素面板（bpmn-js 内置左侧）    ✅ 基础节点拖拽
  └── 属性面板（bpmn-js-properties-panel） ❌ 未集成

2.3 当前实现代码关键点

typescript 复制代码

// BpmnDesigner.vue - 当前仅用最基础的 BpmnModeler
modeler = new BpmnModeler({
  container: canvasRef.value
  // ❌ 没有 additionalModules（无属性面板）
  // ❌ 没有 moddleExtensions（无 Flowable XML 扩展解析）
})

完整的 Flowable 集成应该是：

typescript 复制代码

import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
  FlowablePropertiesProviderModule  // 或 CamundaPropertiesProviderModule
} from 'bpmn-js-properties-panel'

modeler = new BpmnModeler({
  container: canvasRef.value,
  propertiesPanel: { parent: '#properties-panel' },
  additionalModules: [
    BpmnPropertiesPanelModule,
    BpmnPropertiesProviderModule,
    FlowablePropertiesProviderModule
  ],
  moddleExtensions: {
    flowable: FlowableModdleDescriptor
  }
})

2.4 XML 命名空间现状

当前默认 XML 骨架同时混用了两个命名空间：

xml 复制代码

xmlns:activiti="http://activiti.org/bpmn"      ← Activiti 命名空间
targetNamespace="http://www.flowable.org/processdef"  ← Flowable 命名空间

⚠️ 混用命名空间可能导致 Flowable 在解析部分扩展属性时出现歧义，应统一使用 Flowable 命名空间。

三、市场主流方案概览

3.1 方案矩阵

方案	底层引擎	适配的流程引擎	许可证	定位
Camunda Modeler（桌面端）	bpmn-js	Camunda 7/8	MIT + 商业	专业桌面建模工具
Flowable UI Modeler	bpmn-js	Flowable	商业（Open Source 版有限）	Flowable 官方设计器
Activiti Modeler	bpmn-js	Activiti	Apache-2.0	Activiti 官方设计器
bpmn-process-designer（国内）	bpmn-js	Flowable/Activiti	MIT	国内开源增强版
当前方案	bpmn-js	Flowable	---	裸库最小集成

关键认知 ：bpmn-js 本身就是业界标准，几乎所有主流方案都基于它。差距不在于选择什么库，而在于集成深度。

四、功能差距深度分析

4.1 最关键差距：属性面板缺失（风险等级：🔴 极高）

这是当前最严重的功能缺口。没有属性面板，用户无法在界面上配置任何流程执行逻辑，只能靠手工编辑 XML。

配置项	成熟方案（有属性面板）	当前方案（无属性面板）
UserTask 指派人	下拉选择用户/组	❌ 只能手编 XML
UserTask 候选组	勾选角色列表	❌ 只能手编 XML
网关条件表达式	可视化表达式编辑器	❌ 只能手编 XML
定时边界事件	ISO 8601 时间选择器	❌ 只能手编 XML
服务任务类名	输入框 + 类提示	❌ 只能手编 XML
多实例配置	串行/并行切换 + 集合配置	❌ 只能手编 XML
流程变量	变量列表管理	❌ 只能手编 XML
表单Key绑定	下拉关联已有表单	⚠️ 仅靠代码联动，无 XML 属性写入
监听器配置	事件类型 + 类/表达式	❌ 只能手编 XML

4.2 Flowable 扩展元素未解析（风险等级：🔴 高）

缺少 moddleExtensions 配置，导致 Flowable 专有扩展元素（flowable:assignee、flowable:candidateGroups 等）无法被 bpmn-js 正确解析和渲染，可能在导入含扩展属性的 XML 时静默丢失数据。

4.3 验证机制缺失（风险等级：🟡 中）

验证项	成熟方案	当前方案
流程完整性检查（开始/结束事件）	✅ 保存前自动校验	❌ 无验证
未连接节点检测	✅ 可视化标红	❌ 无检测
网关分支条件完整性	✅ 告警提示	❌ 无检测
XML Schema 合规性	✅ 自动校验	❌ 无校验

4.4 工作流特有功能缺失（风险等级：🟡 中）

功能	Camunda Modeler	Flowable UI	bpmn-process-designer	当前方案
会签（多实例）	✅	✅	✅	❌
条件网关可视化配置	✅	✅	✅	❌
审批人动态配置	✅	✅	✅	❌
抄送节点	❌（标准之外）	❌	✅（中国特色）	❌
催办/超时自动处理	✅	✅	✅	❌
Token 流程仿真	✅	❌	❌	❌
小地图（Minimap）	✅	❌	✅	❌
流程模板库	✅	✅	❌	❌
热键绑定提示	✅	❌	❌	❌

4.5 用户体验差距（风险等级：🟡 中）

体验项	成熟方案	当前方案
节点对齐辅助线	✅	✅（bpmn-js 内置）
复制/粘贴节点	✅	✅（bpmn-js 内置）
多选操作	✅	✅（bpmn-js 内置）
右键菜单	✅ 丰富	⚠️ bpmn-js 基础菜单
连线样式（直角/曲线）	✅	⚠️ 默认样式
节点颜色自定义	✅	❌
评论/批注	✅	❌
键盘快捷键面板	✅	❌
搜索节点	✅	❌
全屏模式	✅	❌

五、与 bpmn-process-designer（国内最流行方案）详细对比

bpmn-process-designer 是国内最广泛使用的开源 Flowable/Activiti 流程设计器增强包，也基于 bpmn-js，但做了深度定制。

5.1 功能对比

功能维度	bpmn-process-designer	当前方案
属性面板	✅ 完整 Flowable 扩展属性	❌ 未集成
指派规则	✅ 用户/角色/部门/表达式多模式	❌ 无
监听器配置	✅ 执行/任务监听器 UI 配置	❌ 无
表单Key绑定	✅ 下拉关联表单	⚠️ 代码联动（无属性写入）
会签配置	✅ 串行/并行/比例完成	❌ 无
网关条件	✅ 可视化表达式	❌ 无
XML 编辑器	✅ 实时双向同步	⚠️ 只读查看
扩展命名空间	✅ 自动注入	⚠️ 混用有歧义
中文本土化	✅ 完全中文	⚠️ 部分中文

5.2 集成难度评估

从当前方案迁移到完整方案有两条路径：

路径 A：在现有 bpmn-js 基础上补全（推荐）

复制代码

工作量：8-15 天
风险：低

任务	预估工期
集成 bpmn-js-properties-panel（Flowable Provider）	2-3 天
注入 FlowableModdleDescriptor（扩展元素解析）	1 天
实现指派人/候选组 UI 配置	2-3 天
实现网关条件表达式 UI	1-2 天
实现多实例（会签）配置 UI	2-3 天
修复命名空间混用问题	0.5 天
保存前流程合法性校验	1 天

路径 B：直接引入 bpmn-process-designer

复制代码

工作量：3-5 天（集成+适配）
风险：中（与现有样式/数据结构的兼容性）

六、综合评分

评分说明：满分 10 分，基于企业流程引擎场景评估

评估维度	权重	当前方案	Camunda Modeler	bpmn-process-designer	Flowable UI
BPMN 2.0 合规性	20%	7.0	10.0	8.5	9.0
属性配置完整性	25%	1.0	9.5	8.5	9.0
Flowable 集成深度	20%	2.0	7.0	9.0	10.0
用户体验	15%	5.0	9.0	7.5	7.0
可扩展性	10%	7.5	8.0	8.0	5.0
中文本土化	10%	7.0	5.0	9.5	6.0
加权总分		4.4	8.5	8.5	8.7

当前方案总分偏低的核心原因是"属性配置完整性"和"Flowable 集成深度"两项权重较高但得分极低。

七、优先级建议

P0（立即处理）--- 影响系统可用性

集成属性面板 ：注册 BpmnPropertiesPanelModule + FlowablePropertiesProviderModule
注入扩展模型 ：添加 moddleExtensions: { flowable: FlowableModdleDescriptor } 防止扩展属性丢失
修复命名空间 ：统一使用 http://flowable.org/bpmn 命名空间，移除 Activiti 混用

P1（近期完成）--- 影响核心业务功能

UserTask 指派配置 UI ：用户/角色/候选组选择器，并正确写入 flowable:assignee 等属性
网关条件表达式 UI：可视化配置排他网关和并行网关的条件
保存前合法性校验：确保有且仅有一个 StartEvent、EndEvent，所有节点均已连接

P2（版本迭代）--- 提升用户体验

多实例（会签）配置面板：串行/并行/完成比例
流程监听器配置 UI
小地图（Minimap）插件
流程验证结果可视化（错误节点高亮）

八、附录

附录 A：bpmn-js 插件生态（可直接使用）

插件	功能	引入成本
`bpmn-js-properties-panel`	属性面板（Flowable/Camunda 扩展）	低
`diagram-js-minimap`	小地图导航	极低
`bpmn-js-token-simulation`	Token 流程仿真	低
`bpmn-js-color-picker`	节点颜色自定义	极低
`bpmn-js-create-append-anything`	扩展上下文菜单	低

附录 B：Flowable 专有扩展属性清单

以下属性必须通过 moddleExtensions 注册后，bpmn-js 才能正确读写：

xml 复制代码

<!-- UserTask 扩展属性 -->
<flowable:assignee>#{initiator}</flowable:assignee>
<flowable:candidateUsers>user1,user2</flowable:candidateUsers>
<flowable:candidateGroups>role_manager</flowable:candidateGroups>
<flowable:formKey>form:template-001</flowable:formKey>
<flowable:dueDate>P3D</flowable:dueDate>

<!-- 执行监听器 -->
<flowable:executionListener event="start" class="com.workflow.listener.StartListener"/>

<!-- 多实例配置 -->
<multiInstanceLoopCharacteristics isSequential="false">
  <flowable:collection>${approvers}</flowable:collection>
  <flowable:elementVariable>approver</flowable:elementVariable>
  <completionCondition>${nrOfCompletedInstances/nrOfInstances >= 0.5}</completionCondition>
</multiInstanceLoopCharacteristics>

附录 C：参考资料

资源	地址
bpmn-js 官方文档	https://bpmn.io/toolkit/bpmn-js/
bpmn-js-properties-panel	https://github.com/bpmn-io/bpmn-js-properties-panel
Flowable Moddle Descriptor	https://github.com/flowable/flowable-moddle
bpmn-process-designer	https://github.com/miyuesc/bpmn-process-designer
Flowable BPMN 扩展文档	https://www.flowable.com/open-source/docs/bpmn/ch05a-Spring-Boot