Adding Colors to bpmn-js viewer

Question

I'm currently using bpmn-js viewer library to display BPMN 2.0 diagrams on my website. The problem occurs when I want to add colours to my displayed diagram. I checked this bpmn-js colors example and implemented the following code:

<script>
  var bpmnViewer;
  function openDiagram(bpmnXML, height) {
    bpmnViewer = new BpmnJS({
    container: '#canvas',
    height: height
    });
    bpmnViewer.importXML(bpmnXML, function (err) {
      if (err) {
        return console.error('could not import BPMN 2.0 diagram', err);
      }
      var canvas = bpmnViewer.get('canvas');
      var overlays = bpmnViewer.get('overlays');
      var elementRegistry = bpmnViewer.get('elementRegistry');
      var modeling = bpmnViewer.get('modeling');
      var elementToColor = elementRegistry.get('_6-127');
      modeling.setColor(elementToColor, {
        stroke: 'green',
        fill: 'rgba(0, 80, 0, 0.4)'
       });
      ...
    });
  }
</script>

When using bpmn-viewer.development.js lib (v2.5.0), colors don't work, but when using bpmn-modeler.development.js lib (v2.5.1) everything works as expected. But with the use of the modeler library we also get editor option on showed diagram (which I don't want to have).

So which is the best way to add color to my diagrams, which I want to have just for viewing and don't want any edit options?

Do I need to add some js code to viewer library (to enable color feature) or to modify modeler library (to disable edit options) and how to do one or another?

Answer 1

The "best" way is hard to define here. Assuming "best" means as few dependencies and modules as possible and as flexible as possible, then your best option would be method 3 from the the colors example of the bpmn-js-examples repo:

bpmnViewer.importXML(bpmnXML, function (err) {
  if (err) {
    return console.error('could not import BPMN 2.0 diagram', err);
  }
  var canvas = bpmnViewer.get('canvas');
  canvas.addMarker('UserTask_XYZ', 'highlight');
});

where highlight is a defined css class:

.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
  fill: green !important; /* color elements as green */
}

Advantages:

• you really only require the canvas module. This is also required by the viewer, so no additional modules required.

• your styles are separated from the js code. If you want to change your "theme" you will only change / tweak the css while the js code keeps untouched. (Keep styling out of your JS code as much as you can!)

• you can also use canvas.removeMarker(id, classname) in combination with canvas.addMarker to create some interactive styles.

Disadvantages:

• because you will style svg elements, you will have to deail with different css properties. If you are new to styling svg this can take some time to not confuse it with general css properties.