docs: add dagre layout example

docs/src/.vitepress/config.mts

@@ -205,6 +205,7 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
             { text: 'Save & Restore', link: '/examples/save' },
             { text: 'Drag & Drop', link: '/examples/dnd' },
             { text: 'Hide/Show', link: '/examples/hidden' },
+            { text: 'Layouting', link: '/examples/layout' },
             { text: 'Interactions', link: '/examples/interaction' },
             { text: 'Intersection', link: '/examples/intersection' },
             { text: 'Teleport', link: '/examples/teleport' },

docs/src/examples/layout.md

@@ -0,0 +1,10 @@
+# Layouting
+
+A lot of the time, you'll want to layout your nodes automatically instead of assigning their positions manually.
+Vue Flow does *not* have a built-in layouting system, but it's easy to use a third-party library to achieve this.
+
+In this example we are going to use [dagre](https://github.com/dagrejs/dagre) to layout our nodes.
+
+<div class="mt-6">
+  <Repl example="layout"></Repl>
+</div>