Skip to main content
Explore our collection of interactive examples to learn how to build powerful flowcharts with Vue Flow. Each example demonstrates specific features and patterns you can use in your own applications.

​
Live Examples

All examples are available as live demos on vueflow.dev/examples. You can interact with them, view the source code, and see how they work in real-time.

​
Example Categories

Basic Flow

Get started with a simple flow example including nodes, edges, and basic interactions

Custom Nodes

Create custom node components with your own styling and behavior

Custom Edges

Build custom edge components with labels, buttons, and interactions

Validation

Validate connections before they’re created

Drag and Drop

Add nodes to the flow by dragging them from a sidebar

Save & Restore

Save flow state to local storage and restore it later

Interaction

Control all interaction settings dynamically

Nested Flows

Create parent-child node relationships

​
Getting Started

Each example includes:
  • Complete, runnable code
  • Explanations of key concepts
  • Links to relevant API documentation
  • Live demo when available
All examples use the Composition API with <script setup>. For Options API examples, check the basic flow example.

​
Example Template

Most examples follow this basic structure: 
<script setup>
import { VueFlow } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import { Controls } from '@vue-flow/controls'
import { MiniMap } from '@vue-flow/minimap'

const nodes = ref([...])
const edges = ref([...])
</script>

<template>
  <VueFlow :nodes="nodes" :edges="edges">
    <Background />
    <Controls />
    <MiniMap />
  </VueFlow>
</template>

<style>
@import '@vue-flow/core/dist/style.css';
@import '@vue-flow/core/dist/theme-default.css';
</style>

​
Running Examples Locally

To run the examples locally: 
# Clone the repository
git clone https://github.com/bcakmakoglu/vue-flow.git
cd vue-flow

# Install dependencies
pnpm install

# Run the Vite examples
pnpm dev
The examples will be available at http://localhost:3000.

​
Additional Resources

Build docs developers (and LLMs) love

Get started for freeTalk to us