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>
