Drawing BPMN symbols independendly

For the new camunda documentation website, I need to draw BPMN symbols (like participants, events, gateways and buddies) outside of a diagram representation.

bpmn-js is already included in the page (because we also have some full diagrams to render) and I thought it should be possible (not necessarily easy) to use bpmn-js to render the symbols independently of a diagram.

But I’m stuck and would really appreciate some guidance.

Welcome to our forums @Valentin_Vago.

If I understood right, you want to be able to render single bpmn elements (not compose them) on a webpage that already uses bpmn-js ? If so, then you can just use the css classes assigned to each element, that we use to render the elements as a font for the palette, context-pad, etc… They are located in the bpmn-js.css file.

Hope that helps.


Hi Ricardo,

I thought about using the font, but it does not cover all elements.
After a little while I found https://github.com/bpmn-io/bpmn-js/blob/master/lib/draw/PathMap.js which could have been a good start, but I ditched the idea to use bpmn-js for now.

Thanks anyways.