This example showcases the different aspects of theming bpmn-js.

This example uses bpmn-js-sketchy to replace the default renderer. You can also roll your own renderer as shown in the custom elements example or bpmn-js-nyan.

You can specify which font bpmn-js should use:

var bpmnViewer = new CustomBpmnJS({
  // ...
  textRenderer: {
    defaultStyle: {
      fontFamily: '"Nothing You Could Do"'
    }
  }
});

Note: Make sure the font has been loaded before rendering a diagram.

Customizing the colors is very simple:

var bpmnViewer = new CustomBpmnJS({
  // ...
  bpmnRenderer: {
    defaultFillColor: '#333',
    defaultStrokeColor: '#fff'
  }
});

bpmn-js comes with a default stylesheet. Of course you can override any of these styles.

npm install
npm run all

MIT