Can not create child elements in the Bpmn:diagram tag using javascript

[shaansrivastava]

I have created a definitions element in xml using Bpmn-moddle. It has two root elements: bpmn:process and bpmn:diagram. Whenever I try to push something in the process tag, it successfully gets inserted. But when I insert something in the diagram tag, it is not being displayed in the xml file. Can someone help me with how to insert child elements in the diagram tag.

<bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNEdge id="Flow_1jne4it_di" bpmnElement="Flow_1jne4it">
        <di:waypoint x="-495" y="-380" />
        <di:waypoint x="-465" y="-380" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge  id="Flow_0kpp457_di" bpmnElement="Flow_0kpp457">
        <di:waypoint x="-330" y="-320" />
        <di:waypoint x="-330" y="-300" />
        <di:waypoint x="-270" y="-300" />
        <di:waypoint x="-270" y="-280" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_1irjjnq_di" bpmnElement="Flow_1irjjnq">
        <di:waypoint x="-135" y="-220" />
        <di:waypoint x="-110" y="-220" />
        <di:waypoint x="-110" y="-230" />
        <di:waypoint x="-85" y="-230" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNShape id="Activity_18hvm8y_di" bpmnElement="Activity_18hvm8y">
        <dc:Bounds x="-765" y="-440" width="270" height="120" />
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>

This is the required xml format.

[Martin]

What do you want to push to the diagram tag? The BPMN standard only allows 1 plane element as a child. You will either need to push you changes to the plane element (like this: diagram.plane.get('planeElement').push(yourDiElements)) or create a new diagram with a separate plane.

[shaansrivastava]

But I can not even see the plane element inside the diagram tag. It is not being pushed inside the diagram tag.

const el = bpmnModdle.create(tag, attributes);
this.bpmnDiagram.flowElements.push(el);
return el;

[Martin]

The diagram does not have a flowElement attribute, only a plane attribute.

You need to assign it on creation:

  var diPlane = bpmnModdle.create('bpmndi:BPMNPlane');

  var diDiagram = bpmnModdle.create('bpmndi:BPMNDiagram', {
    plane: diPlane
  });

or set the plane directly to the element:

diagram.plane = bpmnModdle.create('bpmndi:BPMNPlane')

[shaansrivastava]

Thanks a lot, it works. What is I have to insert multiple bpmndi:edge components inside the bpmndi:BPMNPlane tag? Please help.

[Martin]

Why do you want to do this manually? BPMN-JS offers a modeling API that will create DI alongside the technical bpmn elements