流程編輯插件bpmn.js

本文轉載自查看原文 2020-01-02 15:30 3559

  1 <!DOCTYPE html>
  2 <html>
  3   <head>
  4     <meta charset="UTF-8" />
  5     <title>Hello World</title>
  6 
  7     <!-- viewer distro (without pan and zoom) -->
  8     <!--
  9     <script src="https://unpkg.com/bpmn-js@5.1.2/dist/bpmn-viewer.development.js"></script>
 10     -->
 11     
 12     <!-- viewer distro (with pan and zoom) -->
 13     <script src="https://unpkg.com/bpmn-js@5.1.2/dist/bpmn-navigated-viewer.development.js"></script>
 14 
 15     <!-- needed for this example only -->
 16     <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
 17 
 18     <!-- example styles -->
 19     <style>
 20       html, body, #canvas {
 21         height: 100%;
 22         padding: 0;
 23         margin: 0;
 24       }
 25 
 26       .diagram-note {
 27         background-color: rgba(66, 180, 21, 0.7);
 28         color: White;
 29         border-radius: 5px;
 30         font-family: Arial;
 31         font-size: 12px;
 32         padding: 5px;
 33         min-height: 16px;
 34         width: 50px;
 35         text-align: center;
 36       }
 37 
 38       .needs-discussion:not(.djs-connection) .djs-visual > :nth-child(1) {
 39         stroke: rgba(66, 180, 21, 0.7) !important; /* color elements as red */
 40       }
 41     </style>
 42   </head>
 43   <body>
 44     <div id="canvas"></div>
 45 
 46     <script>
 47 
 48       var diagramUrl = 'https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn';
 49 
 50       // viewer instance
 51       var bpmnViewer = new BpmnJS({
 52         container: '#canvas'
 53       });
 54 
 55 
 56       /**
 57        * Open diagram in our viewer instance.
 58        *
 59        * @param {String} bpmnXML diagram to display
 60        */
 61       function openDiagram(bpmnXML) {
 62 
 63         // import diagram
 64         bpmnViewer.importXML(bpmnXML, function(err) {
 65 
 66           if (err) {
 67             return console.error('could not import BPMN 2.0 diagram', err);
 68           }
 69 
 70           // access viewer components
 71           var canvas = bpmnViewer.get('canvas');
 72           var overlays = bpmnViewer.get('overlays');
 73 
 74 
 75           // zoom to fit full viewport
 76           canvas.zoom('fit-viewport');
 77 
 78           // attach an overlay to a node
 79           overlays.add('SCAN_OK', 'note', {
 80             position: {
 81               bottom: 0,
 82               right: 0
 83             },
 84             html: '<div class="diagram-note">Mixed up the labels?</div>'
 85           });
 86 
 87           // add marker
 88           canvas.addMarker('SCAN_OK', 'needs-discussion');
 89         });
 90       }
 91 
 92 
 93       // load external diagram file via AJAX and open it
 94       $.get(diagramUrl, openDiagram, 'text');
 95     </script>
 96     <!--
 97       Thanks for trying out our BPMN toolkit!
 98 
 99       If you'd like to learn more about what our library,
100       continue with some more basic examples:
101       * https://github.com/bpmn-io/bpmn-js-examples/overlays
102       * https://github.com/bpmn-io/bpmn-js-examples/interaction
103       * https://github.com/bpmn-io/bpmn-js-examples/colors
104       * https://github.com/bpmn-io/bpmn-js-examples/commenting
105 
106       To get a bit broader overview over how bpmn-js works,
107       follow our walkthrough:
108       * https://bpmn.io/toolkit/bpmn-js/walkthrough/
109 
110       Related starters:
111       * https://raw.githubusercontent.com/bpmn-io/bpmn-js-examples/starter/modeler.html
112     -->
113   </body>
114 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 bpmn.js & BPMN diagram 02.activiti流程配置——vue整合bpmn.js bpmn.js項目漢化；bpmn漢化；bpmn.js中文；bpmn.js漢化；關於h5使用bpmn.js bpmn.js運行報錯unhandled error in event listener TypeError: bo.get is not a function 最好用的流程編輯器bpmn-js系列之基本使用 Idea 插件之 Activiti bpmn 流程設計器 camunda-modeler bpmn-js畫流程圖（一）基本安裝使用 bpmn-js畫流程圖（一）基本安裝使用 CAMUNDA流程BPMN,