Branch: master
Find file History
Type Name Latest commit message Commit time
Failed to load latest commit information.
resources chore(colors): improve example Jun 21, 2018 docs(colors): correct link Jun 22, 2018
index.html chore(project): bump examples to v3.1.0 Jan 14, 2019
screenshot.png chore(colors): improve example Jun 21, 2018

bpmn-js colors

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

Try out.


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

demo application screenshot

The following options exist:

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">')
        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 a 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.