Simple Node Visualization with Diagram.js

Hello everyone :grinning:,

First of all great project and website!

I just started out with diagram.js especially. My task is to implement a simple Visualization of Nodes with a name and a parent-children relation, where children can be connected by a link:


As you can see a node can have (0…*) children, where the Leaf children are connected. (Composite pattern) I get all the input nodes as json and my app has to visualize it to the user.
How would I manage this via diagram.js ?

So far with your example I managed to add Shapes via the ElementFactory. But does diagram.js provided me with any help regarding:

  • giving each shape a name
  • the parent-child structure, as seen above
  • the connection of the leaf nodes
  • the composition of children inside the parent node (like in a masonry, masonry-fashion)

Any pointers are highly appreciated! :see_no_evil:

1 Like

Also can this be achieved simply by utilizing the bpmn viewer and feeding it a parsed XML that generates the desired outcome?

Did you manage to achieve the above? Also looking to do something similar

Please do not necrobump old topics. Instead link to this thread from new topic.