colors

bpmn-js colors

This example shows how to add colors to BPMN diagrams rendered with bpmn-js.

Try out.

About

The example shows a number of different approaches how to add colors to your BPMN diagrams.

The following options exist:

• Color via Overlay
• Color via BPMN 2.0 Extension
• Color via Marker + CSS Styling
• Color via Custom Renderer

See below for details on each of the approaches.

Usage Summary

Include bpmn-js and set it up pre-packaged or via npm:

var diagramXML = 'put your BPMN 2.0 process XML here';

var viewer = new BpmnJS({ container: '#diagram' });

Adding Colors

Option 1: Color via Overlay

This example assumes you have jQuery installed.

Add a CSS snippet like the following to your HTML file:

.highlight-overlay {
  background-color: green; /* color elements as green */
  opacity: 0.4;
  pointer-events: none; /* no pointer events, allows clicking through onto the element */
}

Now, attach a highlight overlay with the given class to certain elements:

viewer.importXML(diagramXML, function() {

  var overlays = viewer.get('overlays');
  var elementRegistry = viewer.get('elementRegistry');

  var shape = elementRegistry.get('UserTask_1');

  var $overlayHtml =
    $('<div class="highlight-overlay">')
      .css({
        width: shape.width,
        height: shape.height
      });

  overlays.add('UserTask_1', {
    position: {
      top: -5,
      left: -5
    },
    html: $overlayHtml
  });
});

Option 2: Color via BPMN 2.0 Extension

If you would like colors to be part of your BPMN 2.0 diagrams you may use our built-in BPMN 2.0 color extension.

To add colors, pick up the modeler and use the Modeling#setColor API to assign stroke and fill to BPMN elements:

var bpmnModeler = ...;
var modeling = bpmnModeler.get('modeling');

var elementsToColor = [ element1, element2 ];

modeling.setColor(elementsToColor, {
  stroke: 'green',
  fill: 'yellow'
});

The colors are persisted in the BPMN 2.0 diagram and shown by the BPMN viewer, too.

Read this blog post for more details on this feature.

Option 3: Color via Marker + CSS Styling

Add a CSS snippet like the following to your HTML file:

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

The snippet ensures that elements with the highlight class get a SVG fill of green.

After import, add the highlight class as an element marker to the every element you would like to see colored in green:

viewer.importXML(diagramXML, function() {

  var canvas = viewer.get('canvas');

  canvas.addMarker('UserTask_1', 'highlight');
});

Option 4: Color via Custom Renderer

Checkout bpmn-js-task-priorities for an example that provides a custom renderer to color shapes and connections dynamically.

Run this Example

Download the example diagram and open it in a web browser.

License

MIT