Tutorial \ Intro on creating shape\business objects\connections in diagram-js

Good day.
I’m inspired by your project - it’s core diagram-js - and want to build a custom modeller (not concerning BPMN or other domain that you covered).

I’ve managed to implement very basic editor from your diagram-js example in my React application and it seems to work.

Next step for me is to dive deeper - create my own shapes, connections etc.

And I’m stuck here cause i found no docs on how to complete these very basic tasks or where to look for the answers (some code examples)

Links that I already investigated

There is a lot info here, but most of it concerns using bpmn-js, not core diagram-js and at the moment I have no idea where to start.

Actually I managed to implement basic examples like interactions, overlay etc., but it’s not enough to build even basic things.

For example
I need to build some custom shape - rounded rectangle with a label inside it.


  1. Is there something that I can use for it out-of-the-box?
  2. Is there some library of shapes that I can use?
  3. Is there some fixed data model that I can pass to elementFactory.createShape() or smth like that to accomplish my task
  4. If the answer to previous questions is ‘NO’ than what is a roadmap for me to complete this task - i.e. define some model (where?) \ implement renderer(how?) \ register all this etc.