docs(examples): add simple layout example (#1678)

* docs(examples): cleanup animated layout example

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* chore(docs,deps): update deps

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* docs(examples): add animated and simple layout examples

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

---------

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

docs/src/.vitepress/config.mts

@@ -202,7 +202,6 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
           collapsed: false,
           items: [
             { text: 'Basic', link: '/examples/' },
-            { text: 'Layouting', link: '/examples/layout' },
             { text: 'Drag & Drop', link: '/examples/dnd' },
             { text: 'Interactions', link: '/examples/interaction' },
             { text: 'Save & Restore', link: '/examples/save' },
@@ -217,6 +216,14 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
             { text: 'Stress Test', link: '/examples/stress' },
           ],
         },
+        {
+          text: 'Layout',
+          collapsed: false,
+          items: [
+            { text: 'Simple Layout', link: '/examples/layout/simple' },
+            { text: 'Animation & Layout', link: '/examples/layout/animated' },
+          ],
+        },
         {
           text: 'Nodes',
           collapsed: false,

docs/src/examples/layout/animated.md

@@ -0,0 +1,10 @@
+# Animation and Layout
+
+In this example we are going to use [dagre](https://github.com/dagrejs/dagre) to layout our nodes and also implement
+some animations
+to demonstrate execution from one node to another in a sequence.
+
+<div class="mt-6">
+  <Repl example="layout"></Repl>
+</div>
+ 

docs/src/examples/layout/simple.md

@@ -1,4 +1,4 @@
-# Layouting
+# Layout
 
 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.
@@ -6,5 +6,5 @@ Vue Flow does *not* have a built-in layouting system, but it's easy to use a thi
 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>
+  <Repl example="layoutSimple"></Repl>
 </div>