diff --git a/doc/components/Header.vue b/doc/components/Header.vue
index 90bda5e..463939b 100644
--- a/doc/components/Header.vue
+++ b/doc/components/Header.vue
@@ -4,8 +4,7 @@
       <div class="container">
         <NuxtLink to="/" class="logo">Vue-diagrams</NuxtLink>
         <NuxtLink to="/guides">Guides</NuxtLink>
-        <a href="stories">StoryBook</a>
-        <a href="playground">REPL playground</a>
+        <a href="/playground">StoryBook</a>
         <span style="flex-grow: 1" />
         <a href="https://github.com/gwenaelp/vue-diagrams" style="display: flex; gap: 14px; align-items: center;">
           <img src="https://img.shields.io/github/forks/gwenaelp/vue-diagrams" alt="forks" />
diff --git a/doc/components/Repl.vue b/doc/components/Repl.vue
index 9a783e5..de6779d 100644
--- a/doc/components/Repl.vue
+++ b/doc/components/Repl.vue
@@ -22,7 +22,7 @@ const store = new ReplStore({
 
 
 const files: Record<string, (typeof imports)[keyof typeof imports]> = {}
-const imports = exampleImports[props.example]
+const imports = exampleImports[props.example].files
 const additionalImports: Object = ('additionalImports' in imports ? imports.additionalImports : {}) as Object;
 
 for (const example of Object.keys(imports).filter((i) => i !== 'additionalImports')) {
@@ -56,9 +56,9 @@ watch(() => props.example, async (newExample) => {
   // You may want to update the REPL environment or take other actions
 
   // For example, update the files and imports based on the new example
-  let newImports = exampleImports[newExample];
+  let newImports = exampleImports[newExample].files;
   const newFiles: Record<string, (typeof imports)[keyof typeof imports]> = {};
-  let newCss = '';
+  let newCss = `@import url('https://unpkg.com/vue-diagrams@latest/dist/style.css')`;
 
   for (const example of Object.keys(newImports).filter((i) => i !== 'additionalImports')) {
     if (example.includes('css')) {
diff --git a/doc/examples/customNodes/App.vue b/doc/examples/customNodes/App.vue
new file mode 100644
index 0000000..2693b3c
--- /dev/null
+++ b/doc/examples/customNodes/App.vue
@@ -0,0 +1,37 @@
+<template>
+  <diagram :model="model" height="700" />
+</template>
+
+<script setup>
+import CustomNode from "./CustomNode.vue";
+import { getCurrentInstance } from 'vue';
+
+getCurrentInstance().appContext.components['vue-diagrams-node-custom'] = CustomNode;
+
+</script>
+<script>
+import { Diagram } from "vue-diagrams";
+
+export default {
+  components: {
+    Diagram,
+  },
+  data() {
+    const diagramModel = new Diagram.Model();
+
+    const node1 = diagramModel.addNode("test2", 300, 200);
+    const inPort = node1.addInPort("test");
+
+    const node2 = diagramModel.addNode("test", 10, 300, 144, 80, { type: 'custom' });
+    const node2OutPort = node2.addOutPort("testOut");
+    node2.addOutPort("testOut2");
+    node2.color = "#00cc66";
+
+    diagramModel.addLink(node2OutPort, inPort);
+
+    return {
+      model: diagramModel
+    };
+  },
+};
+</script>
diff --git a/doc/examples/customNodes/CustomNode.vue b/doc/examples/customNodes/CustomNode.vue
new file mode 100644
index 0000000..13c2b61
--- /dev/null
+++ b/doc/examples/customNodes/CustomNode.vue
@@ -0,0 +1,40 @@
+<template>
+  <g>
+    <rect
+      fill="#CC0000"
+      x="5"
+      y="15"
+      :width="nodeModel.width"
+      :height="nodeModel.height"
+    />
+    <text
+      :x="10" :y="30"
+      :class="nodeModel.options.editableTitle ? 'title-editable': ''"
+      font-size="14"
+      font-weight="bold"
+      fill="#000000"
+      ref="title"
+      @click="nodeModel.options.editableTitle ? $parent.$parent.$parent.editText(nodeModel, 'title', $refs.title) : undefined"
+    >
+      {{nodeModel.title}}
+    </text>
+
+    <g class="prevent-node-drag">
+      <slot />
+    </g>
+  </g>
+</template>
+<script>
+export default {
+  props: {
+    nodeModel: {
+      type: Object,
+      required: true,
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
diff --git a/doc/examples/customNodes/index.ts b/doc/examples/customNodes/index.ts
new file mode 100644
index 0000000..4eb3f6c
--- /dev/null
+++ b/doc/examples/customNodes/index.ts
@@ -0,0 +1,10 @@
+import App from './App.vue?raw'
+import CustomNode from './CustomNode.vue?raw'
+
+export default {
+  section: 'Advanced usage',
+  files: {
+    'App.vue': App,
+    'CustomNode.vue': CustomNode,
+  }
+};
diff --git a/doc/examples/customPortPosition/App.vue b/doc/examples/customPortPosition/App.vue
new file mode 100644
index 0000000..dfa02cb
--- /dev/null
+++ b/doc/examples/customPortPosition/App.vue
@@ -0,0 +1,30 @@
+<template>
+  <diagram :model="model" height="700" />
+</template>
+
+<script>
+import { Diagram } from "vue-diagrams";
+
+export default {
+  components: {
+    Diagram,
+  },
+  data() {
+    const diagramModel = new Diagram.Model();
+
+    const node1 = diagramModel.addNode('test2', 300, 200);
+    const inPort = node1.addInPort('in', { y: 80 });
+    const outPort = node1.addOutPort('out', { y: 80 });
+
+    const node2 = diagramModel.addNode('test', 10, 300, 144, 120);
+    const node2OutPort = node2.addOutPort('testOut', { y: 80 });
+    node2.color = '#00cc66';
+
+    diagramModel.addLink(node2OutPort, inPort);
+
+    return {
+      model: diagramModel
+    };
+  },
+};
+</script>
diff --git a/doc/examples/customPortPosition/index.ts b/doc/examples/customPortPosition/index.ts
new file mode 100644
index 0000000..25f47e8
--- /dev/null
+++ b/doc/examples/customPortPosition/index.ts
@@ -0,0 +1,8 @@
+import App from './App.vue?raw'
+
+export default {
+  section: 'Simple usage',
+  files: {
+    'App.vue': App,
+  }
+};
diff --git a/doc/examples/dropToCreateNodes/App.vue b/doc/examples/dropToCreateNodes/App.vue
new file mode 100644
index 0000000..c08ace3
--- /dev/null
+++ b/doc/examples/dropToCreateNodes/App.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="node" draggable="true">Drop this node</div>
+  <div @drop="onDrop" @dragover.prevent @dragenter.prevent>
+    <diagram :model="model" width="400" height="400" ref="diagram" />
+  </div>
+</template>
+
+<script>
+import { Diagram } from "vue-diagrams";
+
+export default {
+  components: {
+    Diagram,
+  },
+  data() {
+    const diagramModel = new Diagram.Model();
+
+    return {
+      model: diagramModel
+    };
+  },
+  methods: {
+    onDrop(event) {
+      const pan = this.$refs.diagram.spz.getPan();
+      const zoom = this.$refs.diagram.spz.getZoom();
+      const x = pan.x * (1/zoom) * -1;
+      const y = pan.y * (1/zoom) * -1;
+      const n = this.model.addNode('Node', x, y);
+      n.addInPort('In');
+      n.addOutPort('Out')
+    },
+  }
+};
+</script>
+<style scoped>
+  .node {
+    display: block;
+    width: 72px;
+    height: 100px;
+    border: 2px solid black;
+    border-radius: 4px;
+    font-size: 12px;
+    margin-bottom: 20px;
+    cursor: grab;
+  }
+</style>
diff --git a/doc/examples/dropToCreateNodes/index.ts b/doc/examples/dropToCreateNodes/index.ts
new file mode 100644
index 0000000..8a128c6
--- /dev/null
+++ b/doc/examples/dropToCreateNodes/index.ts
@@ -0,0 +1,8 @@
+import App from './App.vue?raw'
+
+export default {
+  section: 'Advanced usage',
+  files: {
+    'App.vue': App,
+  }
+};
diff --git a/doc/examples/editModes/App.vue b/doc/examples/editModes/App.vue
new file mode 100644
index 0000000..31ffebf
--- /dev/null
+++ b/doc/examples/editModes/App.vue
@@ -0,0 +1,70 @@
+<template>
+  <button :class="mode === 'move' ? 'is-active': ''" @click="mode = 'move'">
+    Move
+  </button>
+  <button :class="mode === 'select' ? 'is-active': ''" @click="mode = 'select'">
+    Select
+  </button>
+  <diagram ref="diagram" :model="model" height="400" />
+</template>
+
+<script>
+import { Diagram } from "vue-diagrams";
+
+export default {
+  components: {
+    Diagram,
+  },
+  data() {
+    const diagramModel = new Diagram.Model();
+
+    const node1 = diagramModel.addNode("test2", 300, 200);
+    const inPort = node1.addInPort("test");
+
+    const node2 = diagramModel.addNode("test", 10, 300, 144, 80);
+    const node2OutPort = node2.addOutPort("testOut");
+    node2.addOutPort("testOut2");
+    node2.color = "#00cc66";
+
+    const node3 = diagramModel.addNode("test3", 10, 100, 72, 100);
+    const node3OutPort = node3.addOutPort("testOut3");
+    node3.color = "#cc6600";
+    node3.deletable = false;
+
+    diagramModel.addLink(node2OutPort, inPort);
+    diagramModel.addLink(node3OutPort, inPort);
+
+    return {
+      model: diagramModel,
+      diagram: undefined,
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.diagram = this.$refs.diagram;
+    });
+  },
+  computed: {
+    mode: {
+      get() {
+        return this.diagram ? this.diagram.mode : undefined;
+      },
+      set(v) {
+        if(this.diagram)
+          this.diagram.mode = v;
+      }
+    },
+  },
+};
+
+</script>
+<style scoped>
+  button {
+    color: blue;
+    cursor: pointer;
+    text-decoration: underline;
+  }
+  button.is-active {
+    font-weight: bold;
+  }
+</style>
diff --git a/doc/examples/editModes/index.ts b/doc/examples/editModes/index.ts
new file mode 100644
index 0000000..8a128c6
--- /dev/null
+++ b/doc/examples/editModes/index.ts
@@ -0,0 +1,8 @@
+import App from './App.vue?raw'
+
+export default {
+  section: 'Advanced usage',
+  files: {
+    'App.vue': App,
+  }
+};
diff --git a/doc/examples/editableTitles/images/App.vue b/doc/examples/editableTitles/images/App.vue
new file mode 100644
index 0000000..1c4f3c0
--- /dev/null
+++ b/doc/examples/editableTitles/images/App.vue
@@ -0,0 +1,34 @@
+<template>
+  <diagram :model="model" height="700" />
+</template>
+
+<script>
+import { Diagram } from "vue-diagrams";
+
+export default {
+  components: {
+    Diagram,
+  },
+  data() {
+    const diagramModel = new Diagram.Model();
+
+    const node1 = diagramModel.addNode("Image 1", 300, 200, 120, 120, {
+      type: 'image',
+      image: 'https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'
+    });
+
+    const node2 = diagramModel.addNode("Image 2", 100, 100, 160, 120, {
+      type: 'image',
+      image: 'https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'
+    });
+
+    const inPort = node1.addInPort();
+    const outPort = node2.addOutPort();
+    diagramModel.addLink(outPort, inPort);
+
+    return {
+      model: diagramModel
+    };
+  },
+};
+</script>
diff --git a/doc/examples/editableTitles/images/index.ts b/doc/examples/editableTitles/images/index.ts
new file mode 100644
index 0000000..d0e66a0
--- /dev/null
+++ b/doc/examples/editableTitles/images/index.ts
@@ -0,0 +1 @@
+export { default as App } from './App.vue?raw'
diff --git a/doc/examples/editableTitles/index.ts b/doc/examples/editableTitles/index.ts
index d0e66a0..25f47e8 100644
--- a/doc/examples/editableTitles/index.ts
+++ b/doc/examples/editableTitles/index.ts
@@ -1 +1,8 @@
-export { default as App } from './App.vue?raw'
+import App from './App.vue?raw'
+
+export default {
+  section: 'Simple usage',
+  files: {
+    'App.vue': App,
+  }
+};
diff --git a/doc/examples/gridSnap/App.vue b/doc/examples/gridSnap/App.vue
new file mode 100644
index 0000000..7fd5083
--- /dev/null
+++ b/doc/examples/gridSnap/App.vue
@@ -0,0 +1,36 @@
+<template>
+  <diagram :model="model" gridSnap="16" />
+</template>
+
+<script>
+import { Diagram } from "vue-diagrams";
+
+export default {
+  components: {
+    Diagram,
+  },
+  data() {
+    const diagramModel = new Diagram.Model();
+
+    const node1 = diagramModel.addNode("test2", 300, 200);
+    const inPort = node1.addInPort("test");
+
+    const node2 = diagramModel.addNode("test", 10, 300, 144, 80);
+    const node2OutPort = node2.addOutPort("testOut");
+    node2.addOutPort("testOut2");
+    node2.color = "#00cc66";
+
+    const node3 = diagramModel.addNode("test3", 10, 100, 72, 100);
+    const node3OutPort = node3.addOutPort("testOut3");
+    node3.color = "#cc6600";
+    node3.deletable = false;
+
+    diagramModel.addLink(node2OutPort, inPort);
+    diagramModel.addLink(node3OutPort, inPort);
+
+    return {
+      model: diagramModel
+    };
+  },
+};
+</script>
diff --git a/doc/examples/gridSnap/index.ts b/doc/examples/gridSnap/index.ts
new file mode 100644
index 0000000..25f47e8
--- /dev/null
+++ b/doc/examples/gridSnap/index.ts
@@ -0,0 +1,8 @@
+import App from './App.vue?raw'
+
+export default {
+  section: 'Simple usage',
+  files: {
+    'App.vue': App,
+  }
+};
diff --git a/doc/examples/images/App.vue b/doc/examples/images/App.vue
new file mode 100644
index 0000000..1c4f3c0
--- /dev/null
+++ b/doc/examples/images/App.vue
@@ -0,0 +1,34 @@
+<template>
+  <diagram :model="model" height="700" />
+</template>
+
+<script>
+import { Diagram } from "vue-diagrams";
+
+export default {
+  components: {
+    Diagram,
+  },
+  data() {
+    const diagramModel = new Diagram.Model();
+
+    const node1 = diagramModel.addNode("Image 1", 300, 200, 120, 120, {
+      type: 'image',
+      image: 'https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'
+    });
+
+    const node2 = diagramModel.addNode("Image 2", 100, 100, 160, 120, {
+      type: 'image',
+      image: 'https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'
+    });
+
+    const inPort = node1.addInPort();
+    const outPort = node2.addOutPort();
+    diagramModel.addLink(outPort, inPort);
+
+    return {
+      model: diagramModel
+    };
+  },
+};
+</script>
diff --git a/doc/examples/images/index.ts b/doc/examples/images/index.ts
new file mode 100644
index 0000000..a479c6d
--- /dev/null
+++ b/doc/examples/images/index.ts
@@ -0,0 +1,8 @@
+import App from './App.vue?raw'
+
+export default {
+  section: 'Simple usage',
+  files: {
+    'App.vue': App,
+  }
+}
diff --git a/doc/examples/index.ts b/doc/examples/index.ts
index 96f4913..61b583e 100644
--- a/doc/examples/index.ts
+++ b/doc/examples/index.ts
@@ -1,23 +1,39 @@
-import { PlaygroundApp } from './playground';
-import { ShaderApp } from './shader';
-import { InfrastructureSchemaApp } from './infrastructureSchema';
-import { App as EditableTitlesApp } from './editableTitles';
-import { App as MenuApp } from './menu';
+import playground from './playground';
+import shader from './shader';
+import infrastructureSchema from './infrastructureSchema';
+import editableTitles from './editableTitles';
+import menu from './menu';
+import images from './images';
+import customPortPosition from './customPortPosition';
+import resizeNodes from './resize';
+import layouts from './layouts';
+import thumbnail from './thumbnail';
+import gridSnap from './gridSnap';
+import customNodes from './customNodes';
 
-export const exampleImports = {
-  playground: {
-    'App.vue': PlaygroundApp,
-  },
-  shader: {
-    'App.vue': ShaderApp,
-  },
-  infrastructureSchema: {
-    'App.vue': InfrastructureSchemaApp,
-  },
-  editableTitles: {
-    'App.vue': EditableTitlesApp,
-  },
-  Menu: {
-    'App.vue': MenuApp,
-  },
+import dropToCreateNodes from './dropToCreateNodes';
+import editModes from './editModes';
+import serializationDeserialization from './serializationDeserialization';
+
+type ExampleImports = {
+  [key: string]: any;
+}
+
+
+export const exampleImports: Record<string, any> = {
+  playground,
+  shader,
+  infrastructureSchema,
+  editableTitles,
+  menu,
+  images,
+  customPortPosition,
+  resizeNodes,
+  layouts,
+  thumbnail,
+  gridSnap,
+  customNodes,
+  dropToCreateNodes,
+  editModes,
+  serializationDeserialization,
 };
diff --git a/doc/examples/infrastructureSchema/index.ts b/doc/examples/infrastructureSchema/index.ts
index a9658e6..982a53e 100644
--- a/doc/examples/infrastructureSchema/index.ts
+++ b/doc/examples/infrastructureSchema/index.ts
@@ -1 +1,8 @@
-export { default as InfrastructureSchemaApp } from './App.vue?raw'
+import InfrastructureSchemaApp from './App.vue?raw'
+
+export default {
+  section: 'Demo',
+  files: {
+    'App.vue': InfrastructureSchemaApp,
+  }
+};
diff --git a/doc/examples/layouts/App.vue b/doc/examples/layouts/App.vue
new file mode 100644
index 0000000..7e419d4
--- /dev/null
+++ b/doc/examples/layouts/App.vue
@@ -0,0 +1,244 @@
+<template>
+  <button @click="doLayout">
+    Tree layout (naive)
+  </button>
+  <button @click="doLayout2">
+    Tree layout (other intent)
+  </button>
+  <div class="node" draggable="true">Drop this node</div>
+  <div @drop="onDrop" @dragover.prevent @dragenter.prevent>
+    <diagram v-if="displayed" :model="model" height="700" ref="diagram" />
+  </div>
+</template>
+<script>
+import { Diagram } from "vue-diagrams";
+
+export default {
+  components: {
+    Diagram,
+  },
+  data() {
+    const diagramModel = new Diagram.Model();
+    const node1 = diagramModel.addNode("test2", 300, 200);
+    const node1IP = node1.addInPort("in");
+
+    const node2 = diagramModel.addNode("test", 10, 300, 144, 80);
+    const node2OP = node2.addOutPort("out");
+    const node2IP = node2.addInPort("in");
+
+    const node3 = diagramModel.addNode("test3", 100, 100, 72, 100);
+    const node3OP = node3.addOutPort("out");
+    const node3IP = node3.addInPort("in");
+
+    const node4 = diagramModel.addNode("test4", 100, 350, 72, 100);
+    const node4OP = node4.addOutPort("out");
+    const node4IP = node4.addInPort("in");
+
+    const node5 = diagramModel.addNode("test5", 200, 350, 72, 100);
+    const node5OP = node5.addOutPort("out");
+    const node5IP = node5.addInPort("in");
+
+    const node6 = diagramModel.addNode("test6", 200, 350, 72, 100);
+    const node6OP = node6.addOutPort("out");
+    const node6IP = node6.addInPort("in");
+
+    const node7 = diagramModel.addNode("test7", 200, 350, 72, 100);
+    const node7OP = node7.addOutPort("out");
+    const node7IP = node7.addInPort("in");
+
+    const node8 = diagramModel.addNode("test8", 200, 350, 72, 100);
+    const node8OP = node8.addOutPort("out");
+    const node8IP = node8.addInPort("in");
+
+
+    diagramModel.addLink(node2OP, node3IP);
+    diagramModel.addLink(node2OP, node4IP);
+    diagramModel.addLink(node3OP, node1IP);
+    diagramModel.addLink(node2OP, node5IP);
+    diagramModel.addLink(node5OP, node6IP);
+
+    diagramModel.addLink(node3OP, node7IP);
+    diagramModel.addLink(node3OP, node8IP);
+
+    return {
+      displayed: true,
+      model: diagramModel
+    };
+  },
+  methods: {
+    onDrop(event) {
+      const pan = this.$refs.diagram.$refs.svgpanzoom.spz.getPan();
+      const zoom = this.$refs.diagram.$refs.svgpanzoom.spz.getZoom();
+      const x = pan.x * (1/zoom) * -1;
+      const y = pan.y * (1/zoom) * -1;
+      const n = this.model.addNode('Node', x, y);
+      n.addInPort('In');
+      n.addOutPort('Out')
+    },
+    doLayout() {
+    function treeLayout(model) {
+      const nodes = model.nodes;
+      const links = model.links;
+
+      // Find the root node
+      let rootNode = null;
+      for (let i = 0; i < nodes.length; i++) {
+        const node = nodes[i];
+        let isRootNode = true;
+
+        for (let j = 0; j < links.length; j++) {
+          const link = links[j];
+
+          if (link.to === node.ports[0].id) {
+            isRootNode = false;
+            break;
+          }
+        }
+
+        if (isRootNode) {
+          rootNode = node;
+          break;
+        }
+      }
+
+      // Set the position of the root node
+      rootNode.x = 0;
+      rootNode.y = 0;
+
+      // Recursively set the position of child nodes
+      const setChildNodePosition = (parentNode, y) => {
+        let lastChildYByNode = {};
+        for (let i = 0; i < links.length; i++) {
+          const link = links[i];
+          const isLinkFromParent = parentNode.ports.filter(p => p.id === link.from).length;
+          if (isLinkFromParent) {
+            const childNode = nodes.find((node) => {
+              return node.ports.some((port) => port.id === link.to);
+            });
+            if (childNode) {
+              const fromPort = parentNode.ports.find((port) => port.id === link.from);
+              const toPort = childNode.ports.find((port) => port.id === link.to);
+              const portY =
+                parentNode.y +
+                parentNode.height / 2 +
+                childNode.height / 2;
+              if (!lastChildYByNode[parentNode.id]) {
+                lastChildYByNode[parentNode.id] = parentNode.y;
+              }
+              childNode.x = parentNode.x + parentNode.width + 40;
+              childNode.y = lastChildYByNode[parentNode.id];
+              lastChildYByNode[parentNode.id] += childNode.height + 20;
+              setChildNodePosition(childNode, childNode.y);
+            }
+          }
+        }
+      };
+
+      setChildNodePosition(rootNode, 0);
+    }
+
+    this.displayed = false;
+    this.$nextTick(() => {
+      treeLayout(this.model._model);
+      this.$nextTick(() => {
+        this.displayed = true;
+      })
+    })
+    },
+    doLayout2() {
+      let nodeSpacing = 40,
+          horizontalSpacing = 20;
+      function treeLayout(nodes) {
+        // Create a mapping of nodes to their children
+
+        // Create a mapping of node IDs to their depths in the tree
+        const depthMap = { byId: {}, byDepth: [], maxWidth: [] };
+        const calculateDepth = (nodeMapItem, depth) => {
+          depthMap.byId[nodeMapItem.node.id] = depth;
+          if(depthMap.byDepth[depth] === undefined) {
+            depthMap.byDepth[depth] = [];
+          }
+          depthMap.byDepth[depth].push(nodeMapItem);
+          if(!depthMap.maxWidth[depth] || depthMap.maxWidth[depth] < nodeMapItem.node.width) {
+            depthMap.maxWidth[depth] = nodeMapItem.node.width;
+          }
+          if(nodeMapItem.children) {
+            nodeMapItem.children.forEach(childId => {
+              calculateDepth(nodesMap[childId], depth + 1);
+            });
+          }
+        };
+
+        const rootNode = Object.values(nodesMap).find(nodeMapItem => !nodeMapItem.parent);
+        calculateDepth(rootNode, 0);
+
+        const maxDepth = depthMap.byDepth.length - 1;
+        const parentGroups = {};
+        for (let d = maxDepth; d >= 0; d--) {
+          const nodesByDepth = depthMap.byDepth[d];
+          parentGroups[d] = {};
+          for (let n of nodesByDepth) {
+            if(parentGroups[d][n.parent] === undefined) {
+              parentGroups[d][n.parent] = { nodes: [] };
+            }
+            parentGroups[d][n.parent].nodes.push(n);
+          }
+        }
+        let currentY = 0;
+        let currentX = depthMap.maxWidth.reduce((partialSum, a) => partialSum + a, 0) + 100;
+
+        for (let d = maxDepth; d >= 0; d--) {
+          const nodesByDepth = depthMap.byDepth[d];
+          currentX -= depthMap.maxWidth[d] + horizontalSpacing;
+          for (let n of nodesByDepth) {
+            if(parentGroups[d+1] && parentGroups[d+1][n.node.id]) {
+              let avg = 0;
+              for(let n2 of parentGroups[d+1][n.node.id].nodes){
+                avg += n2.node.y;
+              }
+              avg = avg / parentGroups[d+1][n.node.id].nodes.length;
+              n.node.y = avg;
+            } else {
+              n.node.y = currentY;
+              currentY += n.node.height + nodeSpacing;
+            }
+            n.node.x = currentX;
+          }
+        }
+      }
+      const portsNodesMap = {};
+      const nodesMap = {};
+      for(let n of this.model._model.nodes) {
+        nodesMap[n.id] = { node: n };
+        for(let p of n.ports) {
+          portsNodesMap[p.id] = n.id;
+        }
+      }
+      for(let l of this.model._model.links) {
+        const to = nodesMap[portsNodesMap[l.to]];
+        const from = nodesMap[portsNodesMap[l.from]];
+        if(from.children === undefined) {
+          from.children = [];
+        }
+        to.parent = from.node.id;
+        from.children.push(to.node.id);
+      }
+      treeLayout(this.model._model.nodes)
+      this.$refs.diagram.updateLinksPositions();
+    },
+  },
+};
+
+</script>
+<style scoped>
+  .node {
+    display: block;
+    width: 72px;
+    height: 100px;
+    border: 2px solid black;
+    border-radius: 4px;
+    font-size: 12px;
+    margin-bottom: 20px;
+    cursor: grab;
+  }
+</style>
diff --git a/doc/examples/layouts/index.ts b/doc/examples/layouts/index.ts
new file mode 100644
index 0000000..8a128c6
--- /dev/null
+++ b/doc/examples/layouts/index.ts
@@ -0,0 +1,8 @@
+import App from './App.vue?raw'
+
+export default {
+  section: 'Advanced usage',
+  files: {
+    'App.vue': App,
+  }
+};
diff --git a/doc/examples/menu/App.vue b/doc/examples/menu/App.vue
index f7519d1..9535a84 100644
--- a/doc/examples/menu/App.vue
+++ b/doc/examples/menu/App.vue
@@ -7,6 +7,7 @@
 
 <script>
 import { Diagram } from "vue-diagrams";
+import "vue-diagrams";
 
 export default {
   components: {
diff --git a/doc/examples/menu/index.ts b/doc/examples/menu/index.ts
index f7b6d88..b5d0eb1 100644
--- a/doc/examples/menu/index.ts
+++ b/doc/examples/menu/index.ts
@@ -1 +1,8 @@
-export { default as App } from './App.vue?raw';
+import App from './App.vue?raw';
+
+export default {
+  section: 'Simple usage',
+  files: {
+    'App.vue': App,
+  }
+};
diff --git a/doc/examples/playground/App.vue b/doc/examples/playground/App.vue
index 6c16446..c0c7928 100644
--- a/doc/examples/playground/App.vue
+++ b/doc/examples/playground/App.vue
@@ -1,36 +1,27 @@
 <template>
-  <diagram :model="model" height="700" />
+  <Diagram :model="model" height="500" />
 </template>
 
-<script>
-import { Diagram } from "vue-diagrams";
+<script setup>
+import { ref, onMounted } from 'vue';
+import { Diagram } from 'vue-diagrams';
 
-export default {
-  components: {
-    Diagram,
-  },
-  data() {
-    const diagramModel = new Diagram.Model();
+const model = ref(new Diagram.Model());
 
-    const node1 = diagramModel.addNode("test2", 300, 200);
-    const inPort = node1.addInPort("test");
+const node1 = model.value.addNode('test2', 300, 200);
+const inPort = node1.addInPort('test');
 
-    const node2 = diagramModel.addNode("test", 10, 300, 144, 80);
-    const node2OutPort = node2.addOutPort("testOut");
-    node2.addOutPort("testOut2");
-    node2.color = "#00cc66";
+const node2 = model.value.addNode('test', 10, 300, 144, 80);
+const node2OutPort = node2.addOutPort('testOut');
+node2.addOutPort('testOut2');
+node2.color = '#00cc66';
 
-    const node3 = diagramModel.addNode("test3", 10, 100, 72, 100);
-    const node3OutPort = node3.addOutPort("testOut3");
-    node3.color = "#cc6600";
-    node3.deletable = false;
+const node3 = model.value.addNode('test3', 10, 100, 72, 100);
+const node3OutPort = node3.addOutPort('testOut3');
+node3.color = '#cc6600';
+node3.deletable = false;
 
-    diagramModel.addLink(node2OutPort, inPort);
-    diagramModel.addLink(node3OutPort, inPort);
+model.value.addLink(node2OutPort, inPort);
+model.value.addLink(node3OutPort, inPort);
 
-    return {
-      model: diagramModel
-    };
-  },
-};
 </script>
diff --git a/doc/examples/playground/index.ts b/doc/examples/playground/index.ts
index 3cee550..d095683 100644
--- a/doc/examples/playground/index.ts
+++ b/doc/examples/playground/index.ts
@@ -1 +1,8 @@
-export { default as PlaygroundApp } from './App.vue?raw'
+import PlaygroundApp from './App.vue?raw'
+
+export default {
+  section: 'Demo',
+  files: {
+    'App.vue': PlaygroundApp,
+  },
+};
diff --git a/doc/examples/resize/App.vue b/doc/examples/resize/App.vue
new file mode 100644
index 0000000..9098b53
--- /dev/null
+++ b/doc/examples/resize/App.vue
@@ -0,0 +1,39 @@
+<template>
+  <diagram :model="model" height="700" />
+</template>
+
+<script>
+import { Diagram } from "vue-diagrams";
+
+export default {
+  components: {
+    Diagram,
+  },
+  data() {
+    const diagramModel = new Diagram.Model();
+
+    const node1 = diagramModel.addNode("fixed", 300, 200);
+    const inPort = node1.addInPort("test");
+
+    const resizableNode = diagramModel.addNode("resizable", 10, 300, 144, 80, {
+      resizable: true,
+    });
+    const node2OutPort = resizableNode.addOutPort("testOut");
+    resizableNode.addOutPort("testOut2");
+    resizableNode.color = "#00cc66";
+
+    diagramModel.addLink(node2OutPort, inPort);
+
+    return {
+      visible: true,
+      model: diagramModel,
+      resizableNode,
+    };
+  },
+  methods: {
+    toggleResizable() {
+      this.resizableNode.options.resizable = !this.resizableNode.options.resizable;
+    },
+  },
+};
+</script>
diff --git a/doc/examples/resize/index.ts b/doc/examples/resize/index.ts
new file mode 100644
index 0000000..6fb9c83
--- /dev/null
+++ b/doc/examples/resize/index.ts
@@ -0,0 +1,7 @@
+import App from './App.vue?raw'
+export default {
+  section: 'Simple usage',
+  files: {
+    'App.vue': App,
+  }
+};
diff --git a/doc/examples/serializationDeserialization/App.vue b/doc/examples/serializationDeserialization/App.vue
new file mode 100644
index 0000000..7deff63
--- /dev/null
+++ b/doc/examples/serializationDeserialization/App.vue
@@ -0,0 +1,38 @@
+<template>
+  <diagram :model="model" height="700"/>
+  <button @click="console.log(model.serialize())">serialize</button>
+  <button @click="model.deserialize(serializedModel)">deserialize</button>
+</template>
+<script>
+import { Diagram } from "vue-diagrams";
+
+export default {
+  components: {
+    Diagram,
+  },
+  data() {
+    const diagramModel = new Diagram.Model();
+
+    const node1 = diagramModel.addNode("test2", 300, 200);
+    const inPort = node1.addInPort("test");
+
+    const node2 = diagramModel.addNode("test", 10, 300, 144, 80);
+    const node2OutPort = node2.addOutPort("testOut");
+    node2.addOutPort("testOut2");
+    node2.color = "#00cc66";
+
+    const node3 = diagramModel.addNode("test3", 10, 100, 72, 100);
+    const node3OutPort = node3.addOutPort("testOut3");
+    node3.color = "#cc6600";
+
+    diagramModel.addLink(node2OutPort, inPort);
+    diagramModel.addLink(node3OutPort, inPort);
+
+    return {
+      console,
+      serializedModel: diagramModel.serialize(),
+      model: diagramModel
+    };
+  },
+};
+</script>
diff --git a/doc/examples/serializationDeserialization/index.ts b/doc/examples/serializationDeserialization/index.ts
new file mode 100644
index 0000000..8a128c6
--- /dev/null
+++ b/doc/examples/serializationDeserialization/index.ts
@@ -0,0 +1,8 @@
+import App from './App.vue?raw'
+
+export default {
+  section: 'Advanced usage',
+  files: {
+    'App.vue': App,
+  }
+};
diff --git a/doc/examples/shader/index.ts b/doc/examples/shader/index.ts
index 24ef1a5..0e3f00a 100644
--- a/doc/examples/shader/index.ts
+++ b/doc/examples/shader/index.ts
@@ -1 +1,8 @@
-export { default as ShaderApp } from './App.vue?raw'
+import ShaderApp from './App.vue?raw'
+
+export default {
+  section: 'Demo',
+  files: {
+    'App.vue': ShaderApp,
+  }
+};
diff --git a/doc/examples/thumbnail/App.vue b/doc/examples/thumbnail/App.vue
new file mode 100644
index 0000000..2d4ca5b
--- /dev/null
+++ b/doc/examples/thumbnail/App.vue
@@ -0,0 +1,52 @@
+<template>
+  <diagram class="diagram" :model="model" width="700" height="500" show-thumbnail />
+</template>
+<script>
+import { Diagram } from "vue-diagrams";
+
+export default {
+  components: {
+    Diagram,
+  },
+  data() {
+    const diagramModel = new Diagram.Model();
+
+    const node1 = diagramModel.addNode('test2', 800, 200);
+    const inPort = node1.addInPort('test');
+
+    const node2 = diagramModel.addNode('test', 160, 600, 144, 80);
+    const node2OutPort = node2.addOutPort('testOut');
+    node2.addOutPort('testOut2');
+    node2.color = '#00cc66';
+
+    const node3 = diagramModel.addNode('test3', -100, -50, 72, 100);
+    const node3OutPort = node3.addOutPort('testOut3');
+    node3.color = '#cc6600';
+    node3.deletable = false;
+
+    const test4 = diagramModel.addNode('test4', 50, 50);
+    test4.color = 'red';
+    const test5 = diagramModel.addNode('test5', 350, 150);
+    test5.color = 'green';
+    const test6 = diagramModel.addNode('test6', -150, 650);
+    test6.color = 'pink';
+
+    diagramModel.addLink(node2OutPort, inPort);
+    diagramModel.addLink(node3OutPort, inPort);
+
+    return {
+      model: diagramModel
+    };
+  },
+};
+
+</script>
+<style scoped>
+.diagram >>> .thumbnail {
+  background: white;
+}
+.diagram >>> .thumbViewClass, .diagram >>> .thumbnail {
+  width: 150px;
+  height: 100px;
+}
+</style>
diff --git a/doc/examples/thumbnail/index.ts b/doc/examples/thumbnail/index.ts
new file mode 100644
index 0000000..8eb2cc9
--- /dev/null
+++ b/doc/examples/thumbnail/index.ts
@@ -0,0 +1,8 @@
+import App from './App.vue?raw'
+
+export default {
+  section: 'Advanced usage',
+  files: {
+    'App.vue': App,
+  },
+};
diff --git a/doc/pages/index.vue b/doc/pages/index.vue
index 14ede11..4fb356e 100644
--- a/doc/pages/index.vue
+++ b/doc/pages/index.vue
@@ -6,7 +6,7 @@
           <h1 class="title"> An easy to use diagram editor component</h1>
           <p>Diagram component for vue.js, inspired by react-diagrams</p>
           <p class="vue-versions">For Vue <a href="https://github.com/gwenaelp/vue-diagrams/tree/vue2">2</a> & <a href="https://github.com/gwenaelp/vue-diagrams">3</a>!</p>
-          <DiagramDemo />
+          <Repl class="repl" example="playground" />
         </div>
       </div>
     </section>
@@ -52,6 +52,7 @@
 <script setup>
 import example2 from '../../images/example2.png';
 import example3 from '../../images/example3.png';
+import Repl from '../components/Repl.vue';
 </script>
 <style scoped>
 
diff --git a/doc/pages/playground.vue b/doc/pages/playground.vue
index ab51ad4..e8cca30 100644
--- a/doc/pages/playground.vue
+++ b/doc/pages/playground.vue
@@ -1,25 +1,37 @@
 <template>
   <div class="playground">
     <div class="menu">
-      <ul>
-        <li v-for="(e, name) in exampleImports">
-          <a :class="displayedExample === name ? 'selected': ''" @click="displayedExample = name">
-            {{ name }}
-          </a>
-        </li>
-      </ul>
+      <section v-for="(section, name) in sections">
+        <h3>{{ name }}</h3>
+        <ul>
+          <li v-for="example in section">
+            <a :class="displayedExample === example ? 'selected': ''" @click="displayedExample = example">
+              {{ example }}
+            </a>
+          </li>
+        </ul>
+      </section>
     </div>
     <Repl class="repl" :example="displayedExample" />
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, Ref } from 'vue';
 
 import Repl from '../components/Repl.vue';
 
 import { exampleImports } from '../examples/index';
 
 let displayedExample = ref('playground');
+let sections: Ref<Record<string, any>> = ref({});
+
+for (let e of Object.keys(exampleImports)) {
+  const sectionName:string = exampleImports[e].section;
+  if (sections.value[sectionName] === undefined) {
+    sections.value[sectionName] = [];
+  }
+  sections.value[sectionName].push(e);
+}
 </script>
 <style scoped>
 .playground {
@@ -29,13 +41,19 @@ let displayedExample = ref('playground');
   width: 100%;
 }
 .menu {
-  width: 200px;
+  width: 260px;
 }
 
 .repl {
   flex-grow: 1;
 }
-
+h3 {
+  padding: 10px;
+  padding-left: 10px;
+  font-size: 18px;
+  background-color: #ddd;
+  margin: 0;
+}
 ul {
   margin: 0;
   padding: 0;