Diagram-js Editor Example - How to get the model?

I am studying the diagram-js Editor example. My goal is to create a diagram editor for a workflow tool that is not in any way related to BPMN. Where I am currently getting stuck is to understand how the diagram relates to any potential underlying models.

Imagine I have rectangle A with a connection to rectangle B which has a connection to rectangle C. How would I be able to obtain that information? If I wanted to implement a “save” button … where should I start to look to obtain the count and identities of the rectangles and which ones connect to others?

I’ve looked at the examples but there is so much code within that I am missing the wood for the trees. I feel that if I could get my mind around the “architecture” of diagram-js it would make sense,

Hi @kolban ,

Great to hear that you want to create your own Modeler using diagram-js! Even though it is not a bpmn modeler, I would recommend to read through the bpmn-js walkthrough to understand how the different components interact with eachother. Have a look at this image:


diagram-js is only a display library that does not care about the underlying data structure, which is provided by bpmn-moddle. You will have to provide the model and the data structures to store it yourself.

I hope this makes the role of diagram-js a bit clearer