colors/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <style>
    html, body, #diagram {
      height: 100%
    }

    .highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
      fill: green !important; /* color elements as green */
    }

    .highlight-overlay {
      background-color: green; /* color elements as green */
      opacity: 0.4;
      pointer-events: none; /* no pointer events, allows clicking through onto the element */
      border-radius: 10px;
    }
  </style>

  <!--
    this is an example of how to add colors to your BPMN diagram using bpmn-js
  -->

  <title>bpmn-js colors example - bpmn-js-examples</title>
</head>
<body>

  <h1>bpmn-js Colors</h1>

  <div id="diagram"></div>

  <!-- required modeler styles -->
  <link rel="stylesheet" href="https://unpkg.com/bpmn-js@5.0.3/dist/assets/diagram-js.css">
  <link rel="stylesheet" href="https://unpkg.com/bpmn-js@5.0.3/dist/assets/bpmn-font/css/bpmn.css">

  <!-- modeler distro -->
  <script src="https://unpkg.com/bpmn-js@5.0.3/dist/bpmn-modeler.development.js"></script>

  <!-- jquery (required for example only) -->
  <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>

  <!-- app -->
  <script>

    var viewer = new BpmnJS({
      container: '#diagram'
    });

    function showDiagram(diagramXML) {

      viewer.importXML(diagramXML, function() {

        var overlays = viewer.get('overlays'),
            canvas = viewer.get('canvas'),
            elementRegistry = viewer.get('elementRegistry'),
            modeling = viewer.get('modeling');

        // Option 1: Color via Overlay
        var shape = elementRegistry.get('CalmCustomerTask');

        var $overlayHtml = $('<div class="highlight-overlay">')
                                .css({
                                  width: shape.width,
                                  height: shape.height
                                });

        overlays.add('CalmCustomerTask', {
          position: {
            top: 0,
            left: 0
          },
          html: $overlayHtml
        });

        // Option 2: Color via BPMN 2.0 Extension
        var elementToColor = elementRegistry.get('SelectAPizzaTask');

        modeling.setColor([ elementToColor ], {
          stroke: 'green',
          fill: 'rgba(0, 80, 0, 0.4)'
        });

        // Option 3: Color via Marker + CSS Styling
        canvas.addMarker('OrderReceivedEvent', 'highlight');
      });
    }

    // load + show diagram
    $.get('https://cdn.rawgit.com/bpmn-io/bpmn-js-examples/master/colors/resources/pizza-collaboration.bpmn', showDiagram, 'text');
  </script>
</body>
</html>