Introduction #

What is Vue Flow? #

Vue Flow is a Vue 3 library that brings interactivity to flowcharts and graphs.

It is a tool to build your own diagrams, editors and whatever your imagination allows for.

Easily implement your own custom nodes and edges and expand on the basic functionality and on top of that Vue Flow comes with a couple of additional components like a Background, a Minimap and Controls.

Check out the examples if you want to dive directly into the code.

Key Features #

• 👶 Easy setup: Get started hassle-free - Built-in zoom- & pan features, element dragging, selection and much more

• 🎨 Customizable: Use your own custom nodes, edges, connection-lines and a multitude of plugins to extend the functionality of Vue Flow

• 🚀 Fast: Tracks changes reactively and only re-renders the appropriate elements

• 🧲 Utils & Composition: Built for Composition API and comes with a set of useful utilities to make your life easier

• 📦 Additional Components:

  • 🖼 Background: With two built-in patterns (grid & dots) and the ability to add your own custom background shapes

  • 🧭 Interactive Minimap: Shows current nodes in a small map shape and allows dragging or zooming the viewport using the mini map

  • 🕹 Controls: A panel with buttons to zoom in, zoom out, fit the view or lock interaction. You can also add your own custom controls to the panel.

• 🦾 Reliable: Fully written in TypeScript and tested with Cypress 10