Skip to content
Software Architecture Guide

Color Coding in BPMN Models

Explanation

Section titled “Explanation”

BPMN (Business Process Model and Notation) draws process steps with standard shapes. By default, those shapes use white or clear fills and black lines. Other colors are an extension that tools add on top of the standard notation. Color is therefore an extra channel, not part of the core meaning of the shapes.

How tools handle color

The open-source bpmn-js toolkit from bpmn.io shows how this works in practice:

  • Colors work in both the modeler (the editing tool) and the viewer (the read-only display).
  • Colors are saved in the BPMN 2.0 XML file, so they travel with the diagram.
  • Since version 8.7, bpmn-js saves colors following the BPMN in Color specification. The color data lives in the diagram file and not in a proprietary format.
  • Developers set stroke (outline) and fill colors through the Modeling#setColor API.
  • The core library has no color picker, by design. The picker is a separate extension.

What this means for modelers

Color needs deliberate choices. Decide which few categories deserve a color, and write down what each color means. Then apply the colors the same way across every diagram. The saved file keeps the colors, so other people who open the diagram see the same result.

Example

Section titled “Example”

A team marks every step that needs a human decision in one color. Every other step keeps the default look. A small legend in the corner of each diagram names that one color. A teammate prints the diagram in black and white. The step names and shapes still carry the meaning. The color only helps the eye find the decision steps faster.

Trade-offs

Section titled “Trade-offs”

Color helps, but it can also mislead.

  • Keep categories few. One diagramming guide advises never using color for more than three distinct categories. It also says to always include a legend. The guide was written for data flow diagrams but is general in scope.
  • Test without color. The same guide says to check a diagram in grayscale, which also covers grayscale printing. If it is not readable that way, it is not ready. It also suggests testing for color blindness with simulators.
  • Tool dependence. Color is a tool-level addition to the notation. Not every tool must show it the same way, so check how your tools save and display it.

Checks

Section titled “Checks”
  • The diagram uses color for no more than three distinct categories.
  • Every colored diagram includes a legend that explains what each color means.
  • The diagram has been checked in grayscale and stays readable.
  • The diagram has been tested for color blindness, for example with a simulator.
Section titled “Related”

Sources

Section titled “Sources”