Vue Flow 🌊

Vue Flow: A highly customizable Vue 3 Flowchart component.

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

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

⭐️ 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 expand on the Vue Flows functionality

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

• 🧲 Utils & Composition: Comes with graph helper and state composable functions for advanced uses

• 📦 Additional Components:

  • 🖼 Background: With two built-in patterns and some configuration options like height, width or color.

  • 🧭 Minimap: Shows current nodes in a small map shape in the bottom right corner

  • 🕹 Controls: Control zoom behavior from a panel on the bottom left

• 🦾 Reliable: Fully written in TypeScript

🛠 Setup

$ npm i @braks/vue-flow

# or
$ yarn add @braks/vue-flow

🎮 Quickstart

A flow consists of nodes and edges (or just nodes). Together we call them elements.

Each element needs a unique id.

A node also needs a xy-position. An edge needs a source (node id) and a target (node id).

A simple setup could look like this:

<!-- Flowchart.vue -->
<script setup>
import { VueFlow } from '@braks/vue-flow'

const elements = ref([
  {
    id: '1',
    label: 'node 1',
    position: { x: 100, y: 100 },
  },
  {
    id: '2',
    label: 'node 2',
    position: { x: 100, y: 200 },
  },
  {
    id: 'e1-2',
    target: '2',
    source: '1',
  },
])
</script>

<template>
  <VueFlow v-model="elements"></VueFlow>
</template>

Make sure to import the necessary styles:

/* main.css */

/* import the required styles */
@import "@braks/vue-flow/dist/style.css";

/* import the default theme (optional) */
@import "@braks/vue-flow/dist/theme-default.css";

▸ Vue 2

This library doesn't work with Vue2.

🧪 Development

# start (dev)
$ yarn dev

# build dist
$ yarn build

⭐ Stargazers

Thanks for your star!

💝 Special Thanks

This project is built with

• React Flow

  • Vue flow is heavily based on webkid's react flow. I wholeheartedly thank them for their amazing work! Without them this vue flow would not exist. Please consider donating to them!

• D3.js

  • D3 makes all the zoom and pan actions in the graph possible. Check it out to see if you can find other uses for it too!

• VueUse

  • VueUse is a collection of helpful utilities/composables that have been battle tested.