<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>bpmn-js demo</title>
<link rel="stylesheet" href="https://netnr.eu.org/bpmn-js@7.5.0/dist/assets/diagram-js.css" />
<link rel="stylesheet" href="https://netnr.eu.org/bpmn-js@7.5.0/dist/assets/bpmn-font/css/bpmn.css" />
<script src="https://netnr.eu.org/bpmn-js@7.5.0/dist/bpmn-modeler.production.min.js"></script>
</head>
<body>
<div id="canvas"></div>
<div class="bjs-tool">
<span data-action="demo">Demo</span>
<span data-action="import">Import</span>
<span data-action="export">Export</span>
<span data-action="svg">SVG</span>
</div>
</body>
</html>
html,
body,
#canvas {
height: 100%;
padding: 0;
margin: 0;
}
.bjs-powered-by {
display: none;
}
.bjs-tool {
position: fixed;
top: 1em;
right: 1em;
}
.bjs-tool span {
cursor: pointer;
margin-right: 0.5em;
}
// modeler instance
var bpmnModeler = new BpmnJS({
container: '#canvas',
keyboard: {
bindTo: window
}
});
bpmnModeler.createDiagram();
document.querySelector('.bjs-tool').addEventListener('click', function (e) {
var target = e.target, action = target.getAttribute('data-action');
switch (action) {
case "demo":
{
var diagramUrl = 'https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn';
window.open(diagramUrl, '_blank')
}
break;
case "import":
{
var bpmnXML = prompt("bpmnXML");
try {
bpmnModeler.importXML(bpmnXML).then(() => {
var canvas = bpmnModeler.get('canvas');
// zoom to fit full viewport
canvas.zoom('fit-viewport');
})
} catch (err) {
console.error(err);
alert('import error');
}
}
break;
case "export":
{
bpmnModeler.saveXML({ format: true }).then(res => {
console.debug(res.xml)
prompt("export", res.xml)
})
}
break;
case "svg":
{
var canvas = bpmnModeler.get('canvas');
console.debug(canvas._svg)
prompt("export", canvas._svg.outerHTML)
}
break;
}
})