Skip to content

miyuesc/bpmn-js-questions

Repository files navigation

bpmn-js 常见问题和解决方案及工具库说明

如果有新的问题,可以点击 这里 创建新的 issue 进行讨论。

bpmn-js 交流群附属资料:https://juejin.cn/post/7304831120710434868

Concat: Discord

上次更新时间(UTC):2025-10-06 00:54:33

一、项目与书籍推荐

1. 开源项目 eagle-flow

钉钉风格且功能强大 的流程图编辑器,预览地址:https://designer.bpmport.com/eagle/纯前端实现 xml 生成

2. 开源项目 bpmn-process-designer

核心 bpmn-js 使用与扩展示例

与 Flowable 流程引擎深度融合,结合实际业务场景和使用方式,对 bpmn-js 进行了深度改造,提供了更多的功能和特性。

提供更加强大的工具栏与物料面板、属性配置,重构 lint 模块与 simulation 模块,实现更加适合国内用户的 UI 界面和交互方式。

详情请查看 官网

4. 相关书籍

《深入Activiti流程引擎:核心原理与高阶实战》- 贺波

《深入Flowable流程引擎:核心原理与高阶实战》- 贺波

Activiti 引擎与 Flowable 引擎的核心原理与高阶实战,详细介绍了 Activiti 与 Flowable 引擎的核心原理,以及如何使用 Activiti 与 Flowable 引擎进行流程设计、流程部署、流程执行等操作。

二、bpmn-js 源码解析和实践

当我们已经掌握了之前的内容以后,再来看 bpmn-js 或者 dmn-js 图形界面 的逻辑其实就很简单了。 根据 Bpmn.js 进阶指南之原理分析与模块改造 中讲到的 bpmn-js 的 Mode

在正式开始介绍 bpmn.js 源码之前,我想先向大家介绍一下与 bpmn.js 相关的一些概念。根据官网介绍,bpmn.js 作为符合 BPMN 2.0 标准 XML 文件的 **阅读器

作为 bpmn.js 与 diagram.js 的模块化系统的底层依赖,Injector 通过 依赖注入 的形式完美分开了不同功能模块之前的核心代码,保证使用者 只需要了解所需依赖的功能,然后专注于各

总的来说,diagram.js 虽然是作为 bpmn.js 的底层项目,用来提供绘图能力与交互能力,并实现了一些工具函数;但是 本身并没有实现太多功能,只是作为初始化依赖注入器与基础模块的入口,通过

在上一节的 diagram.js 简介部分,有提到过我们在 new 一个 Diagram 实例时,实际是将配置项和 CoreModule 核心模块放在一起之后用来 初始化依赖注入系统并绑定到 Diag

bpmn-js 源码解析和实践:源码篇4 diagram-js 的 ElementFactory 与 ElementRegistry 解析。

《bpmn-js 源码解析和实践》第六篇:CommandStack 命令处理与记录的栈。解析了 diagram-js 的核心模块之一 —— CommandStack 命令记录栈的部分逻辑。

上一节中有提到过,features 目录中,主要是一些 功能扩展模块,包含了 palette 画板、contextPad 上下文菜单等,此次就用两章的篇幅来讲一下这里面的一些常用模块(bpmn-js

上一章介绍了 Palette、ContextPad 和 Overlays 三个用来辅助绘图的扩展模块,以及如何使用和改造这三个模块。 但除了这几个模块之外,还需套涉及到 鼠标操作、画布操作、拖拽创建等

前两章我们讲了一些 fratures 中用来帮助创建和操作图元素的相关模块,但是这些内容依然只占了 features 中的一小部分。当我们从 Palette 创建元素或者通过 ContextPad 修

moddle 仓库,本身在 bpmn-js 或者 dmn-js 等基于 diagram-js 开发的图形绘制库中,相当于 对元素及元素扩展属性的一个标准化处理模块,它 规定了如何注册元素类型与属性更新

上一节 Moddle 的讲解中,已经清楚了 bpmn-js 在 编辑图形的过程中 是通过什么方式来规定每个元素与属性的合法性的,知道了我们所说的 属性描述对象 descriptor json 到底是一

三、常见问题与解决方案

❓ Questioner: xiaoyu-ye

✅ This question has been solved.

❓ Questioner: 13072065037

✅ This question has been solved.

❓ Questioner: duansheli

✅ This question has been solved.

❓ Questioner: LouisXuan

✅ This question has been solved.

❓ Questioner: coder319

✅ This question has been solved.

❓ Questioner: y4n6

✅ This question has been solved.

❓ Questioner: Xnwf

✅ This question has been solved.

❓ Questioner: miyuesc

✅ This question has been solved.

❓ Questioner: miyuesc

✅ This question has been solved.

❓ Questioner: miyuesc

✅ This question has been solved.

❓ Questioner: miyuesc

✅ This question has been solved.

❓ Questioner: miyuesc

✅ This question has been solved.

❓ Questioner: miyuesc

✅ This question has been solved.

❓ Questioner: miyuesc

✅ This question has been solved.

❓ Questioner: Accccccccc

✅ This question has been solved.

四、bpmn-js 常用工具库说明

(一) bpmn-io 官方工具

流程图自动布局优化插件,bpmn-io 官方团队开发维护。

非 bpmn-js 直接使用的插件模块,而是提供方法优化 xml 字符串。

编辑器画布区域 点状背景,bpmn-io 官方团队开发维护。

编辑器小地图组件,bpmn-io 官方团队开发维护。

Palette 及 ContextPad 强化组件,用于快捷创建 bpmn-js 内置所有类型元素,bpmn-io 官方团队开发维护。

元素 ContextPad 中的颜色选择器,用于快速修改指定元素颜色主题,bpmn-io 官方团队开发维护。

bpmn 流程图流转过程模拟,bpmn-io 官方团队开发维护。

bpmn 流程图差异对比工具,bpmn-io 官方团队开发维护,非 bpmn-js 直接使用的插件模块

bpmn 编辑器属性面板,支持 Camunda 和 Zeebe 引擎,bpmn-io 官方团队开发维护。

bpmn-js 手绘风格元素,bpmn-io 官方团队开发维护。

bpmn documentation 可视化显示插件,bpmn-io 官方团队开发维护。

bpmn 流程图校验结果可视化插件,必须搭配 bpmnlint 使用,bpmn-io 官方团队开发维护。

(二) 作者(MiyueFE)工具

编辑器画布区域 网格背景,基于官方 diagram-js-grid,MiyueFE 开发维护。

支持折叠和展开分组的 Palette 组件,与默认 Palette 互斥,MiyueFE 开发维护。

优化分组显示和交互的 ContextPad 组件,与默认 ContextPad 互斥,MiyueFE 开发维护。

bpmn-js 编辑器,以及官方属性面板(Camunda 和 Zeebe)中文翻译,MiyueFE 开发维护。

(三) 其他

bpmn-js 编辑 事件及任务节点 的 resize 支持,ElCondor1969 开发维护 (扩展 BpmnRules 的 resize 规则即可,不建议直接使用该库,已多年没有代码更新)。

赞助

About

bpmn-js 常见使用问题

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published