Problem with simple modeler

Developers General
1

Hello,

I wanted to create a simple page with the default modeler on it. I used the pre-package found here: https://github.com/bpmn-io/bpmn-js-examples/tree/master/pre-packaged
However when I use the code I see the components but am unable to draw upon it.

Not a good start so any help is appreciated.

<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@5.1.2/dist/assets/diagram-js.css" />
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@5.1.2/dist/assets/bpmn-font/css/bpmn.css" />
<script src="https://unpkg.com/bpmn-js@5.1.2/dist/bpmn-modeler.development.js"></script>
</head>
<body>
<div id="canvas">
</div>
</body>
<script>
var bpmnJS = new BpmnJS({
  <!-- container: '#canvas' -->
});

//Opmaken van de modeller canvas
bpmnJS.attachTo('#canvas');

//Afhaken van de modeller
//bpmnJS.detach();

//Importeren van een bestaande XML
<!-- bpmnJS.importXML(someDiagram, function(err) { -->

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

This example works for me: https://codesandbox.io/s/kaizer-forum-example-ix2rn

I think it depends on the xml you want to import. Can you share what the someDiagram in your code would look like?

3

Hi Niklas,

The importcode was commented out. I just want to start out with a new fresh diagram so maybe I just need to create an empty one and use it when creating a new diagram.

Like this I guess:

<?xml version="1.0" encoding="UTF-8"?>

<bpmn2:definitions xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance” xmlns:bpmn2=“http://www.omg.org/spec/BPMN/20100524/MODEL” xmlns:bpmndi=“http://www.omg.org/spec/BPMN/20100524/DI” xmlns:dc=“http://www.omg.org/spec/DD/20100524/DC” xmlns:di=“http://www.omg.org/spec/DD/20100524/DI” xsi:schemaLocation=“http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd” id=“sample-diagram” targetNamespace=“http://bpmn.io/schema/bpmn”>
<bpmn2:process id=“Process_1” isExecutable=“false”>
<bpmn2:startEvent id=“StartEvent_1”/>
</bpmn2:process>
<bpmndi:BPMNDiagram id=“BPMNDiagram_1”>
<bpmndi:BPMNPlane id=“BPMNPlane_1” bpmnElement=“Process_1”>
<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement=“StartEvent_1”>
<dc:Bounds height=“36.0” width=“36.0” x=“412.0” y=“240.0”/>
</bpmndi:BPMNShape>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn2:definitions>

Kind regards

4

This example works for me. Make sure you don’t use unescaped “ quotation marks.

5

Thanks, spot on. The key was to start/import an empty model.