打造功能最全/强 bpmn-js 流程设计器

无名1999
0 阅读2分钟

开源一个 Flowable 版 BPMN 设计器：vue-bpmn-designer

大家好，我最近把一个自己长期在维护的流程设计器开源了：vue-bpmn-designer。
它是一个基于 Vue 3 + Vite 6 + TypeScript + bpmn-js 的现代化 BPMN 设计器，重点面向 Flowable 场景。

image.png

为什么做这个项目？

很多同学在做工作流平台时都会遇到这些问题：

  1. 原生 bpmn-js 可用，但业务侧改造成本高。
  2. Flowable 扩展字段多，属性面板要自己补大量逻辑。
  3. 校验、模拟、小地图、网格、节点扩展等能力要自己拼装。
  4. 前端工程化与类型系统不统一，后期维护成本高。

vue-bpmn-designer 的目标就是：
把“可用的 BPMN 编辑器”提升到“可落地的 Flowable 流程设计器”。

项目亮点

1. Flowable 深度适配

  • 内置 Flowable moddle 扩展（flowable: 前缀）。
  • 面向 Flowable 的任务类型和属性配置能力更完整。

2. 开箱即用的流程设计能力

  • 画布编辑、导入导出 XML、导出 SVG。
  • 撤销/重做、自动布局、缩放、适配视口。
  • 网格背景、小地图、深色模式切换。

3. 内置流程质量保障

  • 集成 bpmn-js-bpmnlint，支持实时规则校验。
  • 内置一组规则（如节点标签、连线约束、事件配置等），减少“能画不能跑”的流程。 image.png

4. 可扩展性强

  • 自定义 Palette、ContextPad、PopupMenu、Renderer、Replace。
  • 属性面板按节点类型动态渲染，便于二开和业务扩展。

image.png

5. 现代前端工程栈

  • Vue 3 + TS + Pinia + Element Plus + SCSS。
  • 自动导入（unplugin-auto-import / unplugin-vue-components）。
  • 内置 ESLint + Prettier + 类型检查流程。

适用场景

  • 自研工作流平台（BPMN 在线建模）。
  • OA/审批/低代码平台流程设计模块。
  • Flowable 项目中台化、可视化配置建设。
  • 需要“可二开”的 BPMN 前端底座。

image.png

快速开始

# 1) 克隆项目
git clone https://github.com/tsai996/vue-bpmn-designer.git
# 2) 进入目录
cd vue-bpmn-designer
# 3) 安装依赖（仅 pnpm）
pnpm install
# 4) 启动开发
pnpm dev

设计理念（给二开同学）

在 BPMN 编辑这类场景里，我比较坚持两点：

  1. 模型操作必须走 modeling 命令体系
    这样撤销栈、重做、事件流、联动渲染才能保持一致。

  2. 属性编辑与节点语义解耦
    通过组件化面板 + 类型化上下文，扩展新节点和新业务字段时更稳。

下一步计划

  • 持续补充更多 Flowable 业务面板与规则。
  • 增强多语言和配置化能力。
  • 提供更完整的嵌入式接入示例（用于业务系统快速集成）。

欢迎交流与共建

如果你正在做流程平台，或者也在折腾 BPMN / Flowable，欢迎来交流：

  • 点个 Star 支持一下项目持续迭代。
  • 提 Issue / PR 一起完善能力边界。
  • 也欢迎分享你们的业务场景，我会优先补齐高频需求。

项目地址再次放一下：

avatar
文章
阅读
粉丝