Problem with simple modeler


I wanted to create a simple page with the default modeler on it. I used the pre-package found here:
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.

<link rel="stylesheet" href="" />
<link rel="stylesheet" href="" />
<script src=""></script>
<div id="canvas">
var bpmnJS = new BpmnJS({
  <!-- container: '#canvas' -->

//Opmaken van de modeller canvas

//Afhaken van de modeller

//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); -->
  <!-- } -->
<!-- }); -->

This example works for me:

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

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=“” xmlns:bpmn2=“” xmlns:bpmndi=“” xmlns:dc=“” xmlns:di=“” xsi:schemaLocation=“ BPMN20.xsd” id=“sample-diagram” targetNamespace=“”>
<bpmn2:process id=“Process_1” isExecutable=“false”>
<bpmn2:startEvent id=“StartEvent_1”/>
<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”/>

Kind regards

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

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