I am trying to look for the logic to layout the plan on a 2D plane so that the boxes don't collide with each other but so far no luck. Can you give me a pointer please?

The sample JSON of the plan doesn't indicate how big the boxes would be when presented on the UI. And also how to draw the connections between them.

This is beautiful.

Can I ask, do you use a library to handle laying out the visual network, or is that using custom JS?

I don't use JS for layout, it's pretty much all custom CSS.

Still being developed/maintained? Last push in Oct...