Vue Flow 🌊

Vue Flow: A highly customizable Vue3 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.

If you want to see how it's used with Nuxt3, check out the docs repo!

⭐️ Features

• 👶 Easy to use: Seamless zooming & panning behaviour and single and multi-selections of elements

• 🎨 Customizable: Different and edge types and support for custom nodes with multiple handles and custom edges

• 🚀 Fast rendering: Only nodes that have changed are re-rendered and only those that are in the viewport are displayed (optionally)

• 🧲 Utils: Snap-to-grid and graph helper functions

• 📦 Additional Components:

  • 🖼 Background

  • 🧭 Minimap

  • 🕹 Controls

• 🦾 Fully written in TypeScript

🛠 Setup

$ npm i @braks/vue-flow
# or
$ yarn add @braks/vue-flow

🎮 Quickstart

<template>
  <Flow :elements="elements"></Flow>
</template>
<script lang="ts" setup>
import { Flow, Elements } from '@braks/vue-flow'

const elements = ref<Elements>([
  {
    id: '1',
    data: {
      label: 'This is a <strong>default node</strong>',
    },
    position: { x: 100, y: 100 },
  },
])
</script>

▸ Vue 2

This library doesn't work with Vue2.

🧪 Development

# start (dev)
$ yarn dev

# build dist
$ yarn build

💝 Credit

Thanks to webkid for creating React Flow! Without their work this would've been impossible for me.