Adding custom elements to the modeler


I’m currently working on a research project that involves adding new elements to the modeler and the main requirement of this project is to not start from scratch and build the expected application on top of the camunda-modeler.

I’ve been looking at the sources of the project as well as some examples such as custom elements but I can’t figure out how to add new elements, making these elements available in the palette with an associated icon, dragging them into the modeler from the palette and so on.

Could someone explain it to me ? Or least, I would enjoy a few hints about it! :slight_smile:

Could you be more specific about what you’re struggling with? The things you mentioned are demonstrated by the example.

I might be wrong be I have the feeling that, what it covered by the example is a JSON file containing the position of custom elements and a custom modeler able to display these custom shapes. I don’t know if with the palette I’ll be able to place new custom elements in the modeler and then save them in *.bpmn file.

And as my project’s supervisor asked, I did’t start from scratch. I’ve forked the camunda-modeler repository and made a new branch trying to implement the example above.

The custom elements example features a modified palette that lets you create custom elements.

It’s supposed to look like this:

As a start I would suggest you try custom elements without the Camunda Modeler in order to get familiar with bpmn-js itself.