Press enter or space to select a node. You can then use the arrow keys to move the node around. You can then use the arrow keys to move the node around, press delete to remove it and press escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or press escape to cancel.
Stargazers
0
Downloads (last month)
0
License
MIT
Interactive Graphs
Vue Flow comes with built-in features like zoom & pan and dedicated controls, single & multi-selections, draggable elements, customizable nodes and edges and a bunch of event handlers.
Press enter or space to select a node. You can then use the arrow keys to move the node around. You can then use the arrow keys to move the node around, press delete to remove it and press escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or press escape to cancel.
GREEN AMOUNT
RED AMOUNT
BLUE AMOUNT
Color Output
rgb(222, 45, 140)
Press enter or space to select a node. You can then use the arrow keys to move the node around. You can then use the arrow keys to move the node around, press delete to remove it and press escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or press escape to cancel.
Customizable
You can expand on the existing features by using your own custom nodes and edges and implement any design and functionality you want.
Press enter or space to select a node. You can then use the arrow keys to move the node around. You can then use the arrow keys to move the node around, press delete to remove it and press escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or press escape to cancel.
input
A
B
C
D
E
F
Output
Press enter or space to select a node. You can then use the arrow keys to move the node around. You can then use the arrow keys to move the node around, press delete to remove it and press escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or press escape to cancel.
Additional Features
On top of all the features Vue Flow comes with several components like a Background, Minimap or Controls. Plus it's built for composition, making the access of the internal state easy as can be!
First off: A big thank you to the developers of Webkid. Their amazing work made it possible for me to create this port to Vue 3 - without them there is no Vue Flow.
Vue Flow is built on top of existing features and code taken from React Flow. It replicates the basic features found in React Flow (zoom, pan, graph, additional components and more) and brings them to the Vue 3 experience, with all the fun reactivity and features like template slots etc. you know and love from Vue. If you're happy with Vue Flow, please consider supporting Webkid by donating.
Vue Flow