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

Developers
1

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.

Questions

  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.
2

Did you manage to make progress on this?

I am also looking to use diagram-js for creating my own shapes etc but was looking for help.

3

There is no ready-to-use library to build your custom editor based on diagram-js. diagram-js is the ready-to-use library - a generic library that understands diagrams made of shapes and connections and their relationships. What you do with it is up to you. Feel free to look into how certain things (e.g. what shapes can be created) were achieved in bpmn-js.