BPMN 是一个标准。 Idea有一个可视化界面。 BPMN 是一个不错的选择。下面我们简单看一下它的内容。

BPMNJS 简介

bpmn.js 是一个BPMN 2.0 渲染工具包和Web 建模器。它是用JavaScript 编写的，在浏览器中嵌入BPMN 2.0 图表，并且独立于后端，这也使得将其轻松嵌入到任务Web 应用程序中。 可以单独使用，也可以集成到您的应用程序中间。

该库的构建方式使其既可以作为查看器，也可以作为Web 建模器

使用查看器将BPMN 2.0 嵌入到应用程序中，并通过系统数据丰富查看器。使用Modeler 在您的应用程序中创建BPMN 2.0 图表。

diagram-js 和bpmn-moddle

在BPMN 2.0中，bpmn-js主要依赖两个库：diagram-js和bpmn-moddle。

bpmn.js 构建在两个库diagram-js 和bpmn-moddle 之上。 Diagram-js 用于绘制形状和连接。它为我们提供了与这些图形元素交互的方法，以及帮助用户构建强大的BPMN 查看器的辅助工具。对于建模，它提供了上下文、调色板和重做/撤消等功能。 bpmn-moddle 它允许我们读写符合BPMN 2.0 模式的XML 文档，并访问图表上绘制的形状和连接背后的BPMN 相关信息。在这两个相关库之上，bpmn-js 定义了BPMN 的细节，例如外观、建模规则和工具（调色板）等。

diagram-js(图表交互/建模)

模块系统：在底层，diagram-js 使用依赖注入来连接和发现图表组件。当在diagram-js上下文中讨论模块时，我们指的是提供命名服务及其实现的单元。 “服务”是可以使用其他服务在图表上下文中执行操作的函数或实例。

Canvas - 提供用于添加和删除图形元素的API；处理元素生命周期并提供用于缩放和滚动的API。 EventBus - 管理监听事件的事件总线模块，感兴趣的各方可以订阅各种事件并在事件发出后对其采取行动。事件总线帮助我们解耦关注点并模块化功能，以便新功能可以轻松地挂接到现有行为中。 ElementFactory - 用于基于diagram-js 的内部数据模型创建形状和连接的工厂。 ElementRegistry - 了解添加到图表中的所有元素，并提供API 来通过id 检索元素及其图形表示。 GraphicsFactory - 负责创建形状和连接的图形表示。实际的外观和感觉是由渲染器定义的，即绘图模块内的DefaultRender。 graph-js还提供了一些辅助工具箱：

CommandStack - 负责建模期间的重做和撤消。 ContextPad - 提供元素周围的上下文操作。叠加- 提供用于将附加信息附加到图表元素的API。 Modeling-提供APIPalette用于更新画布上的元素（移动、删除）-左右工具面板以及一些可扩展的辅助工具；

bpmn-moddle

bpmn-moddle 封装了BPMN 2.0 模型，提供读写BPMN 2.0 XML 文档的Tool。导入时将XML 文档解析为JavaScript 对象树，建模时编辑和验证树，然后在保存图表时将其导出到BPMN 2.0 XML 协议文件。

bpmn-moddle 添加了BPMN 2.0 规范作为元模型，并为BPMN 2.0 模式验证提供了简单的接口，并提供了以下API:

formXML - 从给定的XML 字符串创建BPMN 树toXML - 将BPMN 对象树写入BPMN 2.0 XML

下一步

通过vue3、antdesign vue 结合bpmn 构建自己的流程设计工具。