OSS Tanbou
View on GitHubProject website

Vue Flow — build interactive node-and-edge flowchart UIs in Vue 3

OSS scale score 213.1OSS health 63Update pace 0 commits/30d
About these scores

OSS scale score is an unbounded metric that log-compresses and weights Stars, Watchers, Forks, and Contributors. Discovery score is the current OSS scale score minus the score at discovery. Update pace is commits in the last 30 days, growth momentum is the OSS scale score difference within the recent observation window, and OSS health is a 0–100 rating based on available recency, Community Health, and release data.

Stars
6,867
Primary language
TypeScript
License
MIT
Repository last updated
Jul 14, 2026

Overview

Vue Flow is a Vue 3 component library for flowcharts and node editors. It combines nodes and edges with zooming, panning, selection, dragging, custom elements, MiniMap, and other graph-oriented UI helpers.

Features and best fit

Based on official documentation; not hands-on tested · Content checked:

Manage nodes and edges as Vue state

Nodes carry unique IDs and positions, while edges identify their source and target nodes to form a graph.

Sources: [2][3]

Add zoom, pan, MiniMap, controls, and custom elements

Built-in interactions can be extended with custom nodes, edges, connection lines, MiniMap, Controls, and related components.

Sources: [2]

For workflow editors and interactive relationship diagrams

It fits Vue 3 applications that need users to view or edit workflows, process graphs, dependency diagrams, or similar node-based structures.

Sources: [2]

Vue 2 is not supported

The README states that the library depends on Vue 3-specific capabilities and will not support Vue 2. Required core styles also need to be loaded without component-scoped CSS.

Sources: [2]

Official sources

  1. [1]bcakmakoglu/vue-flow repository(2026-09-21)
  2. [2]Vue Flow README(2026-09-21)
  3. [3]Vue Flow getting started(2026-09-21)
  4. [4]@vue-flow/core package(2026-09-21)
  5. [5]Vue Flow MIT license(2026-09-21)
Supplemental curator note

Vue Flow is Vue 3-only; the README explicitly states that Vue 2 is unsupported. The current `@vue-flow/core` package is 1.48.2. Adoption should include a data-model decision for node IDs, positions, and edge source/target relationships rather than treating the library as only a visual layer.

Try it in 3 steps

  1. 1

    Install Vue Flow

    Add the core package to a Vue 3 project.

    npm i @vue-flow/core
  2. 2

    Load VueFlow and the required CSS

    Follow the README quick start and load the required global styles without component-scoped CSS.

    import { VueFlow } from '@vue-flow/core' + @import '@vue-flow/core/dist/style.css'
  3. 3

    Render nodes and edges

    Create a minimal graph using uniquely identified positioned nodes and source/target edge references.

    Pass nodes with id/position and edges with source/target
Check the official README

Growth

Growth trends · Last 30 days

6,867 Stars

Trend data is still being collected.

Development activity

Last 90 days · weekly

Commits (last 30 days)
0
Open PRs
7

Development activity is still being collected.

Built with

Categories and tags

Categories

Tags

GitHub data

GitHub dataView detailed GitHub data
View on GitHub

GitHub Topics

  • vue
  • vue3
  • flowchart
  • typescript
  • javascript
  • diagrams
  • flow
  • turborepo
  • vite
  • vitepress
Stars
6,867
Forks
412
Watchers
44
Open issues
12
Contributors
29
Primary language
TypeScript
License
MIT
Repository last updated
Jul 14, 2026
Write a related article

Share a guide or use case for this OSS in Markdown. Articles are published after administrator approval.

Report incorrect information

Tell us if any listing information is incorrect or outdated.