可视化流程设计器技术对比：钉钉风格 vs BPMN

可视化流程设计器技术对比：钉钉风格 vs BPMN

一、核心认知：钉钉审批流 vs BPMN 的本质区别

这是两种完全不同定位的流程设计范式：

维度	钉钉审批流	BPMN 2.0（bpmn-js）
数据结构	线性树形（单向链式）	图形（任意有向图 DAG）
使用人群	业务人员（无需专业知识）	流程设计师 / 开发者
学习难度	极低	中等偏高
节点粒度	粗粒度（业务大概念）	细粒度（BPMN 元素模型）
分支合并	线性，不支持复杂汇聚	支持多路分支、多路汇聚、Loop
表达能力	满足 80% 的简单审批流	满足 99% 的复杂 BPM 流程
数据格式	自定义 JSON	标准 BPMN XML
与 Flowable	需要转换适配器	原生兼容
适合场景	OA 审批、请假、报销等线性流程	业务流程、服务编排、复杂分支

1.1 钉钉审批流节点类型

节点类型	功能	主要配置项
发起人节点	流程起点，定义谁可以发起	发起人范围（所有人/角色/指定人）
审批人节点	人工审批	审批人来源、审批方式、时限
抄送节点	仅通知，无审批权	抄送人列表
条件分支	根据表单数据走不同路径	条件表达式（if/else）
并行分支	多个审批同时进行	合并方式（全通过 / 任意通过）
结束节点	流程终点	最终状态

1.2 数据模型对比

钉钉风格 JSON：

{
  "processId": "proc_001",
  "nodes": [
    { "nodeId": "start", "nodeType": "start" },
    {
      "nodeId": "approve1",
      "nodeType": "approval",
      "approvers": [{ "type": "role", "value": "manager" }],
      "nextNode": "cc1"
    },
    {
      "nodeId": "cc1",
      "nodeType": "cc",
      "ccList": [{ "type": "role", "value": "finance" }],
      "nextNode": "end"
    },
    { "nodeId": "end", "nodeType": "end" }
  ]
}

BPMN XML（等价流程）：

<bpmn:process id="proc_001" isExecutable="true">
  <bpmn:startEvent id="start"/>
  <bpmn:userTask id="approve1" name="经理审批"
    flowable:assignee="${manager}"/>
  <bpmn:userTask id="cc1" name="财务抄送"/>
  <bpmn:endEvent id="end"/>
  <bpmn:sequenceFlow sourceRef="start" targetRef="approve1"/>
  <bpmn:sequenceFlow sourceRef="approve1" targetRef="cc1"/>
  <bpmn:sequenceFlow sourceRef="cc1" targetRef="end"/>
</bpmn:process>

---

二、方案对比分析

2.1 bpmn-js（当前方案）

指标	值
GitHub	bpmn-io/bpmn-js
NPM	bpmn-js
Stars	9,100+
技术栈	框架无关（JS + SVG）
许可证	bpmn.io License（专有）
维护	✅ 持续活跃（Camunda 官方维护）
Flowable 兼容	🟢 优秀（原生兼容）
Vue3 支持	🟢 支持（需手动集成）

优势：

• ✅ 100% 遵循 BPMN 2.0 标准，与 Flowable 无缝兼容
• ✅ 生态完整，插件丰富，可高度自定义
• ✅ 被 Camunda 官方使用，生产验证充分
• ✅ 项目已完成集成（FlowablePropertiesProvider、Flowable 命名空间）

劣势：

• ❌ 业务人员学习曲线高，BPMN 概念复杂
• ❌ 无钉钉风格支持，需要开发转换适配层
• ❌ 不支持中国特色流程（加签、转签、驳回等）

---

2.2 LogicFlow（滴滴开源）⭐ 最推荐的替代方案

指标	值
GitHub	didi/LogicFlow
NPM	@logicflow/core
Stars	~10,000
技术栈	框架无关（JS + SVG + Mobx）
许可证	Apache 2.0 ✅
维护	✅ 持续活跃（滴滴官方维护）
文档	🟢 优秀（中文文档完善）
Flowable 兼容	🟡 中等（需要开发转换适配器）
Vue3 支持	🟢 官方支持

优势：

• ✅ 中文文档完善，开发体验好
• ✅ 天然适合钉钉风格审批流
• ✅ 自定义节点简单，二次开发成本低
• ✅ Apache 2.0，商用友好
• ✅ 滴滴持续维护，稳定可靠

劣势：

• ❌ 非 BPMN 标准，与 Flowable 集成需开发适配器
• ❌ 生成的模型格式与 BPMN XML 不兼容

与 Flowable 集成示例：

// LogicFlow → Flowable BPMN XML 转换（需自行开发）
function logicFlowToBpmnXml(lfData: LFGraphData): string {
  const nodes = lfData.nodes.map(node => {
    switch (node.type) {
      case 'approval': return `<bpmn:userTask id="${node.id}" name="${node.text}"/>`
      case 'condition': return `<bpmn:exclusiveGateway id="${node.id}"/>`
      case 'end': return `<bpmn:endEvent id="${node.id}"/>`
    }
  })
  // ...
}

---

2.3 AntV X6（蚂蚁金服）

指标	值
GitHub	antvis/X6
NPM	@antv/x6
Stars	5,000+
技术栈	框架无关（Canvas / SVG）
许可证	MIT ✅
维护	✅ 活跃（蚂蚁金服维护）
Flowable 兼容	🔴 困难（需要大量转换工作）
Vue3 支持	🟢 通过 @antv/x6-vue-shape

优势：

• ✅ 性能最优（Canvas 渲染，支持大规模节点图）
• ✅ 定制能力极强，可实现任意复杂交互
• ✅ Vue 组件作为节点渲染，体验好

劣势：

• ❌ 学习曲线陡峭，API 复杂
• ❌ 与 Flowable 集成极为复杂，不推荐
• ❌ 功能过强，对于审批流场景属于过度设计

适用场景 ：复杂图编辑、DAG 流水线设计、ER 图设计等，不推荐用于审批流。

---

2.4 AntV G6（蚂蚁金服）

指标	值
GitHub	antvis/G6
Stars	10,000+
定位	关系数据可视化引擎（非编辑）

结论 ：G6 专注数据可视化分析，不具备流程编辑能力，不适合用于流程设计器。适合：组织结构展示、知识图谱、流程执行追踪（只读）。

---

2.5 StavinLi/Workflow（仿钉钉 Vue 版）

指标	值
GitHub	StavinLi/Workflow-Vue3
技术栈	Vue 2 / Vue 3 / React（多版本）
定位	100% 仿钉钉审批流设计器
Flowable 兼容	🔴 极难（自定义格式，无法直接集成）
Vue3 支持	✅ 有 Vue3 版本

优势：

• ✅ UI 完全对标钉钉，业务用户体验极好
• ✅ 开箱即用，无需自行设计审批节点 UI
• ✅ 代码量小，易于学习和定制

劣势：

• ❌ 与 Flowable 集成极难（需完整重写转换逻辑）
• ❌ 功能有限（不支持循环、事件监听等 BPMN 高级特性）
• ❌ 社区规模小，长期维护存在不确定性

结论 ：适合纯前端审批流展示，不推荐用于需要 Flowable 后端执行的项目。

---

2.6 FlowLong（飞龙工作流，国产）

指标	值
GitHub	aizuda/flowlong
Gitee	aizuda/flowlong
技术栈	Java 后端 + Vue3 前端（全栈）
许可证	AGPL ⚠️（商用需授权）
维护	✅ 活跃
中国特色	✅ 支持加签、转签、驳回、会签

优势：

• ✅ 前后端完整开源，一体化工作流解决方案
• ✅ 完整支持中国特色流程（会签、加签、转签、驳回）
• ✅ 仿钉钉/飞书设计，业务用户友好
• ✅ JSON 格式，比 BPMN XML 对前端更友好

劣势：

• ❌ AGPL 许可证，商用需要特殊协议（重要风险）
• ❌ 与本项目 Flowable 引擎存在替换冲突，两者不能共存

结论 ：适合全新项目或对 AGPL 无顾虑的场景，不推荐现有 Flowable 项目引入。

---

2.7 AntFlow（蚂蚁流程，国产）

指标	值
Gitee	tylerzhou/Antflow
技术栈	Spring + Vue3（Java 主体）
许可证	免费商用 ✅
中国特色	✅ 虚拟节点模式，深度优化中国式办公
维护	✅ 活跃

优势：

• ✅ 免费商用，无许可证风险
• ✅ 虚拟节点模式创新，灵活性高
• ✅ 深度适配中国式办公场景

劣势：

• ❌ 与 Flowable 共存需要数据同步逻辑
• ❌ 社区规模相对较小

---

三、综合评分矩阵

方案	简单审批流	复杂 BPM	中国特色	Flowable 兼容	Vue3	文档	商用	综合
bpmn-js	🟡	🟢	❌	🟢	🟢	🟢	⚠️	8/10
LogicFlow	🟢	🟡	❌	🟡	🟢	🟢	🟢	7.5/10
AntV X6	🟡	🟢	❌	🔴	🟢	🟡	🟢	6/10
AntV G6	❌	❌	❌	❌	🟢	🟡	🟢	2/10
StavinLi	🟢	❌	🟢	🔴	🟢	🟡	🟢	5/10
FlowLong	🟢	🟡	🟢	🟡	🟢	🟡	⚠️	7/10
AntFlow	🟢	🟡	🟢	🟡	🟢	🟡	🟢	7/10

🟢 优秀 / 🟡 良好 / ❌ 不支持 / ⚠️ 存在风险

---

四、Flowable 集成难度评分

bpmn-js   ████████░░  8/10  已完成，原生兼容
LogicFlow ██████░░░░  6/10  需开发 LF→BPMN 转换适配器（约 1 周）
FlowLong  █████░░░░░  5/10  不同引擎，需大量改造
AntFlow   █████░░░░░  5/10  不同引擎，需大量改造
X6        ███░░░░░░░  3/10  不推荐，工作量极大
StavinLi  ██░░░░░░░░  2/10  自定义格式，几乎无法集成
G6        ░░░░░░░░░░  0/10  不适用

---

五、选型建议（基于本项目）

短期方案（推荐，立即可执行）

在 bpmn-js 基础上增强钉钉友好性

本项目已完整集成 bpmn-js + Flowable，建议不替换，而是在前端增加"简化模式"：

// 在 BpmnDesigner 中增加简化模式开关
const simpleMode = ref(false) // 切换钉钉风格 / BPMN 专业模式

// 简化模式：隐藏 BPMN 复杂概念，提供审批节点预设
const APPROVAL_NODE_TEMPLATE = {
  type: 'bpmn:UserTask',
  name: '审批节点',
  // 自动填充 Flowable 属性
  'flowable:assignee': '${approver}',
}

工作量 ：1~2 周
收益：保留 Flowable 兼容，提升业务用户体验

---

中期探索（3 个月内）

创建 LogicFlow POC，评估以下问题：

1. LogicFlow 实现钉钉审批流 UI 的开发体验
2. LogicFlow JSON → Flowable BPMN XML 转换成本
3. 与 Formily 表单的集成效果

若 POC 效果显著（用户体验提升明显，转换成本可接受），在新功能模块中优先使用 LogicFlow。

---

长期规划

场景	推荐方案
简单 OA 审批（80% 场景）	LogicFlow 自定义审批流设计器
复杂 BPM 流程（20% 场景）	保留 bpmn-js
完全国产替代	评估 AntFlow（无 AGPL 风险）

---

六、开源资源索引

名称	地址	许可证
bpmn-js	https://github.com/bpmn-io/bpmn-js	bpmn.io License
LogicFlow	https://github.com/didi/LogicFlow	Apache 2.0
AntV X6	https://github.com/antvis/X6	MIT
AntV G6	https://github.com/antvis/G6	MIT
StavinLi/Workflow	https://github.com/StavinLi/Workflow-Vue3	MIT
FlowLong	https://gitee.com/aizuda/flowlong	AGPL
AntFlow	https://gitee.com/tylerzhou/Antflow	免费商用
bpmn-js-properties-panel	https://github.com/bpmn-io/bpmn-js-properties-panel	MIT
flowable-bpmn-moddle	https://www.npmjs.com/package/flowable-bpmn-moddle	-