Thanks for this great library. I've been working on wanderer-flow.de for a while now. vue-network-graph is now an important part of my core concept. It's going to be a reactive graph runtime for stateful AI and chat workflows.
Anyway.
I'm currently talking to a lot of people here locally and from the community about it, and showing it to many people in live sessions. One direct feedback was that people don't know how to create edges. I do have a tutorial that explains you first have to select two nodes, but people are used to it differently from other flow builders. One person told me: "I think I've found a bug because I can't create edges."
My tutorial is available here. But in my opinion people are too lazy and have little time. They want something more intuitive and do not want to take a tutorial to connect nodes: https://wanderer-flow.de/builder?flowUrl=https://hub.wanderer-flow.de/flows/54v6dg43j88haesxwg6uv3grpb6gdi2s
So I thought it would probably be a huge benefit for the library if I could have some kind of edge draw handle on nodes from which I could simply drag edges to other nodes. Similar to this example: https://reactflow.dev/examples/nodes/proximity-connect
Has anyone already implemented this for Vue-Network-Graph? Or does anyone have any ideas for simpler, more intuitive solutions? If I have time, I'd also like to research it further myself.
Currently, I'm using the following methods to draw edges:
-
When a node is selected and another is inserted, an edge is automatically created. The inserted node automatically becomes the target node.
-
Select a node (start node), press Shift, and select a second node (target node). The available edges for insertion will then appear as menu at the bottom of the editor.
I also had the following ideas:
-
I'm considering using the Rectangle selection to display the edge menu when two nodes are selected. However, this would lack the indicator for the start and destination nodes. The edge direction would then be random.
-
I'm also considering using the context menu: Open the context menu -> Select "Connect Node" -> Click on the target node.
However, I don't find any of these approaches very intuitive.
I would be happy to hear from you. 🖖
Thanks for this great library. I've been working on wanderer-flow.de for a while now. vue-network-graph is now an important part of my core concept. It's going to be a reactive graph runtime for stateful AI and chat workflows.
Anyway.
I'm currently talking to a lot of people here locally and from the community about it, and showing it to many people in live sessions. One direct feedback was that people don't know how to create edges. I do have a tutorial that explains you first have to select two nodes, but people are used to it differently from other flow builders. One person told me: "I think I've found a bug because I can't create edges."
My tutorial is available here. But in my opinion people are too lazy and have little time. They want something more intuitive and do not want to take a tutorial to connect nodes: https://wanderer-flow.de/builder?flowUrl=https://hub.wanderer-flow.de/flows/54v6dg43j88haesxwg6uv3grpb6gdi2s
So I thought it would probably be a huge benefit for the library if I could have some kind of edge draw handle on nodes from which I could simply drag edges to other nodes. Similar to this example: https://reactflow.dev/examples/nodes/proximity-connect
Has anyone already implemented this for Vue-Network-Graph? Or does anyone have any ideas for simpler, more intuitive solutions? If I have time, I'd also like to research it further myself.
Currently, I'm using the following methods to draw edges:
When a node is selected and another is inserted, an edge is automatically created. The inserted node automatically becomes the target node.
Select a node (start node), press Shift, and select a second node (target node). The available edges for insertion will then appear as menu at the bottom of the editor.
I also had the following ideas:
I'm considering using the Rectangle selection to display the edge menu when two nodes are selected. However, this would lack the indicator for the start and destination nodes. The edge direction would then be random.
I'm also considering using the context menu: Open the context menu -> Select "Connect Node" -> Click on the target node.
However, I don't find any of these approaches very intuitive.
I would be happy to hear from you. 🖖