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

Akvavit

Konva is a 2D drawing library. It supports simple shapes which can be combined to create sophisticated displays. But it does not have the concept of a connector. Nor do shapes have the concept of connection points. You have to code those yourself. Or you can use a more complex lib like gojs which has more built-in diagram styles and functions. You might want to re-evaluate your capabilities vs project scope & timescale. – Dunne

@VanquishedWombat Thanks a lot for your response. I am actually trying to find the open-source library that can be used to achieve this. I looked into Gojs but it's actually a paid one and I was previously looking into Syncfusion. Can you please let me know if there is any open-source drawing js library that I can use to achieve something similar? – Akvavit

@VanquishedWombat Really looking forward to your response. Based on your response I can use the different library if I cannot use the Konva. – Akvavit

@VanquishedWombat I am really sorry for reaching out to you again but I am really stuck with this issue. Any help would be really appreciated. Thanks a lot in advance. – Akvavit

I do not want to dent your enthusiasm, but as I mentioned in the Discord, what you are trying to achieve is advanced. If we use PowerPoint as a comparison to your intended goal then you will need connection points on the shapes, variations on connectors (straight vs curved vs orthogonal) and maybe alignment hints for dragged shapes. Given the other queries you have raised I think you are maybe new to 2D drawing and have a steep learning curve and long road ahead. SO is not a teaching site. – Dunne

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.

Akvavit