BPMN-JS 介绍

bpmn-js 简介

bpmn-js 是一个基于 Web 的 BPMN 2.0（Business Process Model and Notation）流程建模与渲染框架，由 Camunda 团队开源维护，使用 JavaScript 实现，能够在浏览器中对 BPMN 流程进行可视化展示、编辑与交互。

它遵循 BPMN 2.0 标准规范，能够解析和生成符合标准的 BPMN XML 文件，广泛应用于流程设计器、工作流平台、低代码 / 无代码系统等场景。

核心能力

1. BPMN 流程渲染

• 将 BPMN 2.0 XML 渲染为 SVG 图形
• 支持流程、事件、网关、子流程、泳道等全部标准元素
• 具备良好的视觉一致性，符合 BPMN 官方语义

2. 流程建模与编辑

• 提供完整的 Web 端流程编辑器
• 支持拖拽创建、连接、删除 BPMN 元素
• 支持元素属性配置（如 ID、名称、条件表达式等）
• 可与自定义表单或属性面板深度集成

3. BPMN XML 读写

• 导入 BPMN XML → 渲染流程图
• 编辑流程 → 导出 BPMN XML
• 与后端流程引擎（如 Flowable、Camunda、Activiti）高度兼容

4. 高度可扩展的架构

• 基于模块化和事件驱动设计

• 支持通过插件方式扩展：

  • 自定义节点类型
  • 自定义属性面板（Properties Panel）
  • 自定义渲染样式（Renderer）
  • 自定义校验规则（Lint）

核心依赖

• diagram-js: 用于在web上显示和修改图表的工具箱。是 bpmn-js 的基础，bpmn-js 是在其之上实现的。
• ids: 一个简单的ID生成器，用于生成 BPMN 元素的 ID。
• tiny-svg: 一个简单的 SVG 创建和拷贝工具

部分扩展

• diagram-js-minimap: 用于在画图区域显示小地图
• bpmn-js-properties-panel：bpmn-js 官方的属性面板，提供有限属性修改功能，支持自定义，但是自定义复杂，界面设计受限。
• diagram-js-grid: 在画图区域显示网格
• bpmnlint：BPMN 元素验证，比如必要属性验证，连线验证，依赖验证等等。
• bpmn-js-color-picker：支持给元素上色
• bpmn-js-token-simulation：BPMN 流程图执行过程模拟
• bpmn-js-create-append-anything：在工具栏增加更多（三个点）功能，点击可以展示 BPMN-JS 支持的所有元素。

更多扩展可通过 Github 官方仓库查找。-->直通车-->