前端UI组件【免费下载链接】bpmn-jsA BPMN 2.0 rendering toolkit and web modeler.项目地址https://gitcode.com/gh_mirrors/bp/bpmn-js点击查看免费下载导读bpmn-js 是一套在浏览器中直接查看View与编辑EditBPMN 2.0 流程图的 JavaScript 工具库与 Web 建模器当前仓库版本为 18.29.0见 package.json。本文以项目官方 README.md 为主线完整讲解如何安装、初始化 bpmn-js 实例、导入 XML 渲染流程图并结合 lib/BaseViewer.js、lib/Viewer.js、lib/Modeler.js 等源码剖析其导入导出、生命周期事件与模块扩展机制帮助你从能跑通 Demo进阶到能按需定制自己的 BPMN 编辑应用。一、项目概览bpmn-js 是什么bpmn-js 的核心定位非常明确在浏览器中查看和编辑 BPMN 2.0 图表View and edit BPMN 2.0 diagrams in the browser。它不依赖任何后端渲染服务所有图表的解析、渲染与交互建模都发生在客户端。从源码结构看bpmn-js 本身是一个壳 特性模块的组合顶层入口 lib/index.js 默认导出Viewer即最精简的只读查看器lib/BaseViewer.js 提供了所有查看器/建模器共享的基础能力XML 导入、SVG 导出、生命周期事件、容器管理lib/Viewer.js、lib/NavigatedViewer.js、lib/Modeler.js 则分别以叠加模块的方式构建出三种不同能力级别的实例。它的构建依赖同样来自 bpmn.io 生态的两大底层工具bpmn-moddle负责在浏览器端读写 BPMN 2.0 XML在 package.json 中声明为bpmn-moddle: ^10.3.0承担 XML 与对象模型之间的双向转换diagram-js通用的图形渲染与编辑工具包声明为diagram-js: ^15.26.0提供画布、事件总线、元素注册表等基础机制。除此之外bpmn-js 还依赖diagram-js-direct-editing标签就地编辑、ids模型 ID 管理、min-dash/min-dom/tiny-svg等工具库共同构成完整的能力栈。二、安装两种官方推荐方式README 给出了两种引入方式你可以根据应用形态选择1. 直接使用预打包产物pre-packaged如果你不想配置任何打包工具可以直接在 HTML 中引入 bpmn-js 预打包好的构建文件以全局脚本方式使用。bpmn-js 通过 rollup.config.js 构建出dist目录下的产物如bpmn-modeler.js、bpmn-viewer.js等test/distro 目录中的测试用于验证这些分发产物可独立运行。2. 通过 npm 引入bundling把 bpmn-js 作为 npm 依赖装进 node 风格的 Web 应用中与 webpack、rollup 等打包器协同工作npm install bpmn-js随后在你的模块代码中按需导入对应类。两种方式的核心使用模式完全一致区别仅在于产物如何进入页面。提示本文档所在仓库为只读镜像直接执行npm install安装的是 npm 上发布的 bpmn-js 包若需开发/调试本仓库源码请参见下文构建与运行一节。三、快速开始创建实例并渲染一张流程图README 给出了最精简的Hello World用法——创建一个 bpmn-js 实例把 BPMN 2.0 XML 交给它渲染到浏览器中const xml ...; // my BPMN 2.0 xml const viewer new BpmnJS({ container: body }); try { const { warnings } await viewer.importXML(xml); console.log(rendered); } catch (err) { console.log(error rendering, err); }3.1 初始化参数container指定渲染挂载点既可以是 CSS 选择器字符串如body、#canvas也可以是 HTMLElement 节点。在 lib/BaseViewer.js 中可以看到完整的默认配置const DEFAULT_OPTIONS { width: 100%, height: 100%, position: relative };_createContainer会创建带bjs-container类的容器 divwidth/height支持数字自动补px或字符串position默认relative。常用初始化选项还包括moddleExtensions注册自定义 BPMN 扩展如 Camunda 扩展合并进 moddle 实例additionalModules追加或覆盖内部模块是扩展/定制 bpmn-js 的主要入口详见第五节canvas透传给 diagram-js 画布的子配置。3.2 importXML 的返回值与错误处理importXML(xml)返回一个 Promise成功时 resolve 为{ warnings: string[] }warnings收集了导入过程中产生的非致命警告如缺失 DI 信息失败时 reject 一个ImportXMLError它是Error与ImportXMLResult的联合体同样携带warnings字段。因此 README 中的try/catch写法可以同时处理两类信息解析告警与渲染失败。3.3 源码视角importXML 到底做了什么在 lib/BaseViewer.js 中importXML的完整链路依次为触发import.parse.start事件允许监听器在解析前改写 XML调用this._moddle.fromXML(xml, bpmn:Definitions)由 bpmn-moddle 把 XML 解析为对象模型得到definitions根元素、references引用、elementsByIdID 索引与解析警告触发import.parse.complete事件允许监听器在渲染前修改definitions调用importDefinitions(definitions, bpmnDiagram)先_setDefinitions保存模型再通过open(bpmnDiagram)执行图形化导入open内部先clear()清空已有画布再调用 lib/import/Importer.js 中的importBpmnDiagram完成实际的图形渲染全程结束后触发import.done事件并 resolve{ warnings }。由此可以看出importXML并不是简单的一把梭而是XML 解析 → 模型构建 → 图形渲染三个阶段每一阶段都暴露了事件钩子供上层应用介入详见第六节。四、三种开箱即用的实例类型bpmn-js 按能力层级提供三种实例源码中通过_modules数组的拼接清晰体现了层层叠加的关系1. Viewer —— 只读查看器lib/Viewer.js 仅组合了 5 个核心模块Viewer.prototype._modules [ CoreModule, // 核心渲染 DrilldownModdule, // 子流程下钻 OverlaysModule, // 覆盖层overlay支持 SelectionModule, // 元素选择 TranslateModule // 国际化翻译 ];它适合只展示、不编辑的场景如流程预览、审批视图。测试 test/spec/ViewerSpec.js 也验证了默认 Viewer 不包含 Outline 等建模模块。2. NavigatedViewer —— 可导航查看器lib/NavigatedViewer.js 在 Viewer 基础上追加了 4 个导航模块KeepSelectionVisibleModule、KeyboardMoveModule、MoveCanvasModule、ZoomScrollModule从而支持鼠标/键盘平移画布与缩放适合需要浏览大图的场景。3. Modeler —— 完整建模器lib/Modeler.js 是能力最完整的建模器其模块拼装逻辑是Modeler.prototype._modules [].concat( Viewer.prototype._modules, // 先继承 Viewer 的全部能力 Modeler.prototype._interactionModules, // 导航交互同 NavigatedViewer Modeler.prototype._modelingModules // 建模模块 );_modelingModules列表见 lib/Modeler.js覆盖了完整的编辑能力栈例如PaletteModule左侧调色板通过 lib/features/palette/PaletteProvider.js 提供可拖拽的 BPMN 元素ContextPadModule元素右键/选中后的上下文操作菜单ModelingModule核心建模引擎由 lib/features/modeling/Modeling.js 实现元素的创建、移动、删除、连线等命令CopyPasteModule、AlignElementsModule、DistributeElementsModule、GridSnappingModule、SnappingModule复制粘贴、对齐、分布、网格吸附等生产力工具LabelEditingModule标签就地编辑KeyboardModule键盘快捷键绑定SearchModule元素搜索ReplacePreviewModule元素替换预览。此外Modeler还挂载了静态属性Modeler.Viewer Viewer、Modeler.NavigatedViewer NavigatedViewer便于从统一入口按需引用。Modeler 额外提供了createDiagram()方法lib/Modeler.js内部使用一段内置的空流程 XML 调用importXML用于新建一张空白图的典型场景const modeler new BpmnJS.Modeler({ container: #canvas }); await modeler.createDiagram();三种实例怎么选能力ViewerNavigatedViewerModeler渲染 BPMN 2.0 图表✅✅✅覆盖层 Overlay✅✅✅画布平移/缩放❌✅✅建模编辑调色板、上下文面板等❌❌✅新建空白图createDiagram()❌❌✅五、扩展机制additionalModules 与组件覆盖README 提到 bpmn-js 是可扩展的工具包其扩展入口在源码中有明确实现。BaseViewer._initlib/BaseViewer.js把模块拼接为const diagramModules [].concat( staticModules, // 注入 bpmnjs、moddle 服务实例 baseModules, // 内置模块_modules additionalModules // 你的扩展/覆盖模块 );5.1 追加新模块扩展能力lib/Viewer.js 与 lib/Modeler.js 的文档注释都给出了标准范式模块是一个暴露命名服务的对象通过__init__声明初始化服务通过[ type, Constructor ]注册服务构造器// 1) 定义一个带依赖注入的服务 function InteractionLogger(eventBus) { eventBus.on(element.hover, function(event) { console.log(hovered); }); } InteractionLogger.$inject [ eventBus ]; // 显式声明依赖保证压缩安全 // 2) 把它包装成扩展模块 const extensionModule { __init__: [ interactionLogger ], interactionLogger: [ type, InteractionLogger ] }; // 3) 通过 additionalModules 挂载 const viewer new BpmnJS.Viewer({ container: #canvas, additionalModules: [ extensionModule ] });$inject数组中的eventBus等字符串会由依赖注入容器解析为已注册服务这是 bpmn-js以及 diagram-js插件开发的通用写法。5.2 覆盖内置组件替换能力lib/Modeler.js 还演示了覆盖而非追加的用法以同名服务键重新注册一个 provider 即可替换默认实现。例如自定义上下文面板 Provider直接禁用默认的上下文操作菜单function CustomContextPadProvider(contextPad) { contextPad.registerProvider(this); this.getContextPadEntries function(element) { return {}; // 返回空条目相当于禁用上下文面板 }; } CustomContextPadProvider.$inject [ contextPad ]; const overrideModule { contextPadProvider: [ type, CustomContextPadProvider ] }; const modeler new BpmnJS.Modeler({ container: #canvas, additionalModules: [ overrideModule ] });该机制同样适用于paletteProvider、rules业务规则、renderer自定义渲染等任何注册为服务的内置组件。仓库中的集成测试 test/integration/custom-elements 展示了自定义元素工厂、渲染器与规则如何组合工作是学习扩展开发的极佳样板。六、导入导出与生命周期事件6.1 导出saveXML 与 saveSVG除了导入lib/BaseViewer.js 还实现了两个导出 APIsaveXML(options)lib/BaseViewer.js把当前模型序列化回 BPMN 2.0 XML。options支持format是否格式化输出与preamble是否包含 XML 声明返回{ xml }失败时抛错并携带error。它通过this._moddle.toXML(definitions, options)完成序列化并在saveXML.start、saveXML.serialized、saveXML.done三个阶段暴露事件钩子。saveSVG()lib/BaseViewer.js把当前画布导出为 SVG 字符串返回{ svg }。实现上读取 canvas 的活动图层与defs计算内容包围盒并自动加上 5px 的EXPORT_PADDING边距避免元素描边被裁剪最终拼装为带viewBox的标准 SVG 文档。典型的编辑-保存流程因此是const modeler new BpmnJS.Modeler({ container: #canvas }); // ...用户完成建模后... const { xml } await modeler.saveXML({ format: true }); const { svg } await modeler.saveSVG();6.2 生命周期事件钩子从importXML、saveXML的源码见 lib/BaseViewer.js可以梳理出完整的事件序列应用可借助viewer.on(...)/viewer.off(...)订阅导入阶段import.parse.start→import.parse.complete→import.render.start→import.render.complete→import.done保存 XML 阶段saveXML.start→saveXML.serialized→saveXML.done保存 SVG 阶段saveSVG.start→saveSVG.done挂载/卸载attach、detachon方法支持(events, priority, callback, that)重载lib/BaseViewer.jspriority数字越小越先执行监听器返回false可阻止事件默认行为调用event.stopPropagation()可阻止后续监听器处理——这是 diagam-js EventBus 的统一约定。例如在import.parse.complete中根据elementsById统计元素数量或在saveXML.serialized中对 XML 做后处理。6.3 其他实用实例方法attachTo(parentNode)/detach()把实例容器挂载到新的 DOM 节点或从当前节点摘下便于在 SPA 中切换挂载位置clear()清空画布上所有已绘制元素实例可继续用于打开其他图destroy()销毁实例并从文档树中移除容器getDefinitions()取回当前导入的definitions模型对象供外部读取 BPMN 语义信息。七、构建与运行7.1 从 npm 包使用如果只是把 bpmn-js 当作依赖使用安装后直接 import 即可npm install bpmn-jsimport BpmnJS from bpmn-js; // 默认导出 Viewer import Modeler from bpmn-js/lib/Modeler;7.2 在本仓库源码上开发克隆仓库并安装依赖npm installpackage.json中定义的主要脚本如下# 构建库并运行全部测试lint 主题校验 测试 生成类型 构建 distro 校验 distro npm run all # 启动一个本地单实例 Modeler开发模式自动监听、不退出 npm start # 启动完整开发环境karma 单元测试 浏览器调试 npm run dev各脚本对应的底层命令package.jsonnpm run all依次执行lint、lint:theme校验 assets/bpmn-js.css 主题、testkarma 运行 test/config/karma.unit.js 下的单元测试、generate-types生成.d.ts类型声明并做tsc --noImplicitAny检查、distro构建分发产物与test:distronpm run dev等价于karma start test/config/karma.unit.js --auto-watch --no-single-run会持续监听源码变更并刷新浏览器npm start通过cross-env SINGLE_STARTmodeler把环境变量注入 karma从而只跑单个 Modeler 用例便于手动交互调试。7.3 开发最新快照的额外步骤README 特别提醒构建最新开发快照development snapshot时可能需要额外的项目设置详见 docs/project/SETUP.md。该文档描述了源码联动开发流程把bpmn-js、diagram-js、bpmn-moddle三个仓库克隆到同一目录在bpmn-js/node_modules下用 npm link或 Linux/OS X 的ln -s、Windows 的mklink /d把diagram-js与bpmn-moddle链接进来使上游改动即时生效分别在三个项目里执行npm install再逐个执行npm run all验证一切正常。Linux/OS X 用户还可以直接运行仓库提供的脚本 docs/project/setup.shWindows 用户使用 docs/project/setup.bat 一键完成上述自动化配置。若需要克隆本仓库可使用git clone https://gitcode.com/gh_mirrors/bp/bpmn-js.git。八、周边生态与后续学习路径README 的 Resources 与 Related 部分给出了继续深入的方向本站镜像仓库内可直接查阅的部分CHANGELOG.md版本演进与变更记录升级前务必核对lib/features所有内置特性的源码是学习如何用 additionalModules 写插件的最佳教科书test/spec与每个特性一一对应的行为测试如 test/spec/ViewerSpec.js 覆盖导入、覆盖层、SVG 导出等场景既验证行为也是用法示例test/integration/custom-elements自定义元素的端到端集成示例。bpmn-js 之所以可扩展底层依赖正是前面提到的 bpmn-moddleXML 读写与 diagram-js渲染与编辑内核。理解这三者的分工——bpmn-moddle 管数据、diagram-js 管图形、bpmn-js 管 BPMN 语义与特性编排——是掌握整个 bpmn.io 技术栈的关键。九、许可说明bpmn-js 遵循 bpmn.io 开源许可条款使用详见仓库 LICENSEpackage.json 中亦标注license: SEE LICENSE IN LICENSE。bpmn-io 许可要求在使用时保留项目标识lib/BaseViewer.js 的addProjectLogo默认会在画布右下角注入 bpmn.io 徽标链接属许可合规行为生产环境可阅读 lib/util/PoweredByUtil.js 了解其实现。商业集成前请仔细核对许可原文确认是否符合你的使用场景。赞分享前端UI组件【免费下载链接】bpmn-jsA BPMN 2.0 rendering toolkit and web modeler.项目地址https://gitcode.com/gh_mirrors/bp/bpmn-js点击查看免费下载相关推荐BPMN 2.0 演示 - 在Web上的流程图神器BPMN 2.0 演示 在Web上的流程图神器 THE 0TH POSITION OF THE ORIGINAL IMAGE bpmn js 是一个在浏览器中查前端UI组件如何快速上手Vite-Vue-BPMN-Process打造专业级流程编辑器的完整指南如何快速上手Vite Vue BPMN Process打造专业级流程编辑器的完整指南 Vite Vue BPMN Process是一款基于Vite Typ前端工作流自动化流程编排如何快速构建企业级BPMN流程编辑器Vite Vue BPMN终极指南如何快速构建企业级BPMN流程编辑器Vite Vue BPMN终极指南 在现代企业数字化转型中业务流程管理BPM已成为提升运营效率的关键。基于Vite前端工作流自动化流程编排上一篇深入解析 cloud.google.com/go/storagekOps 中 GCS 对象存储的 Go 客户端集成与实践下一篇3步快速上手MagicAnimate免费AI动画生成终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考