Konvajs/Vue-Konva connect the shapes using the connector dynamically

Question

I am using Konvajs/Vue-Konva within my Vuejs/Nuxt application. Using Konva I am creating the Rect shape dynamically at run time. Now I would like to use some sort of Connectors to connect the different Rect Shapes so that I can have the logic of which is source Rect and which is Target Rect so as to build the Parent-Child relationship.

I am creating the connectors using the same approach as shapes but for some reason, it is not working as expected.

I have added my code sample here in CodeSandBox.

I am looking to build something like this, where I can draw the Nodes/Shapes and connect them using some sort of Connectors with Labels. Can someone please let me know how can I add the Connectors and build the logic to understand Rect/Shape that has been created using Vue-Konva

Answer 1

Posting as it can be useful to someone else:

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 Drawflow library that can be used to draw Nodes and Connections.