Overview
Browse our examples for practical copy-paste solutions to common use cases with Vue Flow. Here you can find our MIT Licensed examples, which you are free to use in your projects without restrictions, as well as our Pro examples that come with our Vue Flow Pro subscription plans.
Nodes
NODES
A new node appears wherever you drop the connection line
NODES
Use the `isConnectable` prop to limit the number of connections a handle can have
NODES
Display any content inside of a node
NODES
Remove a node without breaking the flow
NODES
A custom node whose connection handle sits apart from the node body.
NODES
Restrict dragging to a specific part of node
NODES
Make the whole node into a handle
NODES
Toggle the visibility of nodes and edges with the hidden property.
NODES
Detect when a node overlaps with another node
NODES
Change the size of a node with a bounding box or draggable icon
NODES
A toolbar with buttons appears next to the selected node
NODES
Automatically create edges when nodes get close to each other
NODES
A custom node that can be rotated using CSS transforms
NODES
Render hundreds of nodes and edges at once
NODES
Click a node to teleport it between the flow canvas and a sidebar with Vue's Teleport.
NODES
Update the data field of a specific node
Edges
EDGES
Create edge animations that go beyond the built-in animated edge.
EDGES
Change the appearance and behavior of the connection line
EDGES
Create edges with special routing or controls along the edge
EDGES
Delete an edge when it doesn't find a handle
EDGES
Detect edge intersections with nodes while dragging.
EDGES
Render edge labels as divs on top of edges
EDGES
You can use the EdgeToolbar component to display content on top of an edge.
EDGES
Make edges straight, stepped, smooth-stepped, or bezier curved
EDGES
Instead of having the handle at a fixed point, let it move with the connected edge
EDGES
Make your edges into arrows, add custom icons, or SVGs
EDGES
Draw multiple connection lines at once from any selected nodes.
EDGES
Click-drag to move an existing edge from one handle to another
EDGES
Edges connect to the closest available handle
EDGES
Push what Vue Flow edges are capable of by rendering invisible ghost nodes.
Interaction
INTERACTION
This examples demonstrates how to use the helpers to handle data flow
INTERACTION
Ask for confirmation with a dialog before nodes or edges are deleted.
INTERACTION
Vue Flow emits different events during the connection process. Use this example to get an overview of those events and what order they are called in.
INTERACTION
Right-click a node to display custom actions
INTERACTION
Only display the content of a node when you are zoomed in close enough
INTERACTION
Drag and drop outside of the Vue Flow pane with native HTML Drag and Drop API or neodrag.
INTERACTION
Toggle whether nodes can be dragged, selected, or connected, and how the pane pans and zooms
INTERACTION
Check if a new connection would cause a cycle in the graph
INTERACTION
Save the state of the diagram, and reload it after refreshing the page
INTERACTION
Tap two handles to connect them, and make handles bigger for smaller devices
INTERACTION
Check if a new connection is valid and should be added
INTERACTION
Double-click a node to smoothly animate the viewport to it.
INTERACTION
Smoothly transition between different zoom levels
Subflows & Grouping
SUBFLOWS & GROUPING
Move a node into or out of a parent at runtime with the changeParent helper, keeping its position.
SUBFLOWS & GROUPING
Vue Flow supports sub flows, which are flows inside of a node.
Layout
LAYOUT
Integrate dagre with Vue Flow to create simple tree layouts.
LAYOUT
For a more powerful alternative to dagre, use elkjs to lay out your graphs.
LAYOUT
Use multiple handles with the elkjs layouting engine to reduce edge crossings.
LAYOUT
Lay out tree structures with the entitree-flex layouting library.
LAYOUT
A diagram that flows from left to right.
LAYOUT
Automatically resolve node overlaps using collision detection.
LAYOUT
Animate nodes to their layouted positions as a process runs.
Styling
STYLING
The bare-bones base style built into Vue Flow, which is not applied by default.
STYLING
The styles Vue Flow applies to nodes and edges out of the box.
STYLING
Vue Flow ships a color mode prop to switch between dark, light and system mode.
STYLING
Use Tailwind to quickly build nice looking flows.
STYLING
Nodes with glowing animated gradient borders, inspired by the turbo.build website.
Whiteboard
WHITEBOARD
A tool that lets you delete nodes and edges by wiping over them.
WHITEBOARD
Select multiple items by drawing a lasso around them.
WHITEBOARD
Draw rectangles on a whiteboard with Vue Flow.
