js-graph.it: How to add Blocks dynamically and build the connections using the Connectors

Question

I am using the js-graph.it based on the documentation provided here and the JS/CSS sample provided here. I am using jQuery to create the Blocks and Connectors dynamically. But for some reason, I am unable to create the Blocks and Connectors. Can someone please help me with how to achieve this?

I added my code sample in jsFiddle here.

I am hoping to create something like this:

Answer 1

Posting the answer as it can be helpful to someone in the future:

I tried a lot of libraries such as Konva, jsPlumb Community Edition, Flowchart-vue, Vue-konva, BPMN but for some reason, none worked the way I wanted it for my application.

Finally, I found an awesome Drawflow library that can be used to draw Nodes and Connections. Its author is very active in the Github so I used that and everything is working fine.