三、Bpmnjs 核心组件与架构介绍_bpmn-js主要组件-优快云博客

一、bpmnjs整体架构

二、bpmnjs核心层

2.1 Modeler

一、bpmnjs整体架构

通过上一章“2.bpmnjs简介”中我们可以明白，bpmnjs有两个核心的基础Diagram.js与BPMN模型（bpmn-moddle），bpmnjs在Diagram.js提供的交互、扩展等基础功能之上，对BPMN2.0的语义规则（比如哪几个元素之间可连接）、标准图形库（比如任务元素的图形、网关的图形等）、属性模型（比如流程的属性、任务属性、网关属性等），导入导出（将画布中的模型导出为BPMN2.0XML文件、JSON文件等）、交互逻辑（比如上线文菜单等）等所有元素进行建模和渲染，并设计出符合BPMN2.0协议规范的流程。

bpmnjs整体架构大体图所示：

二、bpmnjs核心层

2.1 Modeler

Modeler是bpmnjs最核心的类，它集成了bpmnjs所有的核心模块，我们进行流程创建时，就是使用的它，它支持流程的创建、编辑、导入、导出等功能，以及属性扩展、交互控制、事件监听等。

在Modeler中又有BpmnModeler模块与BpmnViewer模块，其中BpmnModeler负责整个流程所需元素的创建、交互、扩展、编辑等功能。BpmnViewer负责展示流程图，比如查看某个流程审批中走过的路径、查看某个业务流程图等，它不具备创建、编辑等操作。

2.2 Renderer

BpmnRenderer，主要基于Diagram.js提供的绘图等渲染能力，对BPMN中的所有元素进行可视化处理，比如UserTask（用户任务）、Gateway（网关）、SequenceFlow（连接线）等进行渲染，以及扩展渲染。并且可以通过Renderer组件对所有BPMN元素进行扩展或者自定义渲染，比如将UserTask（用户任务）的矩形改为长方形、原图标替换、修改背景色等等。

2.3 Extensions

Extensions（扩展），是bpmnjs提供的模块扩展机制。bpmnjs是对BPMN的元模型进行创建与渲染的，所创建的元素都来源于BPMN，如果我们想自己定义元素或者修改、覆盖BPMN中的某个元素，则可通过Extensions机制，注册自定义模块到bpmnjs中，实现对BPMN元素的扩展、修改或覆盖。