vue-flow - Highly adaptable flowchart component for Vue 3 with interactive and reactive features

Vue Flow: Revolutionizing Flowcharts with Vue 3

Overview

Vue Flow is a sophisticated, highly-customizable flowchart component designed for Vue 3. It effortlessly enables the creation of dynamic and interactive flowcharts with a friendly interface, ideal for developers who require rapid and reliable charting solutions within their Vue 3 applications.

Key Features

Effortless Setup: Users can easily integrate Vue Flow into their projects, enjoying built-in features like zoom, pan, and element dragging. This makes setting up complex flowcharts a breeze.
Customization at its Best: Developers can create custom nodes, edges, and connection lines, vastly enhancing the functionality. This flexibility ensures that Vue Flow can adapt to various project needs.
Performance-Focused: Vue Flow efficiently tracks changes and updates only the necessary elements, ensuring quick and seamless operations.
Additional Utilities: The tool offers graph helper functions and state composable functions for advanced customization and enhancements.
Rich Component Suite:
- Backgrounds: Delivering two built-in patterns with flexible configuration options.
- MiniMap: Offers a miniature map view of current nodes, aiding navigation and clarity.
- Controls: Allow users to manage zoom actions directly from a convenient control panel.
TypeScript Reliability: Built entirely with TypeScript, ensuring stability and reliability in complex applications.

Getting Started

Setting up Vue Flow is straightforward. Developers can install it using npm, pnpm, or yarn:

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

Quickstart Guide

In Vue Flow, the application is structured around nodes and edges, defined as elements. Each element needs a unique identifier, with nodes requiring specific XY-positions and edges needing a source and target.

<script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'

const nodes = ref([
  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
])

const edges = ref([
  { id: 'e1-2', source: '1', target: '2', animated: true },
])
</script>

<template>
  <VueFlow v-model:nodes="nodes" v-model:edges="edges"></VueFlow>
</template>

Users should import necessary styles to ensure proper display:

@import "@vue-flow/core/dist/style.css";
@import "@vue-flow/core/dist/theme-default.css";

System Requirements

To develop with Vue Flow, ensure you have Node.js v20+ and pnpm v9+ installed. Start by installing pnpm if necessary, build the packages, and launch the examples using:

$ npm i -g pnpm
$ pnpm dev
$ pnpm build

Community and Support

Vue Flow maintains an active Discord community where users can exchange ideas, propose new features, and showcase their work. Joining the community offers opportunities for collaboration and learning.

Acknowledgments

Vue Flow owes its existence to powerful inspirations such as React Flow, D3.js, and VueUse. These foundational tools have greatly influenced Vue Flow's development, providing essential functionalities like zooming, panning, and composition utilities. Gratitude is extended to contributors and supporters who continue to enhance its capabilities.

Conclusion

Vue Flow distinguishes itself through its robust features and adaptability, making it an indispensable tool for developers working with Vue 3. Whether crafting straightforward charts or complex interactive diagrams, Vue Flow offers the flexibility and power needed for diverse applications.