Vue Flow
|Updated:
19 May 2025
|5115 Stars
A highly customizable Flowchart component for Vue 3. Features seamless zoom & pan , additional components like a Minimap and utilities to interact with state and graph.
Categories
Overview
Vue Flow is a highly customizable Vue 3 Flowchart component that allows users to easily create and customize flowcharts. With features such as built-in zoom and pan, element dragging, and various customization options, Vue Flow is designed to facilitate the creation of dynamic flow diagrams.
Features
- Easy setup: Hassle-free setup with built-in zoom and pan features, element dragging, and selection options.
- Customizable: Users can customize nodes, edges, and connection lines to expand Vue Flow’s functionality.
- Fast: Tracks changes reactively and only re-renders necessary elements.
- Utils & Composition: Includes graph helper and state composable functions for advanced uses.
- Additional Components: Background with built-in patterns and configuration options, minimap, controls for zoom behavior, and more.
- Reliable: Fully written in TypeScript for reliability.
Installation
To install Vue Flow, follow these steps:
- Ensure Node.js v20+ and pnpm v9+ are installed.
- Import the necessary styles without scoping them with ‘scoped’ in your component.
- Note that Vue Flow is compatible with Vue 3 and does not support Vue 2.
- For development purposes, consider using Docker containers with the VSCode Docker extension.
Summary
Vue Flow is a feature-rich Vue 3 Flowchart component that prioritizes ease of use and customization options. With built-in features for zooming, panning, and customization, Vue Flow enables users to create dynamic flowcharts without the need for extensive coding. Additionally, the project gives credit to its inspirations such as React Flow by webkids and essential utilities like D3.js and VueUse.
