Adding Color to Bpmn Modeler creates invalid XML

Developers Modeler
1

Hi Guys,

So as the title says, I have added color , as showed in the repo bpmn-js colors to my modeler.
Everything seemed to be fine, but I just noticed than when trying to save the diagram, this produces invalid xml, therefore not being able to re-open the saved file in the modeler, or any BPMN tool.
Just wondering why would this happen? And if it can be fixed?

Thank you,
Patrick

If it helps here is the invalid xml produced by the app:

<?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" xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
  <bpmn2:process id="Process_1" isExecutable="false">
    <bpmn2:startEvent id="StartEvent_1">
      <bpmn2:documentation textFormat="text/x-comments"></bpmn2:documentation>
      <bpmn2:outgoing>SequenceFlow_1d2aw04</bpmn2:outgoing>
    </bpmn2:startEvent>
    <bpmn2:task id="Task_0kc3hyc">
      <bpmn2:incoming>SequenceFlow_1d2aw04</bpmn2:incoming>
    </bpmn2:task>
    <bpmn2:sequenceFlow id="SequenceFlow_1d2aw04" sourceRef="StartEvent_1" targetRef="Task_0kc3hyc" />
  </bpmn2:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1" bioc:fill="">
        <dc:Bounds x="280" y="239" width="36" height="36" />
        <bpmndi:BPMNLabel>
          <dc:Bounds x="253" y="275" width="90" height="20" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Task_0kc3hyc_di" bpmnElement="Task_0kc3hyc" bioc:fill="" $type="bpmndi:BPMNShape">
        <dc:Bounds x="554" y="217" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNEdge id="SequenceFlow_1d2aw04_di" bpmnElement="SequenceFlow_1d2aw04">
        <di:waypoint x="316" y="257" />
        <di:waypoint x="554" y="257" />
        <bpmndi:BPMNLabel>
          <dc:Bounds x="435" y="236" width="0" height="12" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNEdge>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn2:definitions>
2

I’ve updated the example to the latest bpmn-js version. That should fix the issues you’re having.

I’d suggest you to use our built-in color support instead, as the example builds on a dead BPMN standard proposal.

3

Thank you for that @nikku . That did solve the problem indeed.
I will look at the built-in color support if that is what are you suggesting is a better approach.

Thanks,
Patrick