Introduction to Vue Flow
Vue Flow is a highly customizable Vue 3 component for building node-based editors, workflow visualizations, diagrams, and interactive graphs.Easy Setup
Get started hassle-free with built-in zoom, pan, element dragging, selection and much more out of the box
Fully Customizable
Use your custom nodes, edges and connection lines. Extend Vue Flow’s functionality to match your needs
Blazing Fast
Tracks changes reactively and only re-renders the appropriate elements for optimal performance
TypeScript First
Fully written in TypeScript with complete type definitions included
Utils & Composables
Comes with graph helper functions and state composables for advanced use cases
Additional Components
Includes Background patterns, MiniMap, Controls, and many more components
What You Can Build
Vue Flow is perfect for creating:- Workflow and process editors
- Data flow diagrams
- Node-based visual programming interfaces
- State machines and flowcharts
- Organization charts
- Interactive diagrams and visualizations
Key Features
Built-in Interaction
Vue Flow comes with powerful interaction features out of the box:- Zoom & Pan: Smooth viewport navigation with mouse and touch support
- Node Dragging: Drag single or multiple nodes with snapping support
- Selection: Select multiple nodes and edges with box selection
- Connection Handling: Interactive edge creation with validation
Extensible Architecture
Customize every aspect of your graph:- Custom Nodes: Create any node UI with Vue components
- Custom Edges: Design unique edge styles and interactions
- Custom Connection Lines: Style the connection preview
- Event Hooks: React to user interactions and graph changes
Additional Components
Vue Flow includes optional components to enhance your graphs:Background
Add dot or line patterns with customizable colors, size and spacing
MiniMap
Display a mini overview of your graph in the corner
Controls
Add zoom controls and custom action buttons
Node Toolbar
Show contextual toolbars attached to nodes
Prerequisites
Before getting started, ensure you have:- Node.js v20 or above
- Vue 3.3 or above
Vue Flow is built exclusively for Vue 3 and does not support Vue 2. If you’re using Vue 2, you’ll need to upgrade to Vue 3 first.
Try It Online
Experiment with Vue Flow directly in your browser using our online sandboxes:JavaScript Sandbox
Start with a JavaScript template
TypeScript Sandbox
Start with a TypeScript template
Next Steps
Installation
Install Vue Flow in your project
Quick Start
Build your first flowchart