网站logo素材,直播视频下载,郑州网站建设怎样,三合一建站网站介绍 BPMN-JS是一个流行的开源库#xff0c;用于在Web应用程序中可视化、创建、编辑和分析BPMN#xff08;Business Process Model and Notation#xff0c;业务流程建模与表示法#xff09;2.0 图。BPMN是一种国际标准的图形化语言#xff0c;用于描述企业中的业务流程用于在Web应用程序中可视化、创建、编辑和分析BPMNBusiness Process Model and Notation业务流程建模与表示法2.0 图。BPMN是一种国际标准的图形化语言用于描述企业中的业务流程包括流程流、任务、事件、网关等元素。有关BPMN-JS的下载已经更多介绍可以访问官网BPMN.io 组成
BPMNBusiness Process Model and Notation是一种用于绘制业务流程的标准化图形表示法。bpmn-js库由多个组件构成共同提供了强大的流程图处理能力。以下是其主要功能组成部分
Modeler: bpmn-js Modeler是库的核心部分它为用户提供了交互式创建和编辑BPMN图的功能。包括拖拽元素放置、连接线绘制、属性编辑等。这一部分是高度可定制的允许开发者调整工具栏、快捷方式、自动布局等功能。Viewer: bpmn-js Viewer则是一个只读版本用于展示BPMN图表不允许用户编辑。它适用于那些只需查看流程图而不进行修改的场景比如流程审核或分享。Elements: bpmn-js支持BPMN 2.0规范中的所有核心元素如任务Task、网关Gateway、事件Event、泳道Lane和池Pool等以及它们之间的连接关系确保了模型的兼容性和标准化。Modelling API: 提供了一套API使得开发者能够以编程方式创建、读取、更新和删除BPMN模型元素这对于自动化生成流程图或与后端系统集成特别有用。Event System: 一个强大的事件系统允许开发者监听和响应用户操作或模型变化比如当元素被添加、删除、移动或属性被更改时。Services: 包括校验服务Validation Service来检查模型的语义正确性以及导入导出服务Import/Export Service支持从和到XML格式的转换这是BPMN模型的标准存储格式。Extensions: bpmn-js设计上支持扩展允许开发人员添加自定义元素、行为或与其他库如表单编辑器集成。Diagrams.net Integration: bpmn-js也是Diagrams.net前身为draw.io中的BPMN编辑器的基础这意味着它得到了广泛测试并在真实世界中得到应用。 综上所述bpmn-js通过这些组件和功能为Web应用程序提供了一个强大且灵活的平台用于处理BPMN流程图无论是简单的查看需求还是复杂的流程设计和管理。 使用
以上是对bpmn-js的一个结构的基础介绍下面通过一个bpmn-js的基础使用来近距离了解bpmn-js这个可视化web流程工具
安装 bpmn-js
首先你需要通过npm来安装 bpmn-js
npm install bpmn-js 引入 bpmn-js
在你的 HTML 文件中你可以通过 script 标签引入 bpmn-js(这里使用unpkg的cdn地址) link relstylesheet hrefhttps://unpkg.com/bpmn-js13.0.2/dist/assets/diagram-js.csslink relstylesheet hrefhttps://unpkg.com/bpmn-js13.0.2/dist/assets/bpmn-font/css/bpmn.cssscript srchttps://unpkg.com/bpmn-js13.0.2/dist/bpmn-modeler.development.js/script 或者如果你在使用模块化 JavaScript例如 ES6 或 TypeScript你可以这样引入
import BpmnModeler from bpmn-js/lib/Modeler; 创建一个容器
在你的 HTML 中创建一个容器元素用来承载 BPMN 图表
div idcanvas stylewidth: 100%; height: 400px;/div初始化 bpmn-js
在你的 JavaScript 代码中初始化 bpmn-js 实例并将它附加到容器上
// 使用 JavaScript 直接初始化
const modeler new BpmnJS({container: #canvas
});// 或者如果你在使用模块化方式
const modeler new BpmnModeler({container: #canvas
}); 加载 BPMN XML
你可以加载一个 BPMN XML 字符串来显示图表
var bpmnXML ?xml version1.0 encodingUTF-8?
definitions xmlnshttp://www.omg.org/spec/BPMN/20100524/MODEL xmlns:bpmndihttp://www.omg.org/spec/BPMN/20100524/DI xmlns:omgdchttp://www.omg.org/spec/DD/20100524/DC xmlns:omgdihttp://www.omg.org/spec/DD/20100524/DI xmlns:xsihttp://www.w3.org/2001/XMLSchema-instance targetNamespace xsi:schemaLocationhttp://www.omg.org/spec/BPMN/20100524/MODEL http://www.omg.org/spec/BPMN/2.0/20100501/BPMN20.xsdcollaboration idsid-c0e745ff-361e-4afb-8c8d-2a1fc32b1424participant idsid-87F4C1D6-25E1-4A45-9DA7-AD945993D06F nameCustomer processRefsid-C3803939-0872-457F-8336-EAE484DC4A04 //collaborationprocess idsid-C3803939-0872-457F-8336-EAE484DC4A04 nameCustomer processTypeNone isClosedfalse isExecutablefalseextensionElements /laneSet idsid-b167d0d7-e761-4636-9200-76b7f0e8e83alane idsid-57E4FE0D-18E4-478D-BC5D-B15164E93254flowNodeRefsid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26/flowNodeRefflowNodeRefsid-E49425CF-8287-4798-B622-D2A7D78EF00B/flowNodeRefflowNodeRefsid-D7F237E8-56D0-4283-A3CE-4F0EFE446138/flowNodeRefflowNodeRefsid-E433566C-2289-4BEB-A19C-1697048900D2/flowNodeRefflowNodeRefsid-5134932A-1863-4FFA-BB3C-A4B4078B11A9/flowNodeRefflowNodeRefSCAN_OK/flowNodeRef/lane/laneSettask idsid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26 nameScan QR codeincomingsid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D/incomingoutgoingsid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A/outgoing/tasktask idsid-E49425CF-8287-4798-B622-D2A7D78EF00B nameOpen product information in mobile appincomingsid-8B820AF5-DC5C-4618-B854-E08B71FB55CB/incomingoutgoingsid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C/outgoing/taskstartEvent idsid-D7F237E8-56D0-4283-A3CE-4F0EFE446138 nameNotices#10;QR codeoutgoingsid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD/outgoing/startEventendEvent idsid-E433566C-2289-4BEB-A19C-1697048900D2 nameIs informedincomingsid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C/incoming/endEventexclusiveGateway idsid-5134932A-1863-4FFA-BB3C-A4B4078B11A9incomingsid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD/incomingincomingsid-337A23B9-A923-4CCE-B613-3E247B773CCE/incomingoutgoingsid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D/outgoing/exclusiveGatewayexclusiveGateway idSCAN_OK nameScan successful?#10;incomingsid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A/incomingoutgoingsid-8B820AF5-DC5C-4618-B854-E08B71FB55CB/outgoingoutgoingsid-337A23B9-A923-4CCE-B613-3E247B773CCE/outgoing/exclusiveGatewaysequenceFlow idsid-337A23B9-A923-4CCE-B613-3E247B773CCE nameYes sourceRefSCAN_OK targetRefsid-5134932A-1863-4FFA-BB3C-A4B4078B11A9 /sequenceFlow idsid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D sourceRefsid-5134932A-1863-4FFA-BB3C-A4B4078B11A9 targetRefsid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26 /sequenceFlow idsid-8B820AF5-DC5C-4618-B854-E08B71FB55CB nameNo sourceRefSCAN_OK targetRefsid-E49425CF-8287-4798-B622-D2A7D78EF00B /sequenceFlow idsid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C sourceRefsid-E49425CF-8287-4798-B622-D2A7D78EF00B targetRefsid-E433566C-2289-4BEB-A19C-1697048900D2 /sequenceFlow idsid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A sourceRefsid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26 targetRefSCAN_OK /sequenceFlow idsid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD sourceRefsid-D7F237E8-56D0-4283-A3CE-4F0EFE446138 targetRefsid-5134932A-1863-4FFA-BB3C-A4B4078B11A9 //processbpmndi:BPMNDiagram idsid-74620812-92c4-44e5-949c-aa47393d3830bpmndi:BPMNPlane idsid-cdcae759-2af7-4a6d-bd02-53f3352a731d bpmnElementsid-c0e745ff-361e-4afb-8c8d-2a1fc32b1424bpmndi:BPMNShape idsid-87F4C1D6-25E1-4A45-9DA7-AD945993D06F_gui bpmnElementsid-87F4C1D6-25E1-4A45-9DA7-AD945993D06F isHorizontaltrueomgdc:Bounds x83 y105 width933 height250 /bpmndi:BPMNLabel labelStylesid-84cb49fd-2f7c-44fb-8950-83c3fa153d3bomgdc:Bounds x47.49999999999999 y170.42857360839844 width12.000000000000014 height59.142852783203125 //bpmndi:BPMNLabel/bpmndi:BPMNShapebpmndi:BPMNShape idsid-57E4FE0D-18E4-478D-BC5D-B15164E93254_gui bpmnElementsid-57E4FE0D-18E4-478D-BC5D-B15164E93254 isHorizontaltrueomgdc:Bounds x113 y105 width903 height250 //bpmndi:BPMNShapebpmndi:BPMNShape idsid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26_gui bpmnElementsid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26omgdc:Bounds x393 y170 width100 height80 /bpmndi:BPMNLabel labelStylesid-84cb49fd-2f7c-44fb-8950-83c3fa153d3bomgdc:Bounds x360.5 y172 width84 height12 //bpmndi:BPMNLabel/bpmndi:BPMNShapebpmndi:BPMNShape idsid-E49425CF-8287-4798-B622-D2A7D78EF00B_gui bpmnElementsid-E49425CF-8287-4798-B622-D2A7D78EF00Bomgdc:Bounds x728 y170 width100 height80 /bpmndi:BPMNLabel labelStylesid-84cb49fd-2f7c-44fb-8950-83c3fa153d3bomgdc:Bounds x695.9285736083984 y162 width83.14285278320312 height36 //bpmndi:BPMNLabel/bpmndi:BPMNShapebpmndi:BPMNEdge idsid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A_gui bpmnElementsid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856Aomgdi:waypoint x493 y210 /omgdi:waypoint x585 y210 /bpmndi:BPMNLabelomgdc:Bounds x494 y185 width90 height20 //bpmndi:BPMNLabel/bpmndi:BPMNEdgebpmndi:BPMNEdge idsid-8B820AF5-DC5C-4618-B854-E08B71FB55CB_gui bpmnElementsid-8B820AF5-DC5C-4618-B854-E08B71FB55CBomgdi:waypoint x635 y210 /omgdi:waypoint x728 y210 /bpmndi:BPMNLabel labelStylesid-e0502d32-f8d1-41cf-9c4a-cbb49fecf581omgdc:Bounds x642 y185 width16 height12 //bpmndi:BPMNLabel/bpmndi:BPMNEdgebpmndi:BPMNEdge idsid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD_gui bpmnElementsid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FDomgdi:waypoint x223 y210 /omgdi:waypoint x275 y210 /bpmndi:BPMNLabelomgdc:Bounds x204 y185 width90 height20 //bpmndi:BPMNLabel/bpmndi:BPMNEdgebpmndi:BPMNEdge idsid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D_gui bpmnElementsid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8Domgdi:waypoint x325 y210 /omgdi:waypoint x393 y210 /bpmndi:BPMNLabelomgdc:Bounds x314 y185 width90 height20 //bpmndi:BPMNLabel/bpmndi:BPMNEdgebpmndi:BPMNEdge idsid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C_gui bpmnElementsid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6Comgdi:waypoint x828 y210 /omgdi:waypoint x901 y210 /bpmndi:BPMNLabelomgdc:Bounds x820 y185 width90 height20 //bpmndi:BPMNLabel/bpmndi:BPMNEdgebpmndi:BPMNEdge idsid-337A23B9-A923-4CCE-B613-3E247B773CCE_gui bpmnElementsid-337A23B9-A923-4CCE-B613-3E247B773CCEomgdi:waypoint x611 y234 /omgdi:waypoint x610.5 y299 /omgdi:waypoint x300.5 y299 /omgdi:waypoint x301 y234 /bpmndi:BPMNLabel labelStylesid-e0502d32-f8d1-41cf-9c4a-cbb49fecf581omgdc:Bounds x585 y236 width21 height12 //bpmndi:BPMNLabel/bpmndi:BPMNEdgebpmndi:BPMNShape idStartEvent_0l6sgn0_di bpmnElementsid-D7F237E8-56D0-4283-A3CE-4F0EFE446138omgdc:Bounds x187 y192 width36 height36 /bpmndi:BPMNLabelomgdc:Bounds x182 y229 width46 height24 //bpmndi:BPMNLabel/bpmndi:BPMNShapebpmndi:BPMNShape idEndEvent_0xwuvv5_di bpmnElementsid-E433566C-2289-4BEB-A19C-1697048900D2omgdc:Bounds x901 y192 width36 height36 /bpmndi:BPMNLabelomgdc:Bounds x892 y231 width56 height12 //bpmndi:BPMNLabel/bpmndi:BPMNShapebpmndi:BPMNShape idExclusiveGateway_1g0eih2_di bpmnElementsid-5134932A-1863-4FFA-BB3C-A4B4078B11A9 isMarkerVisibletrueomgdc:Bounds x275 y185 width50 height50 /bpmndi:BPMNLabelomgdc:Bounds x210 y160 width90 height12 //bpmndi:BPMNLabel/bpmndi:BPMNShapebpmndi:BPMNShape idExclusiveGateway_0vci1x5_di bpmnElementSCAN_OK isMarkerVisibletrueomgdc:Bounds x585 y185 width50 height50 /bpmndi:BPMNLabelomgdc:Bounds x568 y157 width88 height24 //bpmndi:BPMNLabel/bpmndi:BPMNShape/bpmndi:BPMNPlanebpmndi:BPMNLabelStyle idsid-e0502d32-f8d1-41cf-9c4a-cbb49fecf581omgdc:Font nameArial size11 isBoldfalse isItalicfalse isUnderlinefalse isStrikeThroughfalse //bpmndi:BPMNLabelStylebpmndi:BPMNLabelStyle idsid-84cb49fd-2f7c-44fb-8950-83c3fa153d3bomgdc:Font nameArial size12 isBoldfalse isItalicfalse isUnderlinefalse isStrikeThroughfalse //bpmndi:BPMNLabelStyle/bpmndi:BPMNDiagram
/definitions
modeler.importXML(bpmnXML, function(err) {if (err) {console.error(Error importing XML:, err);} else {console.log(Successfully imported XML);}
}); 交互和事件监听
你可以添加事件监听器来响应用户交互例如点击、拖拽等
modeler.on(element.click, function(event) {const element event.element;console.log(Clicked on element:, element);
}); bpmn-js 提供了广泛的事件让你能够监听模型的各种变化、元素选择等。以下是一些常用的事件监听示例
Element selected: 当用户选择流程图中的元素时触发。
modeler.on(element:selected, function(event) {const element event.element;console.log(Selected element:, element.id);
});
Element deselected: 当用户取消选择元素时触发。
modeler.on(element:deselected, function(event) {console.log(Deselected element);
});
Element click: 监听元素点击事件。
modeler.on(element.click, function(event) {const element event.element;console.log(元素触发点击⌚️, element.id);
});
Model changed: 模型发生任何改变时触发包括添加、删除元素或更新属性等。
modeler.on(commandStack.changed, function(event) {console.log(bpmn modeler发生改变);
});
Canvas resized: 当画布大小发生变化时触发。
modeler.on(canvas.resized, function(event) {console.log(画布触发重新绘制);
}); 除了监听事件你还可以通过API执行一些交互操作比如自动布局、导出模型等。
Auto layout: 自动布局所有流程。
modeler.get(layouter).layoutTree();
Export as XML: 导出当前模型为BPMN 2.0 XML。
modeler.saveXML({ format: true }, function(err, xml) {if (err) {console.error(导出BPMN文件出错, err);} else {console.log(导出的xml, xml);}
});
