---
title: Basic Example
tags: ['examples', 'basic', 'get-started', 'quickstart']
---

# Basic Example

This is a basic example to help you quickly get started building your own graphs. On the bottom left you see the
Controls and on the bottom right the MiniMap component. You can see different node types (input, default, output), edge
types (bezier, step and smoothstep), edge labels and custom styles.

<div class="mt-6">
  <iframe src="https://codesandbox.io/embed/vue-flow-basic-example-3hq147?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FBasic.vue&moduleview=1&theme=dark"
     class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
     title="Vue Flow: Basic Example"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>
  <iframe src="https://codesandbox.io/embed/vue-flow-basic-example-3hq147?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FBasic.vue&moduleview=1&theme=light"
     class="block dark:hidden h-full w-full min-h-[75vh]"
     title="Vue Flow: Basic Example"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>
</div>
