---
title: Introduction
---

<script setup>
import PowerPlug from '~icons/mdi/power-plug';
import Flash from '~icons/mdi/flash';
import Lifebuoy from '~icons/mdi/lifebuoy';
import Puzzle from '~icons/mdi/puzzle';
import Speedometer from '~icons/mdi/speedometer';
import Cogs from '~icons/mdi/cogs';
import CubeOutline from '~icons/mdi/cube-outline';
import Image from '~icons/mdi/image';
import MapMarkerPath from '~icons/mdi/map-marker-path';
import Gamepad from '~icons/mdi/gamepad';
import Wrench from '~icons/mdi/wrench';
import ArrowExpand from '~icons/mdi/arrow-expand';
import LockCheck from '~icons/mdi/lock-check';
</script>

# Welcome to Vue Flow!

Vue Flow is a bridge to the world of interactive flowcharts and graphs, empowering you to bring dynamism and
interactivity to flowcharts and graphic representations.
Whether it's crafting personal diagrams, generating dynamic editors, or anything else your imagination conjures up, Vue
Flow is your creative companion.

Vue Flow makes it effortless to customize and extend basic functionalities by allowing the integration of your own
bespoke nodes and edges.
Additional components such as Background, Minimap, and Controls further enrich the interface,
transforming your creations into engaging platforms.

Explore the [examples](/examples/) or checkout the [CodeSandbox template](https://codesandbox.io/p/sandbox/vue-flow-basic-gfgro4) if you're eager to jump right in and get your hands on some code!

## <span class="flex gap-2 items-center"><Flash class="text-yellow-500" /> Key Features</span>

### <span class="flex gap-2 items-center"><Lifebuoy class="text-red-500" /> Seamless Setup</span>

Vue Flow gets you into the action quickly. With built-in features like element dragging, zooming and panning, and
selection, Vue Flow is ready to go right out of the box.

### <span class="flex gap-2 items-center"><Puzzle class="text-green-500" /> Customizable</span>

Vue Flow is yours to shape. From custom nodes and edges to connection lines, you can extend the functionality of Vue
Flow to fit your creative needs.

### <span class="flex gap-2 items-center"><Speedometer class="text-" /> Efficient and Responsive</span>

Changes are tracked reactively by Vue Flow, ensuring that only the necessary elements are re-rendered.

### <span class="flex gap-2 items-center"><Cogs class="text-gray-400" /> Utilities and Composability</span>

Vue Flow is designed for complex uses, with built-in graph helper and state composable functions.

### <span class="flex gap-2 items-center"><CubeOutline class="text-accent" /> Additional Components</span>

Vue Flow comes with supplementary components to enhance the user interface.

- <Image class="text-blue-500" /> [Background](/guide/components/background): Vue Flow offers two built-in patterns, with further configurations like
  height, width, or color for personalizations.
- <MapMarkerPath class="text-pink-500" /> [MiniMap](/guide/components/minimap): This feature provides a birds-eye view of your nodes in a small map,
  located at the bottom-right corner.
- <Gamepad class="text-purple-500" /> [Controls](/guide/components/controls): Vue Flow lets you handle zoom functions from a control panel on the bottom
  left.
- <Wrench class="text-fuchsia-500" /> [NodeToolbar](/guide/components/node-toolbar): Get access to essential tools directly from the Node itself for easy manipulation and control of the Node
- <ArrowExpand class="text-yellow-500" /> [NodeResizer](/guide/components/node-resizer): Seamlessly adjust the size of your Node to fit your needs and preferences.

### <span class="flex gap-2 items-center"><LockCheck class="text-blue-500" /> Reliable</span>

Vue Flow is written fully in TypeScript, ensuring a reliable and secure experience for developers.