Visualize your ideas with Vue Flow

A customizable Vue.js library for building node-based editors and diagrams.

Check The Examples
Read The Documentation
Github
Back To The Start
Node 2
Node 3

Everything you need

Vue Flow ships with a Minimap-, Background- and Controls-Component. On top of that we add Zoom & Pan utilities with which you can create the exact same transitions that are used on this site!

Documentation Examples
GREEN AMOUNT
RED AMOUNT
BLUE AMOUNT
rgb(100, 150, 100)
Click me to continue.
150100

Highly customizable

With Vue Flow you can create the most beautiful static diagrams or even custom editors. Thanks to a lot of handy utilities that come out of the box, you jump right into customizing Vue Flow to your hearts desire and utilize the seamless zoom & panning feature.

Documentation Examples

Easy to use

Getting started is simple. All you need are some elements and you're ready to go. Each element needs a unique id. A node also needs a position (x and y). An edge needs a source and a target.

Documentation Examples
Input Node
Default Node
Default Node

Getting Started

With Vue Flow you can build your own, customized node-based applications like static diagrams or even more complex and interactive editors!

Installation

$ npm i --save @braks/vue-flow

$ yarn add @braks/vue-flow

A flow consists of nodes and edges (or just nodes). Together we call them elements. You can pass a set of elements as a v-model to the Vue Flow component. Each element needs a unique id. A node needs a position (x and y) and an edge needs a source (node id) and a target (node id). A simple setup could look like this: 

// setup function
import { VueFlow, Elements } from '@braks/vue-flow'

const elements: Elements = [
  {
    id: '1',
    type: 'input', // input node
    data: { label: 'Input Node' },
    position: { x: 250, y: 25 },
  },
  // default node
  {
    id: '2',
    // you can pass a Vue component, string or html-string as a label
    data: { label: '<div>Default Node</div>' },
    position: { x: 100, y: 125 },
  },
  {
    id: '3',
    type: 'output', // output node
    data: { label: 'Output Node' },
    position: { x: 250, y: 250 },
  },
  // animated edge
  { id: 'e1-2', source: '1', target: '2', animated: true },
  { id: 'e2-3', source: '2', target: '3' },
]

<template>
  <div style="height: 300px">
    <VueFlow v-model="elements" />
  </div>
</template>

You can find a detailed explanation on how to get started in the documentation or check the examples.

Feature-rich

Vue Flow comes with seamless zooming & panning, different edge and node types, single and multi-selection, controls, several event handlers and more.

Documentation
input
default
default
output
animated edgedefault edge
FIRST NAME
LAST NAME
Full name
------------

Customizable

You can create your own node and edge types or just pass a custom style. You can implement custom UIs inside your nodes and add functionality to your edges.

Documentation

Additional Components

Vue Flow includes a MiniMap, Controls and Background, as well as a ton of utilities to control the internal state outside the Vue Flow component.

Documentation
input
A
B
C
D
E
F
Output

SPECIAL THANKS & CREDIT

Vue Flow is, in it's core, a port of the React Flow library. Main utilities and concepts have stayed the same, though their use have changed through frameworks. Still, without the work of Webkid and their amazing developers, this would've been impossible to make with my limited time. Thus I thank them wholeheartedly for their work and hope this library can be of good use to a lot of people! Thank you for using and/or contributing to Vue Flow and thank's for reading.