Export/Import Functionalities to Modeler/Viewer


#1

Hello all,

I have no js experience so need your help. I want to use import/export as bpmn and svg in my modeler but so far couldn’t do it. Here is my simple test code. Witch js should i use, how can i use it i will be appreciated if you could help.

Thank you

<!doctype html>
<html>

<head>
<title>Hey</title>
</head>

<body>

<div id="canvas" style="position:absolute; top:0; right:0; bottom:0; left:0;"></div>

<script src="bower_components\bpmn-js\dist/bpmn-viewer.js"></script>

<link rel="stylesheet" href="bower_components/bpmn-js/dist/assets/diagram-js.css" />
<link rel="stylesheet" href="bower_components/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css" />

<script src="bower_components/bpmn-js/dist/bpmn-modeler.js"></script>

<script>
var BpmnViewer = window.BpmnJS;

var pizzaDiagram = "<?xml version=\"1.0\" standalone=\"yes\"?><semantic:definitions id=\"_1275940932088\" targetNamespace=\"http://www.trisotech.com/definitions/_1275940932088\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:di=\"http://www.omg.org/spec/DD/20100524/DI\" xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\" xmlns:dc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:semantic=\"http://www.omg.org/spec/BPMN/20100524/MODEL\">    <semantic:message id=\"_1275940932310\"/>    <semantic:message id=\"_1275940932433\"/>    <semantic:process isExecutable=\"false\" id=\"_6-1\">        <semantic:laneSet id=\"ls_6-438\">            <semantic:lane name=\"clerk\" id=\"_6-650\">                <semantic:flowNodeRef>_6-450</semantic:flowNodeRef>                <semantic:flowNodeRef>_6-652</semantic:flowNodeRef>                <semantic:flowNodeRef>_6-674</semantic:flowNodeRef>                <semantic:flowNodeRef>_6-695</semantic:flowNodeRef>            </semantic:lane>            <semantic:lane name=\"pizza chef\" id=\"_6-446\">                <semantic:flowNodeRef>_6-463</semantic:flowNodeRef>            </semantic:lane>            <semantic:lane name=\"delivery boy\" id=\"_6-448\">                <semantic:flowNodeRef>_6-514</semantic:flowNodeRef>                <semantic:flowNodeRef>_6-565</semantic:flowNodeRef>                <semantic:flowNodeRef>_6-616</semantic:flowNodeRef>            </semantic:lane>        </semantic:laneSet>        <semantic:startEvent name=\"Order received\" id=\"_6-450\">            <semantic:outgoing>_6-630</semantic:outgoing>            <semantic:messageEventDefinition messageRef=\"_1275940932310\"/>        </semantic:startEvent>        <semantic:parallelGateway gatewayDirection=\"Unspecified\" name=\"\" id=\"_6-652\">            <semantic:incoming>_6-630</semantic:incoming>            <semantic:outgoing>_6-691</semantic:outgoing>            <semantic:outgoing>_6-693</semantic:outgoing>        </semantic:parallelGateway>        <semantic:intermediateCatchEvent parallelMultiple=\"false\" name=\"&#8222;where is my pizza?&#8220;\" id=\"_6-674\">            <semantic:incoming>_6-691</semantic:incoming>            <semantic:incoming>_6-746</semantic:incoming>            <semantic:outgoing>_6-748</semantic:outgoing>            <semantic:messageEventDefinition messageRef=\"_1275940932433\"/>        </semantic:intermediateCatchEvent>        <semantic:task completionQuantity=\"1\" isForCompensation=\"false\" startQuantity=\"1\" name=\"Calm customer\" id=\"_6-695\">            <semantic:incoming>_6-748</semantic:incoming>            <semantic:outgoing>_6-746</semantic:outgoing>        </semantic:task>        <semantic:task completionQuantity=\"1\" isForCompensation=\"false\" startQuantity=\"1\" name=\"Bake the pizza\" id=\"_6-463\">            <semantic:incoming>_6-693</semantic:incoming>            <semantic:outgoing>_6-632</semantic:outgoing>        </semantic:task>        <semantic:task completionQuantity=\"1\" isForCompensation=\"false\" startQuantity=\"1\" name=\"Deliver the pizza\" id=\"_6-514\">            <semantic:incoming>_6-632</semantic:incoming>            <semantic:outgoing>_6-634</semantic:outgoing>        </semantic:task>        <semantic:task completionQuantity=\"1\" isForCompensation=\"false\" startQuantity=\"1\" name=\"Receive payment\" id=\"_6-565\">            <semantic:incoming>_6-634</semantic:incoming>            <semantic:outgoing>_6-636</semantic:outgoing>        </semantic:task>        <semantic:endEvent name=\"\" id=\"_6-616\">            <semantic:incoming>_6-636</semantic:incoming>            <semantic:terminateEventDefinition/>        </semantic:endEvent>        <semantic:sequenceFlow sourceRef=\"_6-450\" targetRef=\"_6-652\" name=\"\" id=\"_6-630\"/>        <semantic:sequenceFlow sourceRef=\"_6-463\" targetRef=\"_6-514\" name=\"\" id=\"_6-632\"/>        <semantic:sequenceFlow sourceRef=\"_6-514\" targetRef=\"_6-565\" name=\"\" id=\"_6-634\"/>        <semantic:sequenceFlow sourceRef=\"_6-565\" targetRef=\"_6-616\" name=\"\" id=\"_6-636\"/>        <semantic:sequenceFlow sourceRef=\"_6-652\" targetRef=\"_6-674\" name=\"\" id=\"_6-691\"/>        <semantic:sequenceFlow sourceRef=\"_6-652\" targetRef=\"_6-463\" name=\"\" id=\"_6-693\"/>        <semantic:sequenceFlow sourceRef=\"_6-695\" targetRef=\"_6-674\" name=\"\" id=\"_6-746\"/>        <semantic:sequenceFlow sourceRef=\"_6-674\" targetRef=\"_6-695\" name=\"\" id=\"_6-748\"/>    </semantic:process>    <semantic:message id=\"_1275940932198\"/>    <semantic:process isExecutable=\"false\" id=\"_6-2\">        <semantic:startEvent name=\"Hungry for pizza\" id=\"_6-61\">            <semantic:outgoing>_6-125</semantic:outgoing>        </semantic:startEvent>        <semantic:task completionQuantity=\"1\" isForCompensation=\"false\" startQuantity=\"1\" name=\"Select a pizza\" id=\"_6-74\">            <semantic:incoming>_6-125</semantic:incoming>            <semantic:outgoing>_6-178</semantic:outgoing>        </semantic:task>        <semantic:task completionQuantity=\"1\" isForCompensation=\"false\" startQuantity=\"1\" name=\"Order a pizza\" id=\"_6-127\">            <semantic:incoming>_6-178</semantic:incoming>            <semantic:outgoing>_6-420</semantic:outgoing>        </semantic:task>        <semantic:eventBasedGateway eventGatewayType=\"Exclusive\" instantiate=\"false\" gatewayDirection=\"Unspecified\" name=\"\" id=\"_6-180\">            <semantic:incoming>_6-420</semantic:incoming>            <semantic:incoming>_6-430</semantic:incoming>            <semantic:outgoing>_6-422</semantic:outgoing>            <semantic:outgoing>_6-424</semantic:outgoing>        </semantic:eventBasedGateway>        <semantic:intermediateCatchEvent parallelMultiple=\"false\" name=\"pizza received\" id=\"_6-202\">            <semantic:incoming>_6-422</semantic:incoming>            <semantic:outgoing>_6-428</semantic:outgoing>            <semantic:messageEventDefinition messageRef=\"_1275940932198\"/>        </semantic:intermediateCatchEvent>        <semantic:intermediateCatchEvent parallelMultiple=\"false\" name=\"60 minutes\" id=\"_6-219\">            <semantic:incoming>_6-424</semantic:incoming>            <semantic:outgoing>_6-426</semantic:outgoing>            <semantic:timerEventDefinition>                <semantic:timeDate/>            </semantic:timerEventDefinition>        </semantic:intermediateCatchEvent>        <semantic:task completionQuantity=\"1\" isForCompensation=\"false\" startQuantity=\"1\" name=\"Ask for the pizza\" id=\"_6-236\">            <semantic:incoming>_6-426</semantic:incoming>            <semantic:outgoing>_6-430</semantic:outgoing>        </semantic:task>        <semantic:task completionQuantity=\"1\" isForCompensation=\"false\" startQuantity=\"1\" name=\"Pay the pizza\" id=\"_6-304\">            <semantic:incoming>_6-428</semantic:incoming>            <semantic:outgoing>_6-434</semantic:outgoing>        </semantic:task>        <semantic:task completionQuantity=\"1\" isForCompensation=\"false\" startQuantity=\"1\" name=\"Eat the pizza\" id=\"_6-355\">            <semantic:incoming>_6-434</semantic:incoming>            <semantic:outgoing>_6-436</semantic:outgoing>        </semantic:task>        <semantic:endEvent name=\"Hunger satisfied\" id=\"_6-406\">            <semantic:incoming>_6-436</semantic:incoming>        </semantic:endEvent>        <semantic:sequenceFlow sourceRef=\"_6-61\" targetRef=\"_6-74\" name=\"\" id=\"_6-125\"/>        <semantic:sequenceFlow sourceRef=\"_6-74\" targetRef=\"_6-127\" name=\"\" id=\"_6-178\"/>        <semantic:sequenceFlow sourceRef=\"_6-127\" targetRef=\"_6-180\" name=\"\" id=\"_6-420\"/>        <semantic:sequenceFlow sourceRef=\"_6-180\" targetRef=\"_6-202\" name=\"\" id=\"_6-422\"/>        <semantic:sequenceFlow sourceRef=\"_6-180\" targetRef=\"_6-219\" name=\"\" id=\"_6-424\"/>        <semantic:sequenceFlow sourceRef=\"_6-219\" targetRef=\"_6-236\" name=\"\" id=\"_6-426\"/>        <semantic:sequenceFlow sourceRef=\"_6-202\" targetRef=\"_6-304\" name=\"\" id=\"_6-428\"/>        <semantic:sequenceFlow sourceRef=\"_6-236\" targetRef=\"_6-180\" name=\"\" id=\"_6-430\"/>        <semantic:sequenceFlow sourceRef=\"_6-304\" targetRef=\"_6-355\" name=\"\" id=\"_6-434\"/>        <semantic:sequenceFlow sourceRef=\"_6-355\" targetRef=\"_6-406\" name=\"\" id=\"_6-436\"/>    </semantic:process>    <semantic:collaboration id=\"C1275940932557\">        <semantic:participant name=\"Pizza Customer\" processRef=\"_6-2\" id=\"_6-53\"/>        <semantic:participant name=\"Pizza vendor\" processRef=\"_6-1\" id=\"_6-438\"/>        <semantic:messageFlow name=\"pizza order\" sourceRef=\"_6-127\" targetRef=\"_6-450\" id=\"_6-638\"/>        <semantic:messageFlow name=\"\" sourceRef=\"_6-236\" targetRef=\"_6-674\" id=\"_6-642\"/>        <semantic:messageFlow name=\"receipt\" sourceRef=\"_6-565\" targetRef=\"_6-304\" id=\"_6-646\"/>        <semantic:messageFlow name=\"money\" sourceRef=\"_6-304\" targetRef=\"_6-565\" id=\"_6-648\"/>        <semantic:messageFlow name=\"pizza\" sourceRef=\"_6-514\" targetRef=\"_6-202\" id=\"_6-640\"/>        <semantic:messageFlow name=\"\" sourceRef=\"_6-695\" targetRef=\"_6-236\" id=\"_6-750\"/>    </semantic:collaboration>    <bpmndi:BPMNDiagram documentation=\"\" id=\"Trisotech.Visio-_6\" name=\"Untitled Diagram\" resolution=\"96.00000267028808\">        <bpmndi:BPMNPlane bpmnElement=\"C1275940932557\">            <bpmndi:BPMNShape bpmnElement=\"_6-53\" isHorizontal=\"true\" id=\"Trisotech.Visio__6-53\">                <dc:Bounds height=\"294.0\" width=\"1044.0\" x=\"12.0\" y=\"12.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNShape>            <bpmndi:BPMNShape bpmnElement=\"_6-438\" isHorizontal=\"true\" id=\"Trisotech.Visio__6-438\">                <dc:Bounds height=\"337.0\" width=\"905.0\" x=\"12.0\" y=\"372.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNShape>            <bpmndi:BPMNShape bpmnElement=\"_6-650\" isHorizontal=\"true\" id=\"Trisotech.Visio__6__6-650\">                <dc:Bounds height=\"114.0\" width=\"875.0\" x=\"42.0\" y=\"372.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNShape>            <bpmndi:BPMNShape bpmnElement=\"_6-446\" isHorizontal=\"true\" id=\"Trisotech.Visio__6__6-446\">                <dc:Bounds height=\"114.0\" width=\"875.0\" x=\"42.0\" y=\"486.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNShape>            <bpmndi:BPMNShape bpmnElement=\"_6-448\" isHorizontal=\"true\" id=\"Trisotech.Visio__6__6-448\">                <dc:Bounds height=\"109.0\" width=\"875.0\" x=\"42.0\" y=\"600.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNShape>            <bpmndi:BPMNShape bpmnElement=\"_6-450\" id=\"Trisotech.Visio__6__6-450\">                <dc:Bounds height=\"30.0\" width=\"30.0\" x=\"79.0\" y=\"405.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNShape>            <bpmndi:BPMNShape bpmnElement=\"_6-652\" id=\"Trisotech.Visio__6__6-652\">                <dc:Bounds height=\"42.0\" width=\"42.0\" x=\"140.0\" y=\"399.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNShape>            <bpmndi:BPMNShape bpmnElement=\"_6-674\" id=\"Trisotech.Visio__6__6-674\">                <dc:Bounds height=\"32.0\" width=\"32.0\" x=\"218.0\" y=\"404.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNShape>            <bpmndi:BPMNShape bpmnElement=\"_6-695\" id=\"Trisotech.Visio__6__6-695\">                <dc:Bounds height=\"68.0\" width=\"83.0\" x=\"286.0\" y=\"386.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNShape>            <bpmndi:BPMNShape bpmnElement=\"_6-463\" id=\"Trisotech.Visio__6__6-463\">                <dc:Bounds height=\"68.0\" width=\"83.0\" x=\"252.0\" y=\"521.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNShape>            <bpmndi:BPMNShape bpmnElement=\"_6-514\" id=\"Trisotech.Visio__6__6-514\">                <dc:Bounds height=\"68.0\" width=\"83.0\" x=\"464.0\" y=\"629.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNShape>            <bpmndi:BPMNShape bpmnElement=\"_6-565\" id=\"Trisotech.Visio__6__6-565\">                <dc:Bounds height=\"68.0\" width=\"83.0\" x=\"603.0\" y=\"629.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNShape>            <bpmndi:BPMNShape bpmnElement=\"_6-616\" id=\"Trisotech.Visio__6__6-616\">                <dc:Bounds height=\"32.0\" width=\"32.0\" x=\"722.0\" y=\"647.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNShape>            <bpmndi:BPMNShape bpmnElement=\"_6-61\" id=\"Trisotech.Visio__6__6-61\">                <dc:Bounds height=\"30.0\" width=\"30.0\" x=\"66.0\" y=\"96.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNShape>            <bpmndi:BPMNShape bpmnElement=\"_6-74\" id=\"Trisotech.Visio__6__6-74\">                <dc:Bounds height=\"68.0\" width=\"83.0\" x=\"145.0\" y=\"77.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNShape>            <bpmndi:BPMNShape bpmnElement=\"_6-127\" id=\"Trisotech.Visio__6__6-127\">                <dc:Bounds height=\"68.0\" width=\"83.0\" x=\"265.0\" y=\"77.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNShape>            <bpmndi:BPMNShape bpmnElement=\"_6-180\" id=\"Trisotech.Visio__6__6-180\">                <dc:Bounds height=\"42.0\" width=\"42.0\" x=\"378.0\" y=\"90.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNShape>            <bpmndi:BPMNShape bpmnElement=\"_6-202\" id=\"Trisotech.Visio__6__6-202\">                <dc:Bounds height=\"32.0\" width=\"32.0\" x=\"647.0\" y=\"95.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNShape>            <bpmndi:BPMNShape bpmnElement=\"_6-219\" id=\"Trisotech.Visio__6__6-219\">                <dc:Bounds height=\"32.0\" width=\"32.0\" x=\"448.0\" y=\"184.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNShape>            <bpmndi:BPMNShape bpmnElement=\"_6-236\" id=\"Trisotech.Visio__6__6-236\">                <dc:Bounds height=\"68.0\" width=\"83.0\" x=\"517.0\" y=\"166.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNShape>            <bpmndi:BPMNShape bpmnElement=\"_6-304\" id=\"Trisotech.Visio__6__6-304\">                <dc:Bounds height=\"68.0\" width=\"83.0\" x=\"726.0\" y=\"77.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNShape>            <bpmndi:BPMNShape bpmnElement=\"_6-355\" id=\"Trisotech.Visio__6__6-355\">                <dc:Bounds height=\"68.0\" width=\"83.0\" x=\"834.0\" y=\"77.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNShape>            <bpmndi:BPMNShape bpmnElement=\"_6-406\" id=\"Trisotech.Visio__6__6-406\">                <dc:Bounds height=\"32.0\" width=\"32.0\" x=\"956.0\" y=\"95.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNShape>            <bpmndi:BPMNEdge bpmnElement=\"_6-640\" messageVisibleKind=\"initiating\" id=\"Trisotech.Visio__6__6-640\">                <di:waypoint x=\"506.0\" y=\"629.0\"/>                <di:waypoint x=\"506.0\" y=\"384.0\"/>                <di:waypoint x=\"663.0\" y=\"384.0\"/>                <di:waypoint x=\"663.0\" y=\"127.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNEdge>            <bpmndi:BPMNEdge bpmnElement=\"_6-630\" id=\"Trisotech.Visio__6__6-630\">                <di:waypoint x=\"109.0\" y=\"420.0\"/>                <di:waypoint x=\"140.0\" y=\"420.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNEdge>            <bpmndi:BPMNEdge bpmnElement=\"_6-691\" id=\"Trisotech.Visio__6__6-691\">                <di:waypoint x=\"182.0\" y=\"420.0\"/>                <di:waypoint x=\"200.0\" y=\"420.0\"/>                <di:waypoint x=\"218.0\" y=\"420.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNEdge>            <bpmndi:BPMNEdge bpmnElement=\"_6-648\" messageVisibleKind=\"initiating\" id=\"Trisotech.Visio__6__6-648\">                <di:waypoint x=\"754.0\" y=\"145.0\"/>                <di:waypoint x=\"754.0\" y=\"408.0\"/>                <di:waypoint x=\"630.0\" y=\"408.0\"/>                <di:waypoint x=\"631.0\" y=\"629.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNEdge>            <bpmndi:BPMNEdge bpmnElement=\"_6-422\" id=\"Trisotech.Visio__6__6-422\">                <di:waypoint x=\"420.0\" y=\"111.0\"/>                <di:waypoint x=\"438.0\" y=\"111.0\"/>                <di:waypoint x=\"647.0\" y=\"111.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNEdge>            <bpmndi:BPMNEdge bpmnElement=\"_6-646\" messageVisibleKind=\"non_initiating\" id=\"Trisotech.Visio__6__6-646\">                <di:waypoint x=\"658.0\" y=\"629.0\"/>                <di:waypoint x=\"658.0\" y=\"432.0\"/>                <di:waypoint x=\"782.0\" y=\"432.0\"/>                <di:waypoint x=\"782.0\" y=\"145.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNEdge>            <bpmndi:BPMNEdge bpmnElement=\"_6-428\" id=\"Trisotech.Visio__6__6-428\">                <di:waypoint x=\"679.0\" y=\"111.0\"/>                <di:waypoint x=\"726.0\" y=\"111.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNEdge>            <bpmndi:BPMNEdge bpmnElement=\"_6-748\" id=\"Trisotech.Visio__6__6-748\">                <di:waypoint x=\"250.0\" y=\"420.0\"/>                <di:waypoint x=\"268.0\" y=\"420.0\"/>                <di:waypoint x=\"286.0\" y=\"420.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNEdge>            <bpmndi:BPMNEdge bpmnElement=\"_6-420\" id=\"Trisotech.Visio__6__6-420\">                <di:waypoint x=\"348.0\" y=\"111.0\"/>                <di:waypoint x=\"366.0\" y=\"111.0\"/>                <di:waypoint x=\"378.0\" y=\"111.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNEdge>            <bpmndi:BPMNEdge bpmnElement=\"_6-636\" id=\"Trisotech.Visio__6__6-636\">                <di:waypoint x=\"686.0\" y=\"663.0\"/>                <di:waypoint x=\"704.0\" y=\"663.0\"/>                <di:waypoint x=\"722.0\" y=\"663.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNEdge>            <bpmndi:BPMNEdge bpmnElement=\"_6-750\" id=\"Trisotech.Visio__6__6-750\">                <di:waypoint x=\"328.0\" y=\"386.0\"/>                <di:waypoint x=\"328.0\" y=\"348.0\"/>                <di:waypoint x=\"572.0\" y=\"348.0\"/>                <di:waypoint x=\"572.0\" y=\"234.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNEdge>            <bpmndi:BPMNEdge bpmnElement=\"_6-436\" id=\"Trisotech.Visio__6__6-436\">                <di:waypoint x=\"918.0\" y=\"111.0\"/>                <di:waypoint x=\"936.0\" y=\"111.0\"/>                <di:waypoint x=\"956.0\" y=\"111.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNEdge>            <bpmndi:BPMNEdge bpmnElement=\"_6-632\" id=\"Trisotech.Visio__6__6-632\">                <di:waypoint x=\"335.0\" y=\"555.0\"/>                <di:waypoint x=\"353.0\" y=\"555.0\"/>                <di:waypoint x=\"353.0\" y=\"663.0\"/>                <di:waypoint x=\"464.0\" y=\"663.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNEdge>            <bpmndi:BPMNEdge bpmnElement=\"_6-634\" id=\"Trisotech.Visio__6__6-634\">                <di:waypoint x=\"548.0\" y=\"663.0\"/>                <di:waypoint x=\"603.0\" y=\"663.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNEdge>            <bpmndi:BPMNEdge bpmnElement=\"_6-125\" id=\"Trisotech.Visio__6__6-125\">                <di:waypoint x=\"96.0\" y=\"111.0\"/>                <di:waypoint x=\"114.0\" y=\"111.0\"/>                <di:waypoint x=\"145.0\" y=\"111.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNEdge>            <bpmndi:BPMNEdge bpmnElement=\"_6-430\" id=\"Trisotech.Visio__6__6-430\">                <di:waypoint x=\"600.0\" y=\"200.0\"/>                <di:waypoint x=\"618.0\" y=\"200.0\"/>                <di:waypoint x=\"618.0\" y=\"252.0\"/>                <di:waypoint x=\"576.0\" y=\"252.0\"/>                <di:waypoint x=\"549.0\" y=\"252.0\"/>                <di:waypoint x=\"360.0\" y=\"252.0\"/>                <di:waypoint x=\"360.0\" y=\"111.0\"/>                <di:waypoint x=\"378.0\" y=\"111.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNEdge>            <bpmndi:BPMNEdge bpmnElement=\"_6-642\" id=\"Trisotech.Visio__6__6-642\">                <di:waypoint x=\"545.0\" y=\"234.0\"/>                <di:waypoint x=\"545.0\" y=\"324.0\"/>                <di:waypoint x=\"234.0\" y=\"324.0\"/>                <di:waypoint x=\"234.0\" y=\"404.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNEdge>            <bpmndi:BPMNEdge bpmnElement=\"_6-424\" id=\"Trisotech.Visio__6__6-424\">                <di:waypoint x=\"399.0\" y=\"132.0\"/>                <di:waypoint x=\"399.0\" y=\"200.0\"/>                <di:waypoint x=\"448.0\" y=\"200.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNEdge>            <bpmndi:BPMNEdge bpmnElement=\"_6-638\" messageVisibleKind=\"initiating\" id=\"Trisotech.Visio__6__6-638\">                <di:waypoint x=\"306.0\" y=\"145.0\"/>                <di:waypoint x=\"306.0\" y=\"252.0\"/>                <di:waypoint x=\"94.0\" y=\"252.0\"/>                <di:waypoint x=\"94.0\" y=\"405.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNEdge>            <bpmndi:BPMNEdge bpmnElement=\"_6-426\" id=\"Trisotech.Visio__6__6-426\">                <di:waypoint x=\"480.0\" y=\"200.0\"/>                <di:waypoint x=\"498.0\" y=\"200.0\"/>                <di:waypoint x=\"517.0\" y=\"200.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNEdge>            <bpmndi:BPMNEdge bpmnElement=\"_6-693\" id=\"Trisotech.Visio__6__6-693\">                <di:waypoint x=\"161.0\" y=\"441.0\"/>                <di:waypoint x=\"161.0\" y=\"556.0\"/>                <di:waypoint x=\"252.0\" y=\"555.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNEdge>            <bpmndi:BPMNEdge bpmnElement=\"_6-178\" id=\"Trisotech.Visio__6__6-178\">                <di:waypoint x=\"228.0\" y=\"111.0\"/>                <di:waypoint x=\"265.0\" y=\"111.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNEdge>            <bpmndi:BPMNEdge bpmnElement=\"_6-746\" id=\"Trisotech.Visio__6__6-746\">                <di:waypoint x=\"370.0\" y=\"420.0\"/>                <di:waypoint x=\"386.0\" y=\"420.0\"/>                <di:waypoint x=\"386.0\" y=\"474.0\"/>                <di:waypoint x=\"191.0\" y=\"474.0\"/>                <di:waypoint x=\"191.0\" y=\"420.0\"/>                <di:waypoint x=\"218.0\" y=\"420.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNEdge>            <bpmndi:BPMNEdge bpmnElement=\"_6-434\" id=\"Trisotech.Visio__6__6-434\">                <di:waypoint x=\"810.0\" y=\"111.0\"/>                <di:waypoint x=\"834.0\" y=\"111.0\"/>                <bpmndi:BPMNLabel/>            </bpmndi:BPMNEdge>        </bpmndi:BPMNPlane>    </bpmndi:BPMNDiagram></semantic:definitions>";

var viewer = new BpmnViewer({ container: '#canvas' });

viewer.importXML(pizzaDiagram, function(err) {

  if (!err) {
    console.log('success!');
    viewer.get('canvas').zoom('fit-viewport');
  } else {
    console.log('something went wrong:', err);
  }
});
</script>



</body>


</html>

#2

Did you try BpmnViewer#saveXML and BpmnViewer#saveSVG?

Note that these methods might be subject to removal in future versions of bpmn-js. If you’d like to be safe, use the BpmnModeler and export from there.