bpmn.js实现流程图设计绘制工具代码
代码语言:html
所属分类:图表
代码描述:bpmn.js实现流程图设计绘制工具代码,包含打开与导出流程图数据。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <!-- required modeler styles --> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bpmn-js.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/diagram-js.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bpmn.css"> <!-- modeler distro --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bpmn-modeler.development.js"></script> <!-- needed for this example only --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <!-- example styles --> <style> html, body, #canvas { height: 100%; padding: 0; margin: 0; } .diagram-note { background-color: rgba(66, 180, 21, 0.7); color: White; border-radius: 5px; font-family: Arial; font-size: 12px; padding: 5px; min-height: 16px; width: 50px; text-align: center; } .needs-discussion:not(.djs-connection) .djs-visual > :nth-child(1) { stroke: rgba(66, 180, 21, 0.7) !important; /* color elements as red */ } #save-button { position: fixed; bottom: 20px; left: 20px; } </style> </head> <body> <div id="canvas"></div> <button id="save-button">print to console</button> <script> //var diagramUrl = 'https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn'; // modeler instance var bpmnModeler = new BpmnJS({ container: '#canvas', keyboard: { bindTo: window } }); /** * Save diagram contents and print them to the console. */ async function exportDiagram() { try { var result = await bpmnModeler.saveXML({ format: true }); alert('Diagram exported. Check the developer tools!'); console.log('DIAGRAM', result.xml); } catch (err) { console.error('could not save BPMN 2.0 diagram', err); } } /** * Open diagram in our modeler instance. * * @param {String} bpmnXML diagram to display */ async function openDiagram() { var diagramXML = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<definitions xmlns=\"http://www.omg.org/spec/BPMN/20100524/MODEL\"\r\n xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\"\r\n xmlns:omgdc=\"http://www.omg.org/spec/DD/20100524/DC\"\r\n xmlns:omgdi=\"http://www.omg.org/spec/DD/20100524/DI\"\r\n xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\"\r\n expressionLanguage=\"http://www.w3.org/1999/XPath\"\r\n typeLanguage=\"http://www.w3.org/2001/XMLSchema\"\r\n targetNamespace=\"\"\r\n xsi:schemaLocation=\"http://www.omg.org/spec/BPMN/20100524/MODEL http://www.omg.org/spec/BPMN/2.0/20100501/BPMN20.xsd\">\r\n<collaboration id=\"sid-c0e745ff-361e-4afb-8c8d-2a1fc32b1424\">\r\n <participant id=\"sid-87F4C1D6-25E1-4A45-9DA7-AD945993D06F\" name=\"Customer\" processRef=\"sid-C3803939-0872-457F-8336-EAE484DC4A04\">\r\n </participant>\r\n</collaboration>\r\n<process id=\"sid-C3803939-0872-457F-8336-EAE484DC4A04\" isClosed=\"false\" isExecutable=\"false\" name=\"Customer\" processType=\"None\">\r\n <extensionElements/>\r\n <laneSet id=\"sid-b167d0d7-e761-4636-9200-76b7f0e8e83a\">\r\n <lane id=\"sid-57E4FE0D-18E4-478D-BC5D-B15164E93254\">\r\n <flowNodeRef>sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138</flowNodeRef>\r\n <flowNodeRef>sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26</flowNodeRef>\r\n <flowNodeRef>SCAN_OK</flowNodeRef>\r\n <flowNodeRef>sid-E49425CF-8287-4798-B622-D2A7D78EF00B</flowNodeRef>\r\n <flowNodeRef>END_EVENT</flowNodeRef>\r\n <flowNodeRef>sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9</flowNodeRef>\r\n </lane>\r\n </laneSet>\r\n <startEvent id=\"sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138\" name=\"Notices QR code\">\r\n <outgoing>sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD</outgoing>\r\n </startEvent>\r\n <task completionQuantity=\"1\" id=\"sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26\" isForCompensation=\"false\" name=\"Scan QR code\" startQuantity=\"1\">\r\n <incoming>sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D</incoming>\r\n <outgoing>sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A</outgoing>\r\n </task>\r\n <exclusiveGateway gatewayDirection=\"Diverging\" id=\"SCAN_OK\" name=\"Scan successful? \">\r\n <incoming>sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A</incoming>\r\n <outgoing>sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB</outgoing>\r\n <outgoing>sid-337A23B9-A923-4CCE-B613-3E247B773CCE</outgoing>\r\n </exclusiveGateway>\r\n <task completionQuantity=\"1\" id=\"sid-E49425CF-8287-4798-B622-D2A7D78EF00B\" isForCompensation=\"false\" name=\"Open product information in mobile app\" startQuantity=\"1\">\r\n <incoming>sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB</incoming>\r\n <outgoing>sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C</outgoing>\r\n </task>\r\n <endEvent id=\"END_EVENT\" name=\"Is informed\">\r\n <incoming>sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C</incoming>\r\n </endEvent>\r\n <exclusiveGateway gatewayDirection=\"Converging\" id=\"sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9\">\r\n <incoming>sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD</incoming>\r\n <incoming>sid-337A23B9-A923-4CCE-B613-3E247B773CCE</incoming>\r\n <outgoing>sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D</outgoing>\r\n </exclusiveGateway>\r\n <sequenceFlow id=\"sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD\" sourceRef=\"sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138\" targetRef=\"sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9\"/>\r\n <sequenceFlow id=\"sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A\" sourceRef=\"sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26\" targetRef=\"SCAN_OK\"/>\r\n <sequenceFlow id=\"sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C\" sourceRef=\"sid-E49425CF-8287-4798-B622-D2A7D78EF00B\" targetRef=\"END_EVENT\"/>\r\n <sequenceFlow id=\"sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB\" name=\"Yes\" sourceRef=\"SCAN_OK\" targetRef=\"sid-E49425CF-8287-4798-B622-D2A7D78EF00B\"/>\r\n <sequenceFlow id=\"sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D\" sourceRef=\"sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9\" targetRef=\"sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26\"/>\r\n <sequenceFlow id=\"sid-337A23B9-A923-4CCE-B613-3E247B773CCE\" name=\"No\" sourceRef=\"SCAN_OK\" targetRef=\"sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9\"/>\r\n</process>\r\n<bpmndi:BPMNDiagram id=\"sid-74620812-92c4-44e5-949c-aa47393d3830\">\r\n <bpmndi:BPMNPlane bpmnElement=\"sid-c0e745ff-361e-4afb-8c8d-2a1fc32b1424\" id=\"sid-cdcae759-2af7-4a6d-bd02-53f3352a731d\">\r\n <bpmndi:BPMNShape bpmnElement=\"sid-87F4C1D6-25E1-4A45-9DA7-AD945993D06F\" id=\"sid-87F4C1D6-25E1-4A45-9DA7-AD945993D06F_gui\" isHorizontal=\"true\">\r\n <omgdc:Bounds height=\"250.0\" width=\"933.0\" x=\"42.5\" y=\"75.0\"/>\r\n <bpmndi:BPMNLabel labelStyle=\"sid-84cb49fd-2f7c-44fb-8950-83c3fa153d3b\">\r\n <omgdc:Bounds height=\"59.142852783203125\" width=\"12.000000000000014\" x=\"47.49999999999999\" y=\"170.42857360839844\"/>\r\n </bpmndi:BPMNLabel>\r\n </bpmndi:BPMNShape>\r\n <bpmndi:BPMNShape bpmnElement=\"sid-5.........完整代码请登录后点击上方下载按钮下载查看
网友评论0