Over riding only the BPMN object styles, keeping the functionality

Developers
1

Is there a way to override only the style of bpmn objects that will be rendered when drag and dropped into the canvas. I want to restore all the object specific business functionalities, but Im trying to render a more stylish SVG.

e.g. Consider the start event:

  • I want to have all business functionalities( context elements, connection rules, settings menu…) of it, but want to change the complete appearance (without affecting default functionalities).

here is a rough representation of my question:-
Custom%20pallet

2

Have you made yourself familiar with bpmn-js and how it works internally yet? If it’s only about the visual representation you can add a custom renderer that takes care of rendering the elements you want to change. We have an example of a custom renderer in the custom elements example project. Simply add this renderer as an additional module when creating a bpmn-js instance.

var modeler = new BpmnJS({
  additionalModules: [
    myCustomRendererModule
  ]
});
1 Like