Adding custom SVG elements to the bpmn canvas

Hi, bpmn.io is great and I am using most of its features to build my own workflow designer, now I am stucked at adding milestone feature, which will split the canvas with timelines. I use fixed matrix and disallow movement of participant, then I want to add some background elements(rect) on the top as the milestons, I learned the online demo, there is a good example in .layer-bg g elements, how can I add something like that and do not let the participant wrap them automatically? thanks.

Hi, I’ve done this via Snap.svg api, for a reference.

Not sure what you exactly want to achieve. Could you provide a running version of your integration / changes / stuff you tried somewhere, i.e. on GitHub. Code snippets would be helpful, too.

If you would like to get a background layer to draw on, simply use Canvas#getLayer. This will give you a group element you can draw on.

Hi nikku, I’m rushing on a project POC now, and I havn’t fork bpmnio yet, I need to spend more time on reading the source code when the project starts. then I could share something useful. thanks for the reply.

For now, I just use Snap api, and create some milestones, timelines as background, which are not part of the bpmn xml. it’s not the final design, because I need to ship these features with redo,undo etc…