Vue Flow

The customizable Vue 3 component bringing interactivity to flowcharts and graphs.

Stargazers
208
Downloads (last month)
1380
License
MIT

Batteries-included

Vue Flow comes with several built-in features including zooming, panning, zoom & pan controls, single & multi-selections, element dragging, node and edge components and event handlers.

Documentation
input
default
default
output
GREEN AMOUNT
RED AMOUNT
BLUE AMOUNT
Color Output
rgb(222, 45, 140)

Customizable

You can expand on the existing features by using your own custom nodes and edges and implement any design and functionality you want.

Documentation

Complex Flows

You want to visualize more complex ideas?
No worries! Vue Flow supports creating nested nodes and nested graphs out-of-the-box.

Documentation
Outer Node
Parent Node
Child Node
Child Node
Child Node
Outer Node
input
A
B
C
D
E
F
Output

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!

Documentation

Acknowledgement

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.