From adb4b7c2b88ca252efad7caf9520d6a9afcda675 Mon Sep 17 00:00:00 2001
From: Ni55aN <stoliarov.v.s@gmail.com>
Date: Tue, 17 Oct 2023 23:40:55 +0300
Subject: [PATCH 1/7] feat: support drawio diagrams

---
 .gitignore                     |  6 ++++++
 assets/diagrams/.gitignore     |  1 +
 components/content/Diagram.vue | 10 ++++++++++
 package.json                   |  3 ++-
 public/diagrams/.keep          |  0
 scripts/update-diagrams.bash   |  8 ++++++++
 6 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 assets/diagrams/.gitignore
 create mode 100644 components/content/Diagram.vue
 create mode 100644 public/diagrams/.keep
 create mode 100644 scripts/update-diagrams.bash

diff --git a/.gitignore b/.gitignore
index 1b02c437..e40dfe4c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,3 +31,9 @@ node_modules
 .output
 .env
 dist
+
+_export
+*.dtmp
+*.bkp
+public/diagrams/*.svg
+public/diagrams/**/*.svg
diff --git a/assets/diagrams/.gitignore b/assets/diagrams/.gitignore
new file mode 100644
index 00000000..5ae88e31
--- /dev/null
+++ b/assets/diagrams/.gitignore
@@ -0,0 +1 @@
+_export
diff --git a/components/content/Diagram.vue b/components/content/Diagram.vue
new file mode 100644
index 00000000..89ec2cb7
--- /dev/null
+++ b/components/content/Diagram.vue
@@ -0,0 +1,10 @@
+<template lang="pug">
+img(:src="'/diagrams/'+name+'.svg'")
+
+</template>
+
+<script>
+export default {
+  props: ['name']
+}
+</script>
diff --git a/package.json b/package.json
index f344b997..2e93503f 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
     "dev": "nuxt dev",
     "analyze": "npx nuxi analyze",
     "generate": "nuxt generate",
-    "preview": "nuxt preview"
+    "preview": "nuxt preview",
+    "update-diagrams": "bash ./scripts/update-diagrams.bash"
   },
   "dependencies": {
     "@docsearch/css": "^3.5.2",
diff --git a/public/diagrams/.keep b/public/diagrams/.keep
new file mode 100644
index 00000000..e69de29b
diff --git a/scripts/update-diagrams.bash b/scripts/update-diagrams.bash
new file mode 100644
index 00000000..0fce2ed3
--- /dev/null
+++ b/scripts/update-diagrams.bash
@@ -0,0 +1,8 @@
+source_dir="./assets/diagrams/"
+dest_dir="./public/diagrams/"
+
+docker run -it -v $(pwd):/data rlespinasse/drawio-export -f svg --remove-page-suffix -o _export
+
+rm -rf $dest_dir/{**/,}*.svg
+rsync -av --include='*/' --include='_export/*' --exclude='*' "$source_dir/" "$dest_dir/"
+find $dest_dir -type f -name '*.svg' -exec sh -c 'newpath=$(echo {} | sed "s/_export\///"); mv {} $newpath' \;

From b7ea8641d67d79aaa118cbd41a7366fd27efc39c Mon Sep 17 00:00:00 2001
From: Ni55aN <stoliarov.v.s@gmail.com>
Date: Wed, 18 Oct 2023 00:38:34 +0300
Subject: [PATCH 2/7] feat: diagram caption

---
 components/content/Diagram.vue | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/components/content/Diagram.vue b/components/content/Diagram.vue
index 89ec2cb7..c03d1640 100644
--- a/components/content/Diagram.vue
+++ b/components/content/Diagram.vue
@@ -1,10 +1,22 @@
 <template lang="pug">
-img(:src="'/diagrams/'+name+'.svg'")
-
+figure.diagram
+  img(:src="'/diagrams/'+name+'.svg'")
+  figcaption.caption {{ caption }}
 </template>
 
 <script>
 export default {
-  props: ['name']
+  props: ['name', 'caption']
 }
 </script>
+
+<style lang="sass" scoped>
+.diagram
+  display: grid
+  justify-content: start
+  .caption
+    text-align: center
+    font-size: 0.8em
+    font-style: italic
+</style>
+

From c14bdb9c384398413b56f7a1e33b415d2aacb2f2 Mon Sep 17 00:00:00 2001
From: Ni55aN <stoliarov.v.s@gmail.com>
Date: Wed, 18 Oct 2023 19:06:57 +0300
Subject: [PATCH 3/7] fix: diagrams generation

---
 public/diagrams/.keep        | 0
 scripts/update-diagrams.bash | 4 +++-
 2 files changed, 3 insertions(+), 1 deletion(-)
 delete mode 100644 public/diagrams/.keep

diff --git a/public/diagrams/.keep b/public/diagrams/.keep
deleted file mode 100644
index e69de29b..00000000
diff --git a/scripts/update-diagrams.bash b/scripts/update-diagrams.bash
index 0fce2ed3..093e1eef 100644
--- a/scripts/update-diagrams.bash
+++ b/scripts/update-diagrams.bash
@@ -1,8 +1,10 @@
+set -e
+
 source_dir="./assets/diagrams/"
 dest_dir="./public/diagrams/"
 
 docker run -it -v $(pwd):/data rlespinasse/drawio-export -f svg --remove-page-suffix -o _export
 
-rm -rf $dest_dir/{**/,}*.svg
+rm -rf $dest_dir
 rsync -av --include='*/' --include='_export/*' --exclude='*' "$source_dir/" "$dest_dir/"
 find $dest_dir -type f -name '*.svg' -exec sh -c 'newpath=$(echo {} | sed "s/_export\///"); mv {} $newpath' \;

From c8be5f0a0d59c0e6fc3875bdd36454b5492a2ed8 Mon Sep 17 00:00:00 2001
From: Ni55aN <stoliarov.v.s@gmail.com>
Date: Wed, 18 Oct 2023 19:07:18 +0300
Subject: [PATCH 4/7] feat: scrollable diagram on phone

---
 components/content/Diagram.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/components/content/Diagram.vue b/components/content/Diagram.vue
index c03d1640..7576df67 100644
--- a/components/content/Diagram.vue
+++ b/components/content/Diagram.vue
@@ -1,6 +1,7 @@
 <template lang="pug">
 figure.diagram
-  img(:src="'/diagrams/'+name+'.svg'")
+  .scrollable
+    img(:src="'/diagrams/'+name+'.svg'")
   figcaption.caption {{ caption }}
 </template>
 
@@ -11,9 +12,17 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+@import '@/assets/styles/media.sass'
+
 .diagram
   display: grid
   justify-content: start
+  .scrollable
+    max-width: 100%
+    overflow-x: auto
+    +phone
+      img
+        max-width: unset
   .caption
     text-align: center
     font-size: 0.8em

From 1430193ed565469f5c51bcada1a3fe68213b0db0 Mon Sep 17 00:00:00 2001
From: Ni55aN <stoliarov.v.s@gmail.com>
Date: Wed, 25 Oct 2023 19:54:20 +0300
Subject: [PATCH 5/7] fix(docs): comments in the code

---
 content/en/docs/3.concepts/1.plugin-system.md | 2 +-
 content/uk/docs/3.concepts/1.plugin-system.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/en/docs/3.concepts/1.plugin-system.md b/content/en/docs/3.concepts/1.plugin-system.md
index 831b69cd..6468d463 100644
--- a/content/en/docs/3.concepts/1.plugin-system.md
+++ b/content/en/docs/3.concepts/1.plugin-system.md
@@ -48,7 +48,7 @@ parentScope.addPipe((context) => {
   return context * 2;
 });
 childScope.addPipe((context) => {
-  if (context === 'b') return // prevent propagation of numbers
+  if (context === 'b') return // prevent propagation of 'b'
   return context;
 });
 
diff --git a/content/uk/docs/3.concepts/1.plugin-system.md b/content/uk/docs/3.concepts/1.plugin-system.md
index 8336cb33..ee0ee895 100644
--- a/content/uk/docs/3.concepts/1.plugin-system.md
+++ b/content/uk/docs/3.concepts/1.plugin-system.md
@@ -48,7 +48,7 @@ parentScope.addPipe((context) => {
   return context * 2;
 });
 childScope.addPipe((context) => {
-  if (context === 'b') return // запобігання поширення чисел
+  if (context === 'b') return // запобігання поширення 'b'
   return context;
 });
 

From 5bf10794de721cfb0d4a642b7a1183137e7c4abd Mon Sep 17 00:00:00 2001
From: Ni55aN <stoliarov.v.s@gmail.com>
Date: Wed, 25 Oct 2023 20:08:59 +0300
Subject: [PATCH 6/7] feat(docs): add references

---
 content/en/docs/14.best-practices/performance.md | 2 ++
 content/en/docs/20.development/2.rete-cli.md     | 1 +
 content/en/docs/3.concepts/1.plugin-system.md    | 4 ++++
 content/uk/docs/14.best-practices/performance.md | 2 ++
 content/uk/docs/20.development/2.rete-cli.md     | 1 +
 content/uk/docs/3.concepts/1.plugin-system.md    | 4 ++++
 6 files changed, 14 insertions(+)

diff --git a/content/en/docs/14.best-practices/performance.md b/content/en/docs/14.best-practices/performance.md
index 693a0222..deef5685 100644
--- a/content/en/docs/14.best-practices/performance.md
+++ b/content/en/docs/14.best-practices/performance.md
@@ -6,7 +6,9 @@ keywords: performance,optimization
 # Performance
 
 ::references
+:ref-example{title="Performance" link="/examples/performance"}
 :ref-example{title="LOD" link="/examples/lod"}
+:ref-example{title="LOD GPU" link="/examples/lod-gpu"}
 ::
 
 In client applications, you may frequently encounter two issues: resource-intensive operations and low FPS. The former is caused by synchronous operations such as executing resource-intensive JS code or some browser APIs that block the main thread. The latter is often attributed to the direct rendering of elements by the browser - the more complex and numerous they are, the more time it takes for the browser to create the layout and render them.
diff --git a/content/en/docs/20.development/2.rete-cli.md b/content/en/docs/20.development/2.rete-cli.md
index ccff6aac..5300be71 100644
--- a/content/en/docs/20.development/2.rete-cli.md
+++ b/content/en/docs/20.development/2.rete-cli.md
@@ -10,6 +10,7 @@ keywords: cli,build plugin,commandline interface
 :ref-external{title="Rollup" link="https://rollupjs.org/"}
 :ref-external{title="ESLint" link="https://eslint.org/"}
 :ref-external{title="Jest" link="https://jestjs.io/"}
+:ref-external{title="TypeDoc" link="https://typedoc.org/"}
 ::
 
 Rete CLI is a building tool with built-in support for TypeScript and ESLint along with predefined rules. Additionally, it includes Jest. These features make it simple to start building new plugins without having to setup your own environment for building, linting, and testing.
diff --git a/content/en/docs/3.concepts/1.plugin-system.md b/content/en/docs/3.concepts/1.plugin-system.md
index 6468d463..633420cd 100644
--- a/content/en/docs/3.concepts/1.plugin-system.md
+++ b/content/en/docs/3.concepts/1.plugin-system.md
@@ -5,6 +5,10 @@ keywords: plugin,scope,parent,child,addpipe,signals
 
 # Plugin system
 
+::references
+:ref-github{title="Source code" link="https://github.com/retejs/rete/blob/main/src/scope.ts"}
+::
+
 Plugins offer the ability to add new functionality mostly through a single entry point. They communicate with each other using signals that propagate from parent plugins to child plugins. Since plugins can have multiple child plugins, these signals are passed through in the order they are connected (it can be important when including plugins such as `rete-readonly-plugin`)
 
 The following code example demonstrates the creation of two scopes: the parent and the child. Both scopes log signals.
diff --git a/content/uk/docs/14.best-practices/performance.md b/content/uk/docs/14.best-practices/performance.md
index e7855562..927a6f39 100644
--- a/content/uk/docs/14.best-practices/performance.md
+++ b/content/uk/docs/14.best-practices/performance.md
@@ -6,7 +6,9 @@ keywords: продуктивність,оптимізація
 # Продуктивність
 
 ::references
+:ref-example{title="Продуктивність" link="/uk/examples/performance"}
 :ref-example{title="LOD" link="/uk/examples/lod"}
+:ref-example{title="LOD GPU" link="/uk/examples/lod-gpu"}
 ::
 
 У клієнтських додатках ви часто можете зіткнутися з двома проблемами: ресурсомісткі операції та низький FPS. Перше спричинене синхронними операціями, такими як виконання ресурсомісткого коду JS або деяких API браузера, які блокують основний потік. Останнє часто пов’язують із прямим рендерингом елементів браузером — чим вони складніші та численніші, тим більше часу потрібно браузеру для створення макета та рендерингу.
diff --git a/content/uk/docs/20.development/2.rete-cli.md b/content/uk/docs/20.development/2.rete-cli.md
index 7b29e1da..6decb54a 100644
--- a/content/uk/docs/20.development/2.rete-cli.md
+++ b/content/uk/docs/20.development/2.rete-cli.md
@@ -10,6 +10,7 @@ keywords: cli,збірка плагіну,інтерфейс командног
 :ref-external{title="Rollup" link="https://rollupjs.org/"}
 :ref-external{title="ESLint" link="https://eslint.org/"}
 :ref-external{title="Jest" link="https://jestjs.io/"}
+:ref-external{title="TypeDoc" link="https://typedoc.org/"}
 ::
 
 Rete CLI — це інструмент для збірки з вбудованою підтримкою TypeScript і ESLint разом із попередньо визначеними правилами. Крім того, він включає Jest. Ці функції спрощують створення нових плагінів без необхідності налаштовувати власне середовище для збірки, лінтингу та тестування.
diff --git a/content/uk/docs/3.concepts/1.plugin-system.md b/content/uk/docs/3.concepts/1.plugin-system.md
index ee0ee895..fdc3dd52 100644
--- a/content/uk/docs/3.concepts/1.plugin-system.md
+++ b/content/uk/docs/3.concepts/1.plugin-system.md
@@ -5,6 +5,10 @@ keywords: плагін,область,батьківський,дочірній,
 
 # Система плагінів
 
+::references
+:ref-github{title="Вихідний код" link="https://github.com/retejs/rete/blob/main/src/scope.ts"}
+::
+
 Плагіни пропонують можливість додавати нові функції переважно через одну точку входу. Вони спілкуються один з одним за допомогою сигналів, які поширюються від батьківських плагінів до дочірніх. Оскільки плагіни можуть мати кілька дочірніх плагінів, ці сигнали передаються в тому порядку, в якому вони підключені (це може бути важливо під час включення плагінів, таких як `rete-readonly-plugin`)
 
 Наступний приклад коду демонструє створення двох скоупів: батьківського та дочірнього. Обидва скоупи логують сигнали.

From fff1aa805ef66c312a3e8cebd0f06abd9f66b002 Mon Sep 17 00:00:00 2001
From: Ni55aN <stoliarov.v.s@gmail.com>
Date: Wed, 25 Oct 2023 20:11:02 +0300
Subject: [PATCH 7/7] feat(docs): add diagrams

---
 assets/diagrams/cli/index.drawio              |  73 ++++++
 assets/diagrams/editor/area.drawio            |  73 ++++++
 assets/diagrams/editor/classic-preset.drawio  | 112 +++++++++
 assets/diagrams/editor/connection.drawio      |  34 +++
 assets/diagrams/editor/node-editor.drawio     |  92 +++++++
 assets/diagrams/editor/rendering.drawio       |  58 +++++
 assets/diagrams/engine/architecture.drawio    |  36 +++
 assets/diagrams/engine/control-flow.drawio    |  84 +++++++
 assets/diagrams/engine/dataflow.drawio        |  76 ++++++
 assets/diagrams/guides/3d/index.drawio        | 171 +++++++++++++
 assets/diagrams/guides/3d/scene.drawio        |  86 +++++++
 assets/diagrams/guides/arrange/index.drawio   | 229 ++++++++++++++++++
 .../guides/data-structures/connections.drawio |  37 +++
 .../guides/data-structures/nodes.drawio       |  37 +++
 .../guides/data-structures/structures.drawio  |  52 ++++
 assets/diagrams/guides/readonly/index.drawio  |  81 +++++++
 .../diagrams/integration/architecture.drawio  |  70 ++++++
 assets/diagrams/integration/combine.drawio    |  78 ++++++
 assets/diagrams/integration/presets.drawio    |  73 ++++++
 assets/diagrams/kit/index.drawio              |  91 +++++++
 assets/diagrams/plugin-system/addPipe.drawio  |  91 +++++++
 .../plugin-system/architecture.drawio         | 126 ++++++++++
 assets/diagrams/presets/architecture.drawio   |  80 ++++++
 assets/diagrams/qa/index.drawio               | 124 ++++++++++
 content/en/docs/19.quality-assurance.md       |   2 +
 content/en/docs/20.development/2.rete-cli.md  |   2 +
 content/en/docs/20.development/3.rete-kit.md  |   2 +
 content/en/docs/3.concepts/1.plugin-system.md |   4 +
 content/en/docs/3.concepts/2.presets.md       |   2 +
 content/en/docs/3.concepts/3.editor.md        |  11 +
 content/en/docs/3.concepts/5.engine.md        |  10 +-
 content/en/docs/3.concepts/6.integration.md   |   6 +
 content/en/docs/4.guides/4.3d/1.index.md      |   4 +
 content/en/docs/4.guides/4.data-structures.md |   8 +
 content/en/docs/4.guides/5.arrange.md         |   2 +
 content/en/docs/4.guides/7.readonly.md        |   2 +
 content/uk/docs/19.quality-assurance.md       |   2 +
 content/uk/docs/20.development/2.rete-cli.md  |   2 +
 content/uk/docs/20.development/3.rete-kit.md  |   2 +
 content/uk/docs/3.concepts/1.plugin-system.md |   4 +
 content/uk/docs/3.concepts/2.presets.md       |   2 +
 content/uk/docs/3.concepts/3.editor.md        |  12 +
 content/uk/docs/3.concepts/5.engine.md        |  10 +-
 content/uk/docs/3.concepts/6.integration.md   |   6 +
 content/uk/docs/4.guides/4.3d/1.index.md      |   4 +
 content/uk/docs/4.guides/4.data-structures.md |   8 +
 content/uk/docs/4.guides/5.arrange.md         |   2 +
 content/uk/docs/4.guides/7.readonly.md        |   2 +
 48 files changed, 2173 insertions(+), 2 deletions(-)
 create mode 100644 assets/diagrams/cli/index.drawio
 create mode 100644 assets/diagrams/editor/area.drawio
 create mode 100644 assets/diagrams/editor/classic-preset.drawio
 create mode 100644 assets/diagrams/editor/connection.drawio
 create mode 100644 assets/diagrams/editor/node-editor.drawio
 create mode 100644 assets/diagrams/editor/rendering.drawio
 create mode 100644 assets/diagrams/engine/architecture.drawio
 create mode 100644 assets/diagrams/engine/control-flow.drawio
 create mode 100644 assets/diagrams/engine/dataflow.drawio
 create mode 100644 assets/diagrams/guides/3d/index.drawio
 create mode 100644 assets/diagrams/guides/3d/scene.drawio
 create mode 100644 assets/diagrams/guides/arrange/index.drawio
 create mode 100644 assets/diagrams/guides/data-structures/connections.drawio
 create mode 100644 assets/diagrams/guides/data-structures/nodes.drawio
 create mode 100644 assets/diagrams/guides/data-structures/structures.drawio
 create mode 100644 assets/diagrams/guides/readonly/index.drawio
 create mode 100644 assets/diagrams/integration/architecture.drawio
 create mode 100644 assets/diagrams/integration/combine.drawio
 create mode 100644 assets/diagrams/integration/presets.drawio
 create mode 100644 assets/diagrams/kit/index.drawio
 create mode 100644 assets/diagrams/plugin-system/addPipe.drawio
 create mode 100644 assets/diagrams/plugin-system/architecture.drawio
 create mode 100644 assets/diagrams/presets/architecture.drawio
 create mode 100644 assets/diagrams/qa/index.drawio

diff --git a/assets/diagrams/cli/index.drawio b/assets/diagrams/cli/index.drawio
new file mode 100644
index 00000000..f360de95
--- /dev/null
+++ b/assets/diagrams/cli/index.drawio
@@ -0,0 +1,73 @@
+<mxfile host="Electron" modified="2023-10-25T16:11:53.106Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="NHB3f1ZVtxPYDzBNiQcP" version="22.0.2" type="device">
+  <diagram name="page-1" id="nTteX_-L-bd6lsjCAH_5">
+    <mxGraphModel dx="592" dy="346" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--6" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="SOOv6cvLNteCJ1bs6XL--1" target="SOOv6cvLNteCJ1bs6XL--5">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="SOOv6cvLNteCJ1bs6XL--1" target="SOOv6cvLNteCJ1bs6XL--7">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="SOOv6cvLNteCJ1bs6XL--1" target="SOOv6cvLNteCJ1bs6XL--8">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--36" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="SOOv6cvLNteCJ1bs6XL--1" target="SOOv6cvLNteCJ1bs6XL--35">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--1" value="rete-cli" style="shape=folder;fontStyle=1;tabWidth=40;tabHeight=10;tabPosition=left;html=1;boundedLbl=1;whiteSpace=wrap;" vertex="1" parent="1">
+          <mxGeometry x="20" y="20" width="120" height="70" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--39" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="SOOv6cvLNteCJ1bs6XL--5" target="SOOv6cvLNteCJ1bs6XL--29">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--40" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="SOOv6cvLNteCJ1bs6XL--5" target="SOOv6cvLNteCJ1bs6XL--18">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--5" value="build" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="90" y="110" width="80" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--42" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="SOOv6cvLNteCJ1bs6XL--7" target="SOOv6cvLNteCJ1bs6XL--30">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--7" value="lint" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="90" y="160" width="80" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--43" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;dashed=1;" edge="1" parent="1" source="SOOv6cvLNteCJ1bs6XL--8" target="SOOv6cvLNteCJ1bs6XL--31">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--8" value="test" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="90" y="210" width="80" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--11" value="bundle TS project" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=10;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="100" y="134" width="120" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--18" value="rollup" style="rounded=0;whiteSpace=wrap;html=1;dashed=1;" vertex="1" parent="1">
+          <mxGeometry x="230" y="65" width="70" height="35" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--29" value="babel" style="rounded=0;whiteSpace=wrap;html=1;dashed=1;" vertex="1" parent="1">
+          <mxGeometry x="230" y="107" width="70" height="35" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--30" value="eslint" style="rounded=0;whiteSpace=wrap;html=1;dashed=1;" vertex="1" parent="1">
+          <mxGeometry x="230" y="157.5" width="70" height="35" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--31" value="jest" style="rounded=0;whiteSpace=wrap;html=1;dashed=1;" vertex="1" parent="1">
+          <mxGeometry x="230" y="207.5" width="70" height="35" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--44" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;dashed=1;" edge="1" parent="1" source="SOOv6cvLNteCJ1bs6XL--35" target="SOOv6cvLNteCJ1bs6XL--41">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--35" value="doc" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="90" y="260" width="80" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--41" value="typedoc" style="rounded=0;whiteSpace=wrap;html=1;dashed=1;" vertex="1" parent="1">
+          <mxGeometry x="230" y="257.5" width="70" height="35" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--45" value="generate API docs" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=10;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="100" y="284" width="120" height="20" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/assets/diagrams/editor/area.drawio b/assets/diagrams/editor/area.drawio
new file mode 100644
index 00000000..cbe164b1
--- /dev/null
+++ b/assets/diagrams/editor/area.drawio
@@ -0,0 +1,73 @@
+<mxfile host="Electron" modified="2023-10-18T19:30:34.859Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="QyaLIIy80QcNpVyJ1Y3C" version="22.0.2" type="device">
+  <diagram name="page-1" id="nTteX_-L-bd6lsjCAH_5">
+    <mxGraphModel dx="987" dy="577" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="h3aXGca7HBvmmgDs8vRC-28" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="h3aXGca7HBvmmgDs8vRC-18">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="h3aXGca7HBvmmgDs8vRC-29" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="h3aXGca7HBvmmgDs8vRC-19">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="h3aXGca7HBvmmgDs8vRC-31" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="h3aXGca7HBvmmgDs8vRC-30">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="h3aXGca7HBvmmgDs8vRC-33" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="h3aXGca7HBvmmgDs8vRC-32">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="h3aXGca7HBvmmgDs8vRC-45" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="h3aXGca7HBvmmgDs8vRC-13">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="0EIq4OgII-BHYrVc7AHv-1" value="AreaPlugin" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="220" y="90.5" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="h3aXGca7HBvmmgDs8vRC-41" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="h3aXGca7HBvmmgDs8vRC-1" target="h3aXGca7HBvmmgDs8vRC-6">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="h3aXGca7HBvmmgDs8vRC-42" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="h3aXGca7HBvmmgDs8vRC-1" target="h3aXGca7HBvmmgDs8vRC-8">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="h3aXGca7HBvmmgDs8vRC-1" value="AreaExtensions" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="440" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="h3aXGca7HBvmmgDs8vRC-36" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="h3aXGca7HBvmmgDs8vRC-2" target="0EIq4OgII-BHYrVc7AHv-1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="h3aXGca7HBvmmgDs8vRC-2" value="NodeEditor" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="20" y="90" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="h3aXGca7HBvmmgDs8vRC-4" value="use" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="160" y="105" width="40" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="h3aXGca7HBvmmgDs8vRC-46" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="h3aXGca7HBvmmgDs8vRC-6" target="0EIq4OgII-BHYrVc7AHv-1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="h3aXGca7HBvmmgDs8vRC-6" value="selector" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="410" y="103.13" width="100" height="35" as="geometry" />
+        </mxCell>
+        <mxCell id="h3aXGca7HBvmmgDs8vRC-47" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="h3aXGca7HBvmmgDs8vRC-8" target="0EIq4OgII-BHYrVc7AHv-1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="h3aXGca7HBvmmgDs8vRC-8" value="selectableNodes" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="410" y="151.88" width="100" height="35" as="geometry" />
+        </mxCell>
+        <mxCell id="h3aXGca7HBvmmgDs8vRC-13" value="html element" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="230" y="20" width="100" height="35" as="geometry" />
+        </mxCell>
+        <mxCell id="h3aXGca7HBvmmgDs8vRC-18" value="resize" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="270" y="170.5" width="50" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="h3aXGca7HBvmmgDs8vRC-19" value="translate" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="270" y="210.5" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="h3aXGca7HBvmmgDs8vRC-30" value="update" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="270" y="250.5" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="h3aXGca7HBvmmgDs8vRC-32" value="destroy" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="270" y="290.5" width="60" height="30" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/assets/diagrams/editor/classic-preset.drawio b/assets/diagrams/editor/classic-preset.drawio
new file mode 100644
index 00000000..3dc5ef56
--- /dev/null
+++ b/assets/diagrams/editor/classic-preset.drawio
@@ -0,0 +1,112 @@
+<mxfile host="Electron" modified="2023-10-19T09:40:41.118Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="0wD62qBrR_D-RlWpn_gl" version="22.0.2" type="device">
+  <diagram name="page-1" id="nTteX_-L-bd6lsjCAH_5">
+    <mxGraphModel dx="493" dy="289" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="oK9887doTvN0Qxn7zzAR-12" value="nodes" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=12.199981689453125;" parent="1" vertex="1">
+          <mxGeometry x="20" y="100" width="80" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-83" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="oK9887doTvN0Qxn7zzAR-14" target="oK9887doTvN0Qxn7zzAR-15" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-84" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="oK9887doTvN0Qxn7zzAR-14" target="oK9887doTvN0Qxn7zzAR-16" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-85" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="oK9887doTvN0Qxn7zzAR-14" target="oK9887doTvN0Qxn7zzAR-18" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-86" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="oK9887doTvN0Qxn7zzAR-14" target="oK9887doTvN0Qxn7zzAR-19" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-87" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="oK9887doTvN0Qxn7zzAR-14" target="oK9887doTvN0Qxn7zzAR-20" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-88" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="oK9887doTvN0Qxn7zzAR-14" target="oK9887doTvN0Qxn7zzAR-17" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-14" value="ClassicPreset" style="rounded=1;whiteSpace=wrap;html=1;arcSize=0;" parent="1" vertex="1">
+          <mxGeometry x="210" y="20" width="100" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-15" value="Node" style="rounded=1;whiteSpace=wrap;html=1;arcSize=0;" parent="1" vertex="1">
+          <mxGeometry x="170" y="80" width="90" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-16" value="Connection" style="rounded=1;whiteSpace=wrap;html=1;arcSize=0;" parent="1" vertex="1">
+          <mxGeometry x="170" y="280" width="90" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-97" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.75;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;curved=1;" parent="1" source="oK9887doTvN0Qxn7zzAR-17" target="oK9887doTvN0Qxn7zzAR-15" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="130" y="262" />
+              <mxPoint x="130" y="95" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-17" value="Input" style="rounded=1;whiteSpace=wrap;html=1;arcSize=0;" parent="1" vertex="1">
+          <mxGeometry x="170" y="240" width="90" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-94" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;curved=1;" parent="1" source="oK9887doTvN0Qxn7zzAR-18" target="oK9887doTvN0Qxn7zzAR-15" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="150" y="135" />
+              <mxPoint x="150" y="95" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-18" value="Control" style="rounded=1;whiteSpace=wrap;html=1;arcSize=0;" parent="1" vertex="1">
+          <mxGeometry x="170" y="120" width="90" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="TC2ECyIWjSvrkG4Ixzdl-1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;curved=1;dashed=1;" edge="1" parent="1" source="oK9887doTvN0Qxn7zzAR-19" target="oK9887doTvN0Qxn7zzAR-20">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="150" y="175" />
+              <mxPoint x="150" y="208" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="TC2ECyIWjSvrkG4Ixzdl-2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;curved=1;dashed=1;" edge="1" parent="1" source="oK9887doTvN0Qxn7zzAR-19">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="169.85714285714278" y="250" as="targetPoint" />
+            <Array as="points">
+              <mxPoint x="140" y="175" />
+              <mxPoint x="140" y="250" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-19" value="Socket" style="rounded=1;whiteSpace=wrap;html=1;arcSize=0;" parent="1" vertex="1">
+          <mxGeometry x="170" y="160" width="90" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="OU78inZmVnFF0rUp7K6E-3" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.75;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;dashed=1;" parent="1" source="oK9887doTvN0Qxn7zzAR-20" target="oK9887doTvN0Qxn7zzAR-15" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="140" y="222" />
+              <mxPoint x="140" y="95" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-20" value="Output" style="rounded=1;whiteSpace=wrap;html=1;arcSize=0;" parent="1" vertex="1">
+          <mxGeometry x="170" y="200" width="90" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-21" value="connections" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=12.199981689453125;" parent="1" vertex="1">
+          <mxGeometry x="20" y="180" width="80" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-89" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.25;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;dashed=1;elbow=vertical;" parent="1" source="oK9887doTvN0Qxn7zzAR-15" target="oK9887doTvN0Qxn7zzAR-12" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="120" y="88" />
+              <mxPoint x="120" y="130" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-90" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;dashed=1;" parent="1" source="oK9887doTvN0Qxn7zzAR-16" target="oK9887doTvN0Qxn7zzAR-21" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="120" y="295" />
+              <mxPoint x="120" y="210" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/assets/diagrams/editor/connection.drawio b/assets/diagrams/editor/connection.drawio
new file mode 100644
index 00000000..6341469b
--- /dev/null
+++ b/assets/diagrams/editor/connection.drawio
@@ -0,0 +1,34 @@
+<mxfile host="Electron" modified="2023-10-18T19:34:07.555Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="bULPzoFpZUC_hVLkT0Vn" version="22.0.2" type="device">
+  <diagram name="page-1" id="nTteX_-L-bd6lsjCAH_5">
+    <mxGraphModel dx="863" dy="505" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="oK9887doTvN0Qxn7zzAR-57" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="oK9887doTvN0Qxn7zzAR-54" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="0EIq4OgII-BHYrVc7AHv-1" value="ConnectionPlugin" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="220" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="ICk4Qm8_in41OD0c57MG-5" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="oK9887doTvN0Qxn7zzAR-54" target="ICk4Qm8_in41OD0c57MG-4">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-54" value="addPreset" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="270" y="100" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="ICk4Qm8_in41OD0c57MG-2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="ICk4Qm8_in41OD0c57MG-1" target="0EIq4OgII-BHYrVc7AHv-1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="ICk4Qm8_in41OD0c57MG-1" value="AreaPlugin" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="20" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="ICk4Qm8_in41OD0c57MG-3" value="use" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="160" y="35" width="40" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="ICk4Qm8_in41OD0c57MG-4" value="classic" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="390" y="96.25" width="90" height="37.5" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/assets/diagrams/editor/node-editor.drawio b/assets/diagrams/editor/node-editor.drawio
new file mode 100644
index 00000000..d5431ef9
--- /dev/null
+++ b/assets/diagrams/editor/node-editor.drawio
@@ -0,0 +1,92 @@
+<mxfile host="Electron" modified="2023-10-18T19:04:37.292Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="5ezninacPBTQkmXHODXL" version="22.0.2" type="device">
+  <diagram name="page-1" id="nTteX_-L-bd6lsjCAH_5">
+    <mxGraphModel dx="863" dy="505" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="oK9887doTvN0Qxn7zzAR-57" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="oK9887doTvN0Qxn7zzAR-54" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-63" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="oK9887doTvN0Qxn7zzAR-58" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-64" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="oK9887doTvN0Qxn7zzAR-59" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-65" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="oK9887doTvN0Qxn7zzAR-60" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-66" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="oK9887doTvN0Qxn7zzAR-62" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="0EIq4OgII-BHYrVc7AHv-1" value="NodeEditor" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="20" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-12" value="nodes" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=12.199981689453125;" parent="1" vertex="1">
+          <mxGeometry x="240" y="100" width="80" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-21" value="connections" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=12.199981689453125;" parent="1" vertex="1">
+          <mxGeometry x="240" y="180" width="80" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-76" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;dashed=1;" parent="1" source="oK9887doTvN0Qxn7zzAR-54" target="oK9887doTvN0Qxn7zzAR-12" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="210" y="115" />
+              <mxPoint x="210" y="130" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-54" value="addNode" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="70" y="100" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-58" value="removeNode" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="70" y="140" width="80" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-78" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;dashed=1;" parent="1" source="oK9887doTvN0Qxn7zzAR-59" target="oK9887doTvN0Qxn7zzAR-21" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="200" y="195" />
+              <mxPoint x="200" y="210" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-59" value="addConnection" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;fontSize=12;" parent="1" vertex="1">
+          <mxGeometry x="70" y="180" width="90" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-60" value="removeConnection" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;fontSize=12;" parent="1" vertex="1">
+          <mxGeometry x="70" y="220" width="110" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-62" value="clear" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="70" y="260" width="50" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-77" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;dashed=1;" parent="1" source="oK9887doTvN0Qxn7zzAR-58" target="oK9887doTvN0Qxn7zzAR-12" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="210" y="155" />
+              <mxPoint x="210" y="130" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-79" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;dashed=1;" parent="1" source="oK9887doTvN0Qxn7zzAR-60" target="oK9887doTvN0Qxn7zzAR-21" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="200" y="235" />
+              <mxPoint x="200" y="210" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="yptBsLMWHnSN5d2NM8mx-1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;dashed=1;" edge="1" parent="1" source="oK9887doTvN0Qxn7zzAR-62" target="oK9887doTvN0Qxn7zzAR-21">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="340" y="275" />
+              <mxPoint x="340" y="210" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="yptBsLMWHnSN5d2NM8mx-2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;dashed=1;" edge="1" parent="1" source="oK9887doTvN0Qxn7zzAR-62" target="oK9887doTvN0Qxn7zzAR-12">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/assets/diagrams/editor/rendering.drawio b/assets/diagrams/editor/rendering.drawio
new file mode 100644
index 00000000..e46141b3
--- /dev/null
+++ b/assets/diagrams/editor/rendering.drawio
@@ -0,0 +1,58 @@
+<mxfile host="Electron" modified="2023-10-18T19:39:00.113Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="hLDPxh0E34svaSCq-1AJ" version="22.0.2" type="device">
+  <diagram name="page-1" id="nTteX_-L-bd6lsjCAH_5">
+    <mxGraphModel dx="863" dy="505" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="GbNvFevuRJPCsAfk6JaB-2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="GbNvFevuRJPCsAfk6JaB-1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="0EIq4OgII-BHYrVc7AHv-1" value="AreaPlugin" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="20" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="GbNvFevuRJPCsAfk6JaB-6" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="oK9887doTvN0Qxn7zzAR-54" target="GbNvFevuRJPCsAfk6JaB-5">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="oK9887doTvN0Qxn7zzAR-54" value="addPreset" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="270" y="100" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="GbNvFevuRJPCsAfk6JaB-11" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="GbNvFevuRJPCsAfk6JaB-1" target="oK9887doTvN0Qxn7zzAR-54">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="GbNvFevuRJPCsAfk6JaB-14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="GbNvFevuRJPCsAfk6JaB-1" target="GbNvFevuRJPCsAfk6JaB-12">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="GbNvFevuRJPCsAfk6JaB-16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="GbNvFevuRJPCsAfk6JaB-1" target="GbNvFevuRJPCsAfk6JaB-15">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="GbNvFevuRJPCsAfk6JaB-1" value="ReactPlugin" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="220" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="GbNvFevuRJPCsAfk6JaB-3" value="use" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="157" y="35" width="40" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="GbNvFevuRJPCsAfk6JaB-5" value="classic" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="375" y="98.5" width="96" height="32.5" as="geometry" />
+        </mxCell>
+        <mxCell id="GbNvFevuRJPCsAfk6JaB-7" value="context menu" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="375" y="140.5" width="96" height="31.5" as="geometry" />
+        </mxCell>
+        <mxCell id="GbNvFevuRJPCsAfk6JaB-8" value="minimap" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="375" y="182" width="94" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="GbNvFevuRJPCsAfk6JaB-18" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="GbNvFevuRJPCsAfk6JaB-12" target="GbNvFevuRJPCsAfk6JaB-7">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="GbNvFevuRJPCsAfk6JaB-12" value="addPreset" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="270" y="141" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="GbNvFevuRJPCsAfk6JaB-19" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="GbNvFevuRJPCsAfk6JaB-15" target="GbNvFevuRJPCsAfk6JaB-8">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="GbNvFevuRJPCsAfk6JaB-15" value="addPreset" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="270" y="182" width="70" height="30" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/assets/diagrams/engine/architecture.drawio b/assets/diagrams/engine/architecture.drawio
new file mode 100644
index 00000000..f063a45f
--- /dev/null
+++ b/assets/diagrams/engine/architecture.drawio
@@ -0,0 +1,36 @@
+<mxfile host="Electron" modified="2023-10-19T09:53:37.245Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="JaRBnpKIbIvIgx4uNYLA" version="22.0.2" type="device">
+  <diagram name="page-1" id="nTteX_-L-bd6lsjCAH_5">
+    <mxGraphModel dx="863" dy="505" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="nebLcPZcH7VbZwTWm6rH-4" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="z7vC7oLisWLh9jTTofFt-3">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="nebLcPZcH7VbZwTWm6rH-6" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="nebLcPZcH7VbZwTWm6rH-5">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="170" y="50" />
+              <mxPoint x="170" y="140" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="0EIq4OgII-BHYrVc7AHv-1" value="NodeEditor" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="20" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="z7vC7oLisWLh9jTTofFt-1" value="use" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="180" y="35" width="40" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="z7vC7oLisWLh9jTTofFt-3" value="DataflowEngine" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="240" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="nebLcPZcH7VbZwTWm6rH-5" value="ControlFlowEngine" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="240" y="110" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="nebLcPZcH7VbZwTWm6rH-7" value="use" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="180" y="125" width="40" height="30" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/assets/diagrams/engine/control-flow.drawio b/assets/diagrams/engine/control-flow.drawio
new file mode 100644
index 00000000..8497d1e0
--- /dev/null
+++ b/assets/diagrams/engine/control-flow.drawio
@@ -0,0 +1,84 @@
+<mxfile host="Electron" modified="2023-10-19T10:23:34.709Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="zUhqqG0yUH6Um1tsJkjX" version="22.0.2" type="device">
+  <diagram name="page-1" id="nTteX_-L-bd6lsjCAH_5">
+    <mxGraphModel dx="863" dy="505" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="KHlmch4Pd0K8RJyUCdBD-4" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;" edge="1" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="KHlmch4Pd0K8RJyUCdBD-1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="KHlmch4Pd0K8RJyUCdBD-7" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="z7vC7oLisWLh9jTTofFt-1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="0EIq4OgII-BHYrVc7AHv-1" value="Node &quot;A&quot;" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="20" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="z7vC7oLisWLh9jTTofFt-1" value="execute()" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="70" y="100" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="KHlmch4Pd0K8RJyUCdBD-5" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;" edge="1" parent="1" source="KHlmch4Pd0K8RJyUCdBD-1" target="KHlmch4Pd0K8RJyUCdBD-2">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="KHlmch4Pd0K8RJyUCdBD-6" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;curved=1;" edge="1" parent="1" source="KHlmch4Pd0K8RJyUCdBD-1" target="KHlmch4Pd0K8RJyUCdBD-3">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="KHlmch4Pd0K8RJyUCdBD-9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="KHlmch4Pd0K8RJyUCdBD-1" target="KHlmch4Pd0K8RJyUCdBD-8">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="KHlmch4Pd0K8RJyUCdBD-1" value="Node &quot;B&quot;" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="200" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="KHlmch4Pd0K8RJyUCdBD-11" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="KHlmch4Pd0K8RJyUCdBD-2" target="KHlmch4Pd0K8RJyUCdBD-10">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="KHlmch4Pd0K8RJyUCdBD-2" value="Node &quot;C&quot;" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="410" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="KHlmch4Pd0K8RJyUCdBD-13" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="KHlmch4Pd0K8RJyUCdBD-3" target="KHlmch4Pd0K8RJyUCdBD-12">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="KHlmch4Pd0K8RJyUCdBD-3" value="Node &quot;D&quot;" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="410" y="150" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="KHlmch4Pd0K8RJyUCdBD-8" value="execute()" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="250" y="100" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="KHlmch4Pd0K8RJyUCdBD-10" value="execute()" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="460" y="100" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="KHlmch4Pd0K8RJyUCdBD-12" value="execute()" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="460" y="230" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="KHlmch4Pd0K8RJyUCdBD-14" value="do something and pass control to &quot;B&quot;" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=10;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="20" y="124" width="125" height="36" as="geometry" />
+        </mxCell>
+        <mxCell id="KHlmch4Pd0K8RJyUCdBD-17" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="KHlmch4Pd0K8RJyUCdBD-15" target="KHlmch4Pd0K8RJyUCdBD-16">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="KHlmch4Pd0K8RJyUCdBD-15" value="ControlFlowEngine" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="20" y="200" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="KHlmch4Pd0K8RJyUCdBD-18" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;curved=1;dashed=1;" edge="1" parent="1" source="KHlmch4Pd0K8RJyUCdBD-16" target="z7vC7oLisWLh9jTTofFt-1">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="180" y="295" />
+              <mxPoint x="180" y="115" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="KHlmch4Pd0K8RJyUCdBD-16" value="execute &quot;A&quot;" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="70" y="280" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="KHlmch4Pd0K8RJyUCdBD-19" value="Start graph execution" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=10;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="91" y="303" width="145" height="26" as="geometry" />
+        </mxCell>
+        <mxCell id="KHlmch4Pd0K8RJyUCdBD-20" value="can pass control to &quot;C&quot;, &quot;D&quot;, or both" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=10;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="189" y="124" width="125" height="36" as="geometry" />
+        </mxCell>
+        <mxCell id="KHlmch4Pd0K8RJyUCdBD-21" value="do something even if there are no outgoing nodes" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=10;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="350" y="253" width="161" height="43" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/assets/diagrams/engine/dataflow.drawio b/assets/diagrams/engine/dataflow.drawio
new file mode 100644
index 00000000..fbd084ec
--- /dev/null
+++ b/assets/diagrams/engine/dataflow.drawio
@@ -0,0 +1,76 @@
+<mxfile host="Electron" modified="2023-10-19T10:10:02.310Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="pEQtUMs6engpLECFbDjl" version="22.0.2" type="device">
+  <diagram name="page-1" id="nTteX_-L-bd6lsjCAH_5">
+    <mxGraphModel dx="863" dy="505" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="yS1XHHeHJa0qI2F8gzZG-2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;curved=1;" edge="1" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="z7vC7oLisWLh9jTTofFt-3">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="yS1XHHeHJa0qI2F8gzZG-5" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="yS1XHHeHJa0qI2F8gzZG-4">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="50" y="100" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="0EIq4OgII-BHYrVc7AHv-1" value="Node &quot;A&quot;" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="20" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="yS1XHHeHJa0qI2F8gzZG-7" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="z7vC7oLisWLh9jTTofFt-3" target="yS1XHHeHJa0qI2F8gzZG-6">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="270" y="100" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="z7vC7oLisWLh9jTTofFt-3" value="Node &quot;C&quot;" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="240" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="yS1XHHeHJa0qI2F8gzZG-3" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;strokeWidth=1;" edge="1" parent="1" source="yS1XHHeHJa0qI2F8gzZG-1" target="z7vC7oLisWLh9jTTofFt-3">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="yS1XHHeHJa0qI2F8gzZG-9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="yS1XHHeHJa0qI2F8gzZG-1" target="yS1XHHeHJa0qI2F8gzZG-8">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="50" y="240" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="yS1XHHeHJa0qI2F8gzZG-1" value="Node &quot;B&quot;" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="20" y="160" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="yS1XHHeHJa0qI2F8gzZG-4" value="data()" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="70" y="90" width="50" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="yS1XHHeHJa0qI2F8gzZG-6" value="data()" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="290" y="90" width="50" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="yS1XHHeHJa0qI2F8gzZG-8" value="data()" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="70" y="230" width="50" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="yS1XHHeHJa0qI2F8gzZG-10" value="returns&lt;br&gt;key-value data" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=10;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="82" y="108" width="90" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="yS1XHHeHJa0qI2F8gzZG-11" value="receives data from &quot;A&quot; and &quot;B&quot;" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=10;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="221" y="106" width="99" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="yS1XHHeHJa0qI2F8gzZG-15" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;" edge="1" parent="1" source="yS1XHHeHJa0qI2F8gzZG-13" target="yS1XHHeHJa0qI2F8gzZG-14">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="yS1XHHeHJa0qI2F8gzZG-13" value="DataflowEngine" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="414" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="yS1XHHeHJa0qI2F8gzZG-16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.75;entryY=1;entryDx=0;entryDy=0;curved=1;dashed=1;" edge="1" parent="1" source="yS1XHHeHJa0qI2F8gzZG-14" target="yS1XHHeHJa0qI2F8gzZG-6">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="yS1XHHeHJa0qI2F8gzZG-14" value="fetch &quot;C&quot;" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="480" y="106" width="60" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="yS1XHHeHJa0qI2F8gzZG-17" value="returns data produced by &quot;C&quot;" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=10;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="519" y="122" width="100" height="40" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/assets/diagrams/guides/3d/index.drawio b/assets/diagrams/guides/3d/index.drawio
new file mode 100644
index 00000000..2ffd4cd5
--- /dev/null
+++ b/assets/diagrams/guides/3d/index.drawio
@@ -0,0 +1,171 @@
+<mxfile host="Electron" modified="2023-10-19T16:31:56.637Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="BSyuxKn7-XZ03a9vZaZo" version="22.0.2" type="device">
+  <diagram name="page-1" id="nTteX_-L-bd6lsjCAH_5">
+    <mxGraphModel dx="247" dy="144" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="D8Z68akMFMWpllpeSwho-1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="z7vC7oLisWLh9jTTofFt-3" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="0EIq4OgII-BHYrVc7AHv-1" value="NodeEditor" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="20" y="100" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="z7vC7oLisWLh9jTTofFt-1" value="use" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="160" y="115" width="40" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-4" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;dashed=1;" parent="1" source="z7vC7oLisWLh9jTTofFt-3" target="D8Z68akMFMWpllpeSwho-2" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-24" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="z7vC7oLisWLh9jTTofFt-3" target="D8Z68akMFMWpllpeSwho-15" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-25" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="z7vC7oLisWLh9jTTofFt-3" target="D8Z68akMFMWpllpeSwho-16" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-26" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="z7vC7oLisWLh9jTTofFt-3" target="D8Z68akMFMWpllpeSwho-18" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-27" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="z7vC7oLisWLh9jTTofFt-3" target="D8Z68akMFMWpllpeSwho-17" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-28" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="z7vC7oLisWLh9jTTofFt-3" target="D8Z68akMFMWpllpeSwho-21" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-49" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;" parent="1" source="z7vC7oLisWLh9jTTofFt-3" target="D8Z68akMFMWpllpeSwho-22" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="z7vC7oLisWLh9jTTofFt-3" value="Area3DPlugin" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="220" y="100" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-2" value="three.js" style="rounded=0;whiteSpace=wrap;html=1;dashed=1;" parent="1" vertex="1">
+          <mxGeometry x="370" y="30" width="88" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-36" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="D8Z68akMFMWpllpeSwho-5" target="D8Z68akMFMWpllpeSwho-7" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-37" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="D8Z68akMFMWpllpeSwho-5" target="D8Z68akMFMWpllpeSwho-8" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-38" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="D8Z68akMFMWpllpeSwho-5" target="D8Z68akMFMWpllpeSwho-11" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-39" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="D8Z68akMFMWpllpeSwho-5" target="D8Z68akMFMWpllpeSwho-13" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="leLbrNldij8h_648JUz0-27" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.75;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="D8Z68akMFMWpllpeSwho-5" target="z7vC7oLisWLh9jTTofFt-3">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="380" y="220" />
+              <mxPoint x="380" y="145" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-5" value="forms" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="455" y="205.25" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="leLbrNldij8h_648JUz0-24" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.75;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="D8Z68akMFMWpllpeSwho-7" target="z7vC7oLisWLh9jTTofFt-3">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="380" y="265" />
+              <mxPoint x="380" y="145" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-7" value="node" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="410" y="250" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="leLbrNldij8h_648JUz0-25" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.75;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="D8Z68akMFMWpllpeSwho-8" target="z7vC7oLisWLh9jTTofFt-3">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="380" y="307" />
+              <mxPoint x="380" y="145" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-8" value="connection" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="410" y="292" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="leLbrNldij8h_648JUz0-29" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.75;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="D8Z68akMFMWpllpeSwho-11" target="z7vC7oLisWLh9jTTofFt-3">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="380" y="349" />
+              <mxPoint x="380" y="145" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-11" value="comment" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="410" y="334" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="leLbrNldij8h_648JUz0-31" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.75;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="D8Z68akMFMWpllpeSwho-13" target="z7vC7oLisWLh9jTTofFt-3">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="380" y="391" />
+              <mxPoint x="380" y="145" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-13" value="reroute" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="410" y="376" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-15" value="share" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="270" y="180" width="50" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-16" value="resize" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="270" y="220" width="50" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-17" value="translate" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="270" y="260" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-18" value="update" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="270" y="300" width="50" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-21" value="destroy" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="270" y="340" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-22" value="html element" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="233.25" y="30" width="93.75" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-51" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="D8Z68akMFMWpllpeSwho-30" target="D8Z68akMFMWpllpeSwho-50" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-52" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="D8Z68akMFMWpllpeSwho-30" target="D8Z68akMFMWpllpeSwho-5" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="leLbrNldij8h_648JUz0-3" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="D8Z68akMFMWpllpeSwho-30" target="leLbrNldij8h_648JUz0-1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-30" value="Area3DExtensions" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="494" y="30.75" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="leLbrNldij8h_648JUz0-23" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.75;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="D8Z68akMFMWpllpeSwho-50" target="z7vC7oLisWLh9jTTofFt-3">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="380" y="129" />
+              <mxPoint x="380" y="145" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-50" value="animate" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="454" y="113.75" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-47" value="start rendering" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=11;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
+          <mxGeometry x="473" y="100" width="100" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-55" value="HTML-into-3D composition" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=11;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
+          <mxGeometry x="480" y="194" width="170" height="17.75" as="geometry" />
+        </mxCell>
+        <mxCell id="leLbrNldij8h_648JUz0-26" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.75;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="leLbrNldij8h_648JUz0-1" target="z7vC7oLisWLh9jTTofFt-3">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="380" y="172" />
+              <mxPoint x="380" y="145" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="leLbrNldij8h_648JUz0-1" value="lookAt" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="455" y="157" width="70" height="30" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/assets/diagrams/guides/3d/scene.drawio b/assets/diagrams/guides/3d/scene.drawio
new file mode 100644
index 00000000..67a0a8be
--- /dev/null
+++ b/assets/diagrams/guides/3d/scene.drawio
@@ -0,0 +1,86 @@
+<mxfile host="Electron" modified="2023-10-19T16:37:12.577Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="6H-aZNWUZwqlWysMq-Rn" version="22.0.2" type="device">
+  <diagram name="page-1" id="nTteX_-L-bd6lsjCAH_5">
+    <mxGraphModel dx="863" dy="505" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="D8Z68akMFMWpllpeSwho-49" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;" parent="1" source="z7vC7oLisWLh9jTTofFt-3" target="D8Z68akMFMWpllpeSwho-22" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="Gya_IdBXWGqH5VW4Oziq-58" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="z7vC7oLisWLh9jTTofFt-3" target="D8Z68akMFMWpllpeSwho-2">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="Gya_IdBXWGqH5VW4Oziq-72" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=12;fontColor=default;" edge="1" parent="1" source="z7vC7oLisWLh9jTTofFt-3" target="Gya_IdBXWGqH5VW4Oziq-2">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="50" y="176" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="z7vC7oLisWLh9jTTofFt-3" value="Area3DPlugin" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="20" y="90" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="Gya_IdBXWGqH5VW4Oziq-59" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="D8Z68akMFMWpllpeSwho-2" target="Gya_IdBXWGqH5VW4Oziq-20">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="Gya_IdBXWGqH5VW4Oziq-60" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="D8Z68akMFMWpllpeSwho-2" target="Gya_IdBXWGqH5VW4Oziq-19">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="Gya_IdBXWGqH5VW4Oziq-61" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="D8Z68akMFMWpllpeSwho-2" target="Gya_IdBXWGqH5VW4Oziq-21">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="Gya_IdBXWGqH5VW4Oziq-62" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="D8Z68akMFMWpllpeSwho-2" target="Gya_IdBXWGqH5VW4Oziq-22">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="Gya_IdBXWGqH5VW4Oziq-63" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="D8Z68akMFMWpllpeSwho-2" target="Gya_IdBXWGqH5VW4Oziq-23">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-2" value="three.js" style="rounded=0;whiteSpace=wrap;html=1;dashed=1;" parent="1" vertex="1">
+          <mxGeometry x="240" y="100" width="88" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="D8Z68akMFMWpllpeSwho-22" value="html element" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="33.25" y="20" width="93.75" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="Gya_IdBXWGqH5VW4Oziq-66" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="Gya_IdBXWGqH5VW4Oziq-2" target="Gya_IdBXWGqH5VW4Oziq-20">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="Gya_IdBXWGqH5VW4Oziq-67" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="Gya_IdBXWGqH5VW4Oziq-2" target="Gya_IdBXWGqH5VW4Oziq-19">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="Gya_IdBXWGqH5VW4Oziq-68" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="Gya_IdBXWGqH5VW4Oziq-2" target="Gya_IdBXWGqH5VW4Oziq-21">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="Gya_IdBXWGqH5VW4Oziq-69" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="Gya_IdBXWGqH5VW4Oziq-2" target="Gya_IdBXWGqH5VW4Oziq-22">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="Gya_IdBXWGqH5VW4Oziq-70" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="Gya_IdBXWGqH5VW4Oziq-2" target="Gya_IdBXWGqH5VW4Oziq-23">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="Gya_IdBXWGqH5VW4Oziq-2" value="HybridScene" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="70" y="161" width="103" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="Gya_IdBXWGqH5VW4Oziq-19" value="PerspectiveCamera" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="121" y="257" width="119" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="Gya_IdBXWGqH5VW4Oziq-20" value="Scene" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="120" y="210" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="Gya_IdBXWGqH5VW4Oziq-21" value="CSS3DRenderer" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="121" y="304" width="109" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="Gya_IdBXWGqH5VW4Oziq-22" value="WebGLRenderer" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="120" y="351" width="110" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="Gya_IdBXWGqH5VW4Oziq-23" value="OrbitControls" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="120" y="398" width="90" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="Gya_IdBXWGqH5VW4Oziq-73" value="regular 3D renderer" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;rounded=0;strokeColor=#d6b656;align=center;verticalAlign=middle;fontFamily=Helvetica;fontSize=12;fillColor=#fff2cc;size=11;" vertex="1" parent="1">
+          <mxGeometry x="154" y="373" width="136" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="Gya_IdBXWGqH5VW4Oziq-74" value="apply 3D transformation to html" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;rounded=0;strokeColor=#d6b656;align=center;verticalAlign=middle;fontFamily=Helvetica;fontSize=12;fillColor=#fff2cc;size=11;" vertex="1" parent="1">
+          <mxGeometry x="132.5" y="326" width="197.5" height="20" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/assets/diagrams/guides/arrange/index.drawio b/assets/diagrams/guides/arrange/index.drawio
new file mode 100644
index 00000000..337c273d
--- /dev/null
+++ b/assets/diagrams/guides/arrange/index.drawio
@@ -0,0 +1,229 @@
+<mxfile host="Electron" modified="2023-10-20T18:55:05.242Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="oJyj2AcbeOvoOKa4SljQ" version="22.0.2" type="device">
+  <diagram name="page-1" id="nTteX_-L-bd6lsjCAH_5">
+    <mxGraphModel dx="592" dy="346" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="DO5qITBA8kPqdeRQ393A-11">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="0EIq4OgII-BHYrVc7AHv-1" value="NodeEditor" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="20" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-91" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="DO5qITBA8kPqdeRQ393A-11" target="DO5qITBA8kPqdeRQ393A-20">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="292" y="100" />
+              <mxPoint x="173" y="100" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-92" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="DO5qITBA8kPqdeRQ393A-11" target="EXyYNqXJy9l3_5CAV1TX-62">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-93" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="DO5qITBA8kPqdeRQ393A-11" target="EXyYNqXJy9l3_5CAV1TX-82">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="292" y="100" />
+              <mxPoint x="447" y="100" />
+              <mxPoint x="447" y="140" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-128" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="DO5qITBA8kPqdeRQ393A-11" target="EXyYNqXJy9l3_5CAV1TX-4">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="DO5qITBA8kPqdeRQ393A-11" value="AutoArrangePlugin" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="231.5" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="DO5qITBA8kPqdeRQ393A-20" value="layout" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="140" y="140" width="66" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-1" value="use" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="153" y="35" width="40" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-130" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;curved=1;dashed=1;" edge="1" parent="1" source="EXyYNqXJy9l3_5CAV1TX-4" target="EXyYNqXJy9l3_5CAV1TX-123">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="323" y="65" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-4" value="elk.js" style="rounded=0;whiteSpace=wrap;html=1;dashed=1;" vertex="1" parent="1">
+          <mxGeometry x="414" y="35" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-72" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="EXyYNqXJy9l3_5CAV1TX-76">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="418" y="330" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-104" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="EXyYNqXJy9l3_5CAV1TX-62" target="EXyYNqXJy9l3_5CAV1TX-90">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-62" value="presets" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="244.5" y="140" width="95" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-73" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;dashed=1;" edge="1" parent="1" target="EXyYNqXJy9l3_5CAV1TX-114">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="180" y="330" as="sourcePoint" />
+            <mxPoint x="230" y="330" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-75" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;exitPerimeter=0;dashed=1;" edge="1" parent="1" source="EXyYNqXJy9l3_5CAV1TX-114" target="EXyYNqXJy9l3_5CAV1TX-74">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="260" y="330" as="sourcePoint" />
+            <mxPoint x="450" y="330" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-74" value="" style="sketch=0;outlineConnect=0;fontColor=#232F3E;gradientColor=none;strokeColor=#232F3E;fillColor=#ffffff;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.action;" vertex="1" parent="1">
+          <mxGeometry x="256.5" y="315" width="30" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-77" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="EXyYNqXJy9l3_5CAV1TX-123" target="EXyYNqXJy9l3_5CAV1TX-76">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="320" y="330" as="sourcePoint" />
+            <mxPoint x="450" y="330" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-76" value="" style="sketch=0;outlineConnect=0;fontColor=#232F3E;gradientColor=none;strokeColor=#232F3E;fillColor=#ffffff;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.action;" vertex="1" parent="1">
+          <mxGeometry x="360" y="315" width="30" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-98" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="EXyYNqXJy9l3_5CAV1TX-82" target="EXyYNqXJy9l3_5CAV1TX-66">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-99" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="EXyYNqXJy9l3_5CAV1TX-82" target="EXyYNqXJy9l3_5CAV1TX-65">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-82" value="appliers" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="410" y="140" width="73.5" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-118" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;curved=1;dashed=1;" edge="1" parent="1" source="EXyYNqXJy9l3_5CAV1TX-90" target="EXyYNqXJy9l3_5CAV1TX-74">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="272" y="220" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-90" value="classic" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="240" y="190" width="55" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-121" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;curved=1;dashed=1;" edge="1" parent="1" source="EXyYNqXJy9l3_5CAV1TX-65" target="EXyYNqXJy9l3_5CAV1TX-76">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="375" y="260" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-122" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;curved=1;dashed=1;" edge="1" parent="1" source="EXyYNqXJy9l3_5CAV1TX-66" target="EXyYNqXJy9l3_5CAV1TX-76">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="375" y="220" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-114" value="" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.start_1;whiteSpace=wrap;" vertex="1" parent="1">
+          <mxGeometry x="206" y="320" width="20" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-117" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;curved=1;dashed=1;" edge="1" parent="1" source="DO5qITBA8kPqdeRQ393A-20" target="EXyYNqXJy9l3_5CAV1TX-114">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="216" y="170" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-43" value="Node &quot;A&quot;" style="rounded=0;whiteSpace=wrap;html=1;fontSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+          <mxGeometry x="423.5" y="280" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-44" value="Node &quot;B&quot;" style="rounded=0;whiteSpace=wrap;html=1;fontSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+          <mxGeometry x="423.5" y="340" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-45" value="Node &quot;C&quot;" style="rounded=0;whiteSpace=wrap;html=1;fontSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+          <mxGeometry x="523.5" y="280" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-46" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;curved=1;fontSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;" edge="1" parent="1" source="EXyYNqXJy9l3_5CAV1TX-43" target="EXyYNqXJy9l3_5CAV1TX-45">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-47" value="Node &quot;D&quot;" style="rounded=0;whiteSpace=wrap;html=1;fontSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+          <mxGeometry x="523.5" y="330" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-48" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;curved=1;fontSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;" edge="1" parent="1" source="EXyYNqXJy9l3_5CAV1TX-44" target="EXyYNqXJy9l3_5CAV1TX-47">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-49" value="Node &quot;E&quot;" style="rounded=0;whiteSpace=wrap;html=1;fontSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+          <mxGeometry x="523.5" y="370" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-50" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.75;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;fontSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;" edge="1" parent="1" source="EXyYNqXJy9l3_5CAV1TX-44" target="EXyYNqXJy9l3_5CAV1TX-49">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-51" value="Node &quot;F&quot;" style="rounded=0;whiteSpace=wrap;html=1;fontSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+          <mxGeometry x="623.5" y="300" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-52" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;curved=1;fontSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;" edge="1" parent="1" source="EXyYNqXJy9l3_5CAV1TX-45" target="EXyYNqXJy9l3_5CAV1TX-51">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-53" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;curved=1;fontSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;" edge="1" parent="1" source="EXyYNqXJy9l3_5CAV1TX-47" target="EXyYNqXJy9l3_5CAV1TX-51">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-54" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.75;entryDx=0;entryDy=0;curved=1;fontSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;" edge="1" parent="1" source="EXyYNqXJy9l3_5CAV1TX-49" target="EXyYNqXJy9l3_5CAV1TX-51">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-17" value="Node &quot;A&quot;" style="rounded=0;whiteSpace=wrap;html=1;fontSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+          <mxGeometry x="70" y="290" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-19" value="Node &quot;B&quot;" style="rounded=0;whiteSpace=wrap;html=1;fontSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+          <mxGeometry x="95.5" y="310" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-20" value="Node &quot;C&quot;" style="rounded=0;whiteSpace=wrap;html=1;fontSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+          <mxGeometry x="35.5" y="285" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-21" value="Node &quot;D&quot;" style="rounded=0;whiteSpace=wrap;html=1;fontSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+          <mxGeometry x="80" y="350" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-22" value="Node &quot;E&quot;" style="rounded=0;whiteSpace=wrap;html=1;fontSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+          <mxGeometry x="30" y="340" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-27" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.75;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;fontSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;" edge="1" parent="1" source="EXyYNqXJy9l3_5CAV1TX-19" target="EXyYNqXJy9l3_5CAV1TX-22">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-23" value="Node &quot;F&quot;" style="rounded=0;whiteSpace=wrap;html=1;fontSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+          <mxGeometry x="60" y="315" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-35" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;curved=1;fontSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;" edge="1" parent="1" source="EXyYNqXJy9l3_5CAV1TX-20" target="EXyYNqXJy9l3_5CAV1TX-23">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-32" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;curved=1;fontSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;" edge="1" parent="1" source="EXyYNqXJy9l3_5CAV1TX-21" target="EXyYNqXJy9l3_5CAV1TX-23">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-30" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.75;entryDx=0;entryDy=0;curved=1;fontSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;" edge="1" parent="1" source="EXyYNqXJy9l3_5CAV1TX-22" target="EXyYNqXJy9l3_5CAV1TX-23">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-33" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;curved=1;fontSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;" edge="1" parent="1" source="EXyYNqXJy9l3_5CAV1TX-17" target="EXyYNqXJy9l3_5CAV1TX-20">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-26" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;curved=1;fontSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;" edge="1" parent="1" source="EXyYNqXJy9l3_5CAV1TX-19" target="EXyYNqXJy9l3_5CAV1TX-21">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-65" value="TransitionApplier" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="338" y="230" width="105.5" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-66" value="StandardApplier" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="338" y="190" width="105.5" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-124" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="EXyYNqXJy9l3_5CAV1TX-74" target="EXyYNqXJy9l3_5CAV1TX-123">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="287" y="330" as="sourcePoint" />
+            <mxPoint x="360" y="330" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-123" value="" style="sketch=0;outlineConnect=0;fontColor=#232F3E;gradientColor=none;strokeColor=#232F3E;fillColor=#ffffff;dashed=1;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.action;" vertex="1" parent="1">
+          <mxGeometry x="308" y="315" width="30" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-126" value="ports placement" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=13;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="208.5" y="109" width="74" height="39" as="geometry" />
+        </mxCell>
+        <mxCell id="EXyYNqXJy9l3_5CAV1TX-127" value="apply positions" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=13;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="379" y="108" width="60" height="40" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/assets/diagrams/guides/data-structures/connections.drawio b/assets/diagrams/guides/data-structures/connections.drawio
new file mode 100644
index 00000000..b26d0a7c
--- /dev/null
+++ b/assets/diagrams/guides/data-structures/connections.drawio
@@ -0,0 +1,37 @@
+<mxfile host="Electron" modified="2023-10-19T16:56:37.239Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="qaocGqGygt_gQ1jAKdMW" version="22.0.2" type="device">
+  <diagram name="page-1" id="nTteX_-L-bd6lsjCAH_5">
+    <mxGraphModel dx="714" dy="418" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="gnkJIxszWGw6bPNyjbUk-6" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;curved=1;" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="gnkJIxszWGw6bPNyjbUk-2" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="0EIq4OgII-BHYrVc7AHv-1" value="Node &quot;A&quot;" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="20" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="gnkJIxszWGw6bPNyjbUk-7" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;" parent="1" source="gnkJIxszWGw6bPNyjbUk-1" target="gnkJIxszWGw6bPNyjbUk-2" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="gnkJIxszWGw6bPNyjbUk-1" value="Node &quot;B&quot;" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="20" y="110" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="gnkJIxszWGw6bPNyjbUk-8" style="edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;curved=1;strokeColor=default;targetPerimeterSpacing=0;endSize=6;startSize=6;sourcePerimeterSpacing=0;" parent="1" source="gnkJIxszWGw6bPNyjbUk-2" target="gnkJIxszWGw6bPNyjbUk-3" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="gnkJIxszWGw6bPNyjbUk-2" value="Node &quot;C&quot;" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="240" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="gnkJIxszWGw6bPNyjbUk-3" value="Node &quot;D&quot;" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="490" y="80" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="gnkJIxszWGw6bPNyjbUk-10" value="incoming connection to &quot;C&quot;" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=13;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
+          <mxGeometry x="160" y="90" width="100" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="gnkJIxszWGw6bPNyjbUk-11" value="outgoing connection to &quot;C&quot;" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=13;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
+          <mxGeometry x="390" y="30" width="100" height="40" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/assets/diagrams/guides/data-structures/nodes.drawio b/assets/diagrams/guides/data-structures/nodes.drawio
new file mode 100644
index 00000000..4d01e0d1
--- /dev/null
+++ b/assets/diagrams/guides/data-structures/nodes.drawio
@@ -0,0 +1,37 @@
+<mxfile host="Electron" modified="2023-10-19T16:56:25.472Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="JY1BruHM5sFBGbOxs2Mk" version="22.0.2" type="device">
+  <diagram name="page-1" id="nTteX_-L-bd6lsjCAH_5">
+    <mxGraphModel dx="829" dy="485" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="gnkJIxszWGw6bPNyjbUk-6" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;curved=1;" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="gnkJIxszWGw6bPNyjbUk-2" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="0EIq4OgII-BHYrVc7AHv-1" value="Node &quot;A&quot;" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="20" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="gnkJIxszWGw6bPNyjbUk-7" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;" parent="1" source="gnkJIxszWGw6bPNyjbUk-1" target="gnkJIxszWGw6bPNyjbUk-2" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="gnkJIxszWGw6bPNyjbUk-1" value="Node &quot;B&quot;" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="20" y="110" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="gnkJIxszWGw6bPNyjbUk-8" style="edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;curved=1;strokeColor=default;targetPerimeterSpacing=0;endSize=6;startSize=6;sourcePerimeterSpacing=0;" parent="1" source="gnkJIxszWGw6bPNyjbUk-2" target="gnkJIxszWGw6bPNyjbUk-3" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="gnkJIxszWGw6bPNyjbUk-2" value="Node &quot;C&quot;" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="240" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="gnkJIxszWGw6bPNyjbUk-3" value="Node &quot;D&quot;" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="490" y="80" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="gnkJIxszWGw6bPNyjbUk-10" value="incoming&lt;br&gt;node to &quot;C&quot;" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=13;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
+          <mxGeometry x="90" y="160" width="80" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="gnkJIxszWGw6bPNyjbUk-11" value="outgoing&lt;br&gt;node to &quot;C&quot;" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=13;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
+          <mxGeometry x="459" y="130" width="80" height="40" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/assets/diagrams/guides/data-structures/structures.drawio b/assets/diagrams/guides/data-structures/structures.drawio
new file mode 100644
index 00000000..4d71e624
--- /dev/null
+++ b/assets/diagrams/guides/data-structures/structures.drawio
@@ -0,0 +1,52 @@
+<mxfile host="Electron" modified="2023-10-19T17:17:37.952Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="vYOQTqixTLCNTGuIh44u" version="22.0.2" type="device">
+  <diagram name="page-1" id="nTteX_-L-bd6lsjCAH_5">
+    <mxGraphModel dx="863" dy="505" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="kuVI8_T9zS_DxOReFDo9-25" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;strokeColor=#CCCCCC;" edge="1" parent="1" source="kuVI8_T9zS_DxOReFDo9-15" target="kuVI8_T9zS_DxOReFDo9-12">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="0EIq4OgII-BHYrVc7AHv-1" value="NodeEditor" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="20" y="35" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="kuVI8_T9zS_DxOReFDo9-2" value="nodes" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="227" y="111.61000000000001" width="56" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="kuVI8_T9zS_DxOReFDo9-4" value="connections" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="227" y="151.61" width="86" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="kuVI8_T9zS_DxOReFDo9-6" value="roots" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="227" y="191.61" width="56" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="kuVI8_T9zS_DxOReFDo9-10" value="incomers" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="227" y="231.61" width="66" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="kuVI8_T9zS_DxOReFDo9-12" value="..." style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=#CCCCCC;" vertex="1" parent="1">
+          <mxGeometry x="227" y="271.61" width="66" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="kuVI8_T9zS_DxOReFDo9-21" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="kuVI8_T9zS_DxOReFDo9-15" target="kuVI8_T9zS_DxOReFDo9-2">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="kuVI8_T9zS_DxOReFDo9-22" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="kuVI8_T9zS_DxOReFDo9-15" target="kuVI8_T9zS_DxOReFDo9-4">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="kuVI8_T9zS_DxOReFDo9-23" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="kuVI8_T9zS_DxOReFDo9-15" target="kuVI8_T9zS_DxOReFDo9-6">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="kuVI8_T9zS_DxOReFDo9-24" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="kuVI8_T9zS_DxOReFDo9-15" target="kuVI8_T9zS_DxOReFDo9-10">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="kuVI8_T9zS_DxOReFDo9-26" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0;exitDx=0;exitDy=40;exitPerimeter=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="kuVI8_T9zS_DxOReFDo9-15" target="0EIq4OgII-BHYrVc7AHv-1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="kuVI8_T9zS_DxOReFDo9-15" value="rete-structures" style="shape=folder;fontStyle=1;tabWidth=40;tabHeight=10;tabPosition=left;html=1;boundedLbl=1;whiteSpace=wrap;" vertex="1" parent="1">
+          <mxGeometry x="172" y="25" width="120" height="70" as="geometry" />
+        </mxCell>
+        <mxCell id="gnkJIxszWGw6bPNyjbUk-11" value="provides graph management methods for the editor instance" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=13;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
+          <mxGeometry x="227" y="16" width="181" height="35" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/assets/diagrams/guides/readonly/index.drawio b/assets/diagrams/guides/readonly/index.drawio
new file mode 100644
index 00000000..ea86c170
--- /dev/null
+++ b/assets/diagrams/guides/readonly/index.drawio
@@ -0,0 +1,81 @@
+<mxfile host="Electron" modified="2023-10-20T18:11:18.890Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="tdGD21Qxt5vIYg5MWimi" version="22.0.2" type="device">
+  <diagram name="Сторінка-1" id="nTteX_-L-bd6lsjCAH_5">
+    <mxGraphModel dx="1219" dy="713" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="DO5qITBA8kPqdeRQ393A-4" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="DO5qITBA8kPqdeRQ393A-2" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="DO5qITBA8kPqdeRQ393A-21" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="DO5qITBA8kPqdeRQ393A-20" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="GMkkCzE2-bllUA5FiziO-1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="DO5qITBA8kPqdeRQ393A-11">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="0EIq4OgII-BHYrVc7AHv-1" value="NodeEditor" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="20" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="DO5qITBA8kPqdeRQ393A-5" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;dashed=1;entryX=0;entryY=0;entryDx=0;entryDy=40.75714111328125;entryPerimeter=0;" parent="1" source="DO5qITBA8kPqdeRQ393A-2" target="DO5qITBA8kPqdeRQ393A-9" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="400" y="134" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="DO5qITBA8kPqdeRQ393A-6" value="&quot;nodecreate&quot; event" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="DO5qITBA8kPqdeRQ393A-5" vertex="1" connectable="0">
+          <mxGeometry x="0.2463" y="2" relative="1" as="geometry">
+            <mxPoint x="-115" y="-10" as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="DO5qITBA8kPqdeRQ393A-2" value="addNode" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="74" y="129" width="66" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="DO5qITBA8kPqdeRQ393A-9" value="nodes" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=8.485717773437493;" parent="1" vertex="1">
+          <mxGeometry x="405" y="103.5" width="70" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="DO5qITBA8kPqdeRQ393A-16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="DO5qITBA8kPqdeRQ393A-11" target="DO5qITBA8kPqdeRQ393A-15" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="DO5qITBA8kPqdeRQ393A-11" value="ReadonlyPlugin" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="255.5" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="DO5qITBA8kPqdeRQ393A-15" value="enabled" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="319.5" y="90" width="56" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="DO5qITBA8kPqdeRQ393A-19" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.513;entryY=0.021;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" source="DO5qITBA8kPqdeRQ393A-15" target="DO5qITBA8kPqdeRQ393A-7" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="gnkJIxszWGw6bPNyjbUk-11" value="prevents if enabled" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=13;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
+          <mxGeometry x="284" y="200" width="130" height="21" as="geometry" />
+        </mxCell>
+        <mxCell id="DO5qITBA8kPqdeRQ393A-20" value="removeNode" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="74" y="170" width="86" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="DO5qITBA8kPqdeRQ393A-22" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;entryPerimeter=0;dashed=1;" parent="1" source="DO5qITBA8kPqdeRQ393A-20" target="DO5qITBA8kPqdeRQ393A-9" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="440" y="185" />
+              <mxPoint x="440" y="163" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="DO5qITBA8kPqdeRQ393A-24" value="&quot;noderemove&quot; event" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="DO5qITBA8kPqdeRQ393A-22" vertex="1" connectable="0">
+          <mxGeometry x="-0.717" y="1" relative="1" as="geometry">
+            <mxPoint x="9" y="-8" as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="DO5qITBA8kPqdeRQ393A-25" value="" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iDeleteIcon;fillColor=#e8878E;fillColor2=#BD1421;strokeColor=#ffffff;sketch=0;" parent="1" vertex="1">
+          <mxGeometry x="340" y="177" width="15" height="15" as="geometry" />
+        </mxCell>
+        <mxCell id="DO5qITBA8kPqdeRQ393A-26" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.472;entryY=-0.058;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" source="DO5qITBA8kPqdeRQ393A-15" target="DO5qITBA8kPqdeRQ393A-25" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="DO5qITBA8kPqdeRQ393A-7" value="" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iDeleteIcon;fillColor=#e8878E;fillColor2=#BD1421;strokeColor=#ffffff;sketch=0;" parent="1" vertex="1">
+          <mxGeometry x="340" y="136.5" width="15" height="15" as="geometry" />
+        </mxCell>
+        <mxCell id="GMkkCzE2-bllUA5FiziO-2" value="use" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="180" y="35" width="40" height="30" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/assets/diagrams/integration/architecture.drawio b/assets/diagrams/integration/architecture.drawio
new file mode 100644
index 00000000..3379c162
--- /dev/null
+++ b/assets/diagrams/integration/architecture.drawio
@@ -0,0 +1,70 @@
+<mxfile host="Electron" modified="2023-10-19T15:02:04.866Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="hB9GgLAm5i4wCE1Mix36" version="22.0.2" type="device">
+  <diagram name="page-1" id="nTteX_-L-bd6lsjCAH_5">
+    <mxGraphModel dx="863" dy="505" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="rceFUdOcMg6-CjwaC8J5-2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="z7vC7oLisWLh9jTTofFt-3" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="rceFUdOcMg6-CjwaC8J5-12" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="rceFUdOcMg6-CjwaC8J5-9" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="170" y="50" />
+              <mxPoint x="170" y="130" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="rceFUdOcMg6-CjwaC8J5-13" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="rceFUdOcMg6-CjwaC8J5-10" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="170" y="50" />
+              <mxPoint x="170" y="210" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="rceFUdOcMg6-CjwaC8J5-14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="rceFUdOcMg6-CjwaC8J5-11" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="170" y="50" />
+              <mxPoint x="170" y="290" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="0EIq4OgII-BHYrVc7AHv-1" value="AreaPlugin" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="20" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="z7vC7oLisWLh9jTTofFt-3" value="ReactPlugin" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="250" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="rceFUdOcMg6-CjwaC8J5-1" value="use" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="190" y="35" width="40" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="rceFUdOcMg6-CjwaC8J5-9" value="VuePlugin" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="250" y="100" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="rceFUdOcMg6-CjwaC8J5-10" value="AngularPlugin" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="250" y="180" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="rceFUdOcMg6-CjwaC8J5-11" value="SveltePlugin" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="250" y="260" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="rceFUdOcMg6-CjwaC8J5-16" value="use" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="190" y="115" width="40" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="rceFUdOcMg6-CjwaC8J5-17" value="use" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="190" y="195" width="40" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="rceFUdOcMg6-CjwaC8J5-18" value="use" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="190" y="275" width="40" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="JUCVe-ODB82a5CF8u99I-1" value="compatible with any stack" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=13;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="300" y="10" width="170" height="25" as="geometry" />
+        </mxCell>
+        <mxCell id="JUCVe-ODB82a5CF8u99I-3" value="can use multiple integrations" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=13;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="40" y="65" width="120" height="40" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/assets/diagrams/integration/combine.drawio b/assets/diagrams/integration/combine.drawio
new file mode 100644
index 00000000..4ba9849d
--- /dev/null
+++ b/assets/diagrams/integration/combine.drawio
@@ -0,0 +1,78 @@
+<mxfile host="Electron" modified="2023-10-19T10:45:35.563Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="EeHJaGYzM38iftMzbjap" version="22.0.2" type="device">
+  <diagram name="page-1" id="nTteX_-L-bd6lsjCAH_5">
+    <mxGraphModel dx="1036" dy="606" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-40" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="fbfoZVHTcV8SbdVOBE8y-39" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="0EIq4OgII-BHYrVc7AHv-1" value="classic" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="410" y="105" width="80" height="35" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-3" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;" parent="1" source="z7vC7oLisWLh9jTTofFt-3" target="rceFUdOcMg6-CjwaC8J5-1" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="z7vC7oLisWLh9jTTofFt-3" value="ReactPlugin" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="250" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="rceFUdOcMg6-CjwaC8J5-1" target="0EIq4OgII-BHYrVc7AHv-1" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="rceFUdOcMg6-CjwaC8J5-1" value="addPreset" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="310" y="107.5" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-20" value="renders nodes, connections, etc." style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=10;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
+          <mxGeometry x="450" y="80" width="110" height="32" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-28" value="classic" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="410" y="255" width="80" height="35" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-29" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;" parent="1" source="fbfoZVHTcV8SbdVOBE8y-30" target="fbfoZVHTcV8SbdVOBE8y-32" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-30" value="VuePlugin" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="250" y="170" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-31" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="fbfoZVHTcV8SbdVOBE8y-32" target="fbfoZVHTcV8SbdVOBE8y-28" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-32" value="addPreset" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="310" y="257.5" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-33" value="renders a node that wasn&#39;t rendered by the previous preset/plugin" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=10;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
+          <mxGeometry x="460" y="280" width="170" height="50" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-36" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="fbfoZVHTcV8SbdVOBE8y-34" target="z7vC7oLisWLh9jTTofFt-3" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-37" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="fbfoZVHTcV8SbdVOBE8y-34" target="fbfoZVHTcV8SbdVOBE8y-30" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="160" y="50" />
+              <mxPoint x="160" y="200" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-34" value="AreaPlugin" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="20" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-35" value="use" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="180" y="35" width="50" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-38" value="use" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="180" y="185" width="50" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-42" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;curved=1;dashed=1;" parent="1" source="fbfoZVHTcV8SbdVOBE8y-39" target="fbfoZVHTcV8SbdVOBE8y-28" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-39" value="customization" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="480" y="155" width="100" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-41" value="except for a specific type of node" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=10;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
+          <mxGeometry x="530" y="120" width="120" height="42" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/assets/diagrams/integration/presets.drawio b/assets/diagrams/integration/presets.drawio
new file mode 100644
index 00000000..9f266b01
--- /dev/null
+++ b/assets/diagrams/integration/presets.drawio
@@ -0,0 +1,73 @@
+<mxfile host="Electron" modified="2023-10-19T10:42:48.800Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="Q5ka1_ik5I7z4bgxCp20" version="22.0.2" type="device">
+  <diagram name="page-1" id="nTteX_-L-bd6lsjCAH_5">
+    <mxGraphModel dx="1036" dy="606" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="0EIq4OgII-BHYrVc7AHv-1" value="classic" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="180" y="110" width="80" height="35" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-3" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;" edge="1" parent="1" source="z7vC7oLisWLh9jTTofFt-3" target="rceFUdOcMg6-CjwaC8J5-1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="1" source="z7vC7oLisWLh9jTTofFt-3" target="fbfoZVHTcV8SbdVOBE8y-6">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-17" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;" edge="1" parent="1" source="z7vC7oLisWLh9jTTofFt-3" target="fbfoZVHTcV8SbdVOBE8y-9">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-27" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;" edge="1" parent="1" source="z7vC7oLisWLh9jTTofFt-3" target="fbfoZVHTcV8SbdVOBE8y-25">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="z7vC7oLisWLh9jTTofFt-3" value="ReactPlugin" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="20" y="25" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="rceFUdOcMg6-CjwaC8J5-1" target="0EIq4OgII-BHYrVc7AHv-1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="rceFUdOcMg6-CjwaC8J5-1" value="addPreset" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="80" y="112.5" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-4" value="context menu" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="180" y="168.5" width="80" height="35" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-5" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="fbfoZVHTcV8SbdVOBE8y-6" target="fbfoZVHTcV8SbdVOBE8y-4">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-6" value="addPreset" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="80" y="171" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-7" value="minimap" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="180" y="226" width="80" height="35" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-8" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="fbfoZVHTcV8SbdVOBE8y-9" target="fbfoZVHTcV8SbdVOBE8y-7">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-9" value="addPreset" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="80" y="228.5" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-20" value="renders nodes, connections, etc." style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=10;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="220" y="85" width="110" height="32" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-21" value="renders context menu" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=10;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="210" y="155" width="140" height="22" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-22" value="renders minimap" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=10;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="215" y="214" width="120" height="20.5" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-23" value="reroute" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="180" y="285" width="80" height="35" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-24" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="fbfoZVHTcV8SbdVOBE8y-25" target="fbfoZVHTcV8SbdVOBE8y-23">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-25" value="addPreset" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="80" y="287.5" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="fbfoZVHTcV8SbdVOBE8y-26" value="renders pins" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=10;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="215" y="273" width="95" height="20.5" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/assets/diagrams/kit/index.drawio b/assets/diagrams/kit/index.drawio
new file mode 100644
index 00000000..bd61d9e2
--- /dev/null
+++ b/assets/diagrams/kit/index.drawio
@@ -0,0 +1,91 @@
+<mxfile host="Electron" modified="2023-10-25T16:48:15.844Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="oLlggi9VS93G2VGFDYsg" version="22.0.2" type="device">
+  <diagram name="page-1" id="nTteX_-L-bd6lsjCAH_5">
+    <mxGraphModel dx="863" dy="505" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="FQYRSuhcWagX4lM57SWD-14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;dashed=1;strokeColor=#CCCCCC;" edge="1" parent="1" source="SOOv6cvLNteCJ1bs6XL--5" target="SOOv6cvLNteCJ1bs6XL--29">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="FQYRSuhcWagX4lM57SWD-22" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;dashed=1;strokeColor=#CCCCCC;" edge="1" parent="1" source="SOOv6cvLNteCJ1bs6XL--5" target="FQYRSuhcWagX4lM57SWD-17">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--6" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="SOOv6cvLNteCJ1bs6XL--1" target="SOOv6cvLNteCJ1bs6XL--5" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="SOOv6cvLNteCJ1bs6XL--1" target="SOOv6cvLNteCJ1bs6XL--7" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="SOOv6cvLNteCJ1bs6XL--1" target="SOOv6cvLNteCJ1bs6XL--8" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--1" value="rete-kit" style="shape=folder;fontStyle=1;tabWidth=40;tabHeight=10;tabPosition=left;html=1;boundedLbl=1;whiteSpace=wrap;" parent="1" vertex="1">
+          <mxGeometry x="20" y="20" width="120" height="70" as="geometry" />
+        </mxCell>
+        <mxCell id="FQYRSuhcWagX4lM57SWD-11" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="SOOv6cvLNteCJ1bs6XL--5" target="SOOv6cvLNteCJ1bs6XL--18">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="FQYRSuhcWagX4lM57SWD-12" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="SOOv6cvLNteCJ1bs6XL--5" target="FQYRSuhcWagX4lM57SWD-9">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="FQYRSuhcWagX4lM57SWD-13" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="SOOv6cvLNteCJ1bs6XL--5" target="FQYRSuhcWagX4lM57SWD-10">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="FQYRSuhcWagX4lM57SWD-20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="SOOv6cvLNteCJ1bs6XL--5" target="FQYRSuhcWagX4lM57SWD-15">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="FQYRSuhcWagX4lM57SWD-21" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="SOOv6cvLNteCJ1bs6XL--5" target="FQYRSuhcWagX4lM57SWD-16">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--5" value="app" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="90" y="110" width="80" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--7" value="plugin" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="90" y="160" width="80" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--8" value="build" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="90" y="210" width="80" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--11" value="create an app" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=10;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
+          <mxGeometry x="122" y="134" width="97" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--18" value="React.js" style="rounded=0;whiteSpace=wrap;html=1;dashed=1;" parent="1" vertex="1">
+          <mxGeometry x="180" y="37.5" width="70" height="35" as="geometry" />
+        </mxCell>
+        <mxCell id="SOOv6cvLNteCJ1bs6XL--29" value="..." style="rounded=0;whiteSpace=wrap;html=1;dashed=1;strokeColor=#CCCCCC;fontColor=#CCCCCC;" parent="1" vertex="1">
+          <mxGeometry x="420" y="37.5" width="70" height="35" as="geometry" />
+        </mxCell>
+        <mxCell id="FQYRSuhcWagX4lM57SWD-2" value="rete-cli" style="shape=folder;fontStyle=1;tabWidth=40;tabHeight=10;tabPosition=left;html=1;boundedLbl=1;whiteSpace=wrap;" vertex="1" parent="1">
+          <mxGeometry x="180" y="260" width="92.5" height="50" as="geometry" />
+        </mxCell>
+        <mxCell id="FQYRSuhcWagX4lM57SWD-3" value="boilerplate" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=6.654770624069926;" vertex="1" parent="1">
+          <mxGeometry x="230" y="202.13" width="60" height="45.75" as="geometry" />
+        </mxCell>
+        <mxCell id="FQYRSuhcWagX4lM57SWD-7" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0;entryDx=20;entryDy=0;entryPerimeter=0;dashed=1;" edge="1" parent="1" source="SOOv6cvLNteCJ1bs6XL--8" target="FQYRSuhcWagX4lM57SWD-2">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="FQYRSuhcWagX4lM57SWD-8" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;dashed=1;" edge="1" parent="1" source="SOOv6cvLNteCJ1bs6XL--7" target="FQYRSuhcWagX4lM57SWD-3">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="FQYRSuhcWagX4lM57SWD-9" value="Vue.js" style="rounded=0;whiteSpace=wrap;html=1;dashed=1;" vertex="1" parent="1">
+          <mxGeometry x="260" y="37.5" width="70" height="35" as="geometry" />
+        </mxCell>
+        <mxCell id="FQYRSuhcWagX4lM57SWD-10" value="Angular" style="rounded=0;whiteSpace=wrap;html=1;dashed=1;" vertex="1" parent="1">
+          <mxGeometry x="340" y="37.5" width="70" height="35" as="geometry" />
+        </mxCell>
+        <mxCell id="FQYRSuhcWagX4lM57SWD-15" value="Feature 1" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="290" y="150" width="70" height="35" as="geometry" />
+        </mxCell>
+        <mxCell id="FQYRSuhcWagX4lM57SWD-16" value="Feature 2" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="370" y="150" width="70" height="35" as="geometry" />
+        </mxCell>
+        <mxCell id="FQYRSuhcWagX4lM57SWD-17" value="..." style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#CCCCCC;fontColor=#CCCCCC;" vertex="1" parent="1">
+          <mxGeometry x="450" y="150" width="70" height="35" as="geometry" />
+        </mxCell>
+        <mxCell id="FQYRSuhcWagX4lM57SWD-24" value="batch build for improving DX" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=10;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="46" y="235" width="109" height="35" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/assets/diagrams/plugin-system/addPipe.drawio b/assets/diagrams/plugin-system/addPipe.drawio
new file mode 100644
index 00000000..61ff1388
--- /dev/null
+++ b/assets/diagrams/plugin-system/addPipe.drawio
@@ -0,0 +1,91 @@
+<mxfile host="Electron" modified="2023-10-25T12:17:41.904Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="FtZT6IUcUcf-v2DL3cOL" version="22.0.2" type="device">
+  <diagram name="page-1" id="nTteX_-L-bd6lsjCAH_5">
+    <mxGraphModel dx="714" dy="418" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-3" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="9eBK2uxRpZhKmENK6tqD-1" edge="1">
+          <mxGeometry x="0.3943" relative="1" as="geometry">
+            <mxPoint as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="9eBK2uxRpZhKmENK6tqD-13" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="91" y="105" as="sourcePoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-42" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="9eBK2uxRpZhKmENK6tqD-41" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="0EIq4OgII-BHYrVc7AHv-1" value="Scope &quot;A&quot;" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="11" y="30" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-1" value="Scope &quot;B&quot;" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="281" y="30" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="Nycpy90AfMpx2oItrPZw-6" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;dashed=1;" parent="1" source="9eBK2uxRpZhKmENK6tqD-13" target="IguBQvtK7OtUJuybLaeq-26" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="240" y="179" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-13" value="addPipe" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="121" y="164" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-25" value="use" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="221" y="45" width="40" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-34" value="emits 1" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=11;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
+          <mxGeometry x="81" y="10" width="80" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-36" value="receives 1" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=11;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
+          <mxGeometry x="151" y="186" width="85" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-41" value="emit &quot;1&quot;" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="119" y="230" width="90" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="IguBQvtK7OtUJuybLaeq-10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;" edge="1" parent="1" source="9eBK2uxRpZhKmENK6tqD-1" target="IguBQvtK7OtUJuybLaeq-15">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="370" y="110" as="sourcePoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="IguBQvtK7OtUJuybLaeq-11" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;" edge="1" parent="1" source="9eBK2uxRpZhKmENK6tqD-1" target="IguBQvtK7OtUJuybLaeq-19">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="340" y="110" as="sourcePoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="IguBQvtK7OtUJuybLaeq-14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="IguBQvtK7OtUJuybLaeq-15" target="IguBQvtK7OtUJuybLaeq-22">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="IguBQvtK7OtUJuybLaeq-15" value="addPipe" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="422" y="164" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="IguBQvtK7OtUJuybLaeq-18" value="receives 2, a, b" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=11;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="440" y="186" width="97" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="IguBQvtK7OtUJuybLaeq-19" value="emit &quot;b&quot;" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="420" y="230" width="90" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="IguBQvtK7OtUJuybLaeq-22" value="equal&lt;br&gt;to 2" style="rhombus;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="541" y="151" width="59" height="56" as="geometry" />
+        </mxCell>
+        <mxCell id="IguBQvtK7OtUJuybLaeq-23" value="" style="shape=mxgraph.mockup.markup.redX;fillColor=#ff0000;html=1;shadow=0;whiteSpace=wrap;strokeColor=none;" vertex="1" parent="1">
+          <mxGeometry x="621" y="172.5" width="13" height="13" as="geometry" />
+        </mxCell>
+        <mxCell id="IguBQvtK7OtUJuybLaeq-24" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.408;entryY=0.515;entryDx=0;entryDy=0;entryPerimeter=0;dashed=1;endArrow=none;endFill=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="IguBQvtK7OtUJuybLaeq-22" target="IguBQvtK7OtUJuybLaeq-23">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="610" y="200" as="sourcePoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="IguBQvtK7OtUJuybLaeq-26" value="value * 2" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="236" y="164" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="IguBQvtK7OtUJuybLaeq-27" value="return 2" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=11;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="270" y="186" width="65" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="IguBQvtK7OtUJuybLaeq-28" value="emits a, b" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=11;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="360" y="10" width="80" height="30" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/assets/diagrams/plugin-system/architecture.drawio b/assets/diagrams/plugin-system/architecture.drawio
new file mode 100644
index 00000000..2adb8296
--- /dev/null
+++ b/assets/diagrams/plugin-system/architecture.drawio
@@ -0,0 +1,126 @@
+<mxfile host="Electron" modified="2023-10-18T13:54:43.702Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="IbL0V5l5POCP6MXs63WN" version="22.0.2" type="device">
+  <diagram name="page-1" id="nTteX_-L-bd6lsjCAH_5">
+    <mxGraphModel dx="1594" dy="932" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-3" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="9eBK2uxRpZhKmENK6tqD-1">
+          <mxGeometry x="0.3943" relative="1" as="geometry">
+            <mxPoint as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-4" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="9eBK2uxRpZhKmENK6tqD-2">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="206" y="103" />
+              <mxPoint x="206" y="198" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;" edge="1" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="9eBK2uxRpZhKmENK6tqD-13">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="86" y="148" as="sourcePoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-42" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;" edge="1" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="9eBK2uxRpZhKmENK6tqD-41">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="0EIq4OgII-BHYrVc7AHv-1" value="Scope &quot;A&quot;" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="6" y="73" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-1" value="Scope &quot;B&quot;" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="276" y="73" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-7" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="9eBK2uxRpZhKmENK6tqD-2" target="9eBK2uxRpZhKmENK6tqD-6">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="416" y="198" />
+              <mxPoint x="416" y="109" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="9eBK2uxRpZhKmENK6tqD-2" target="9eBK2uxRpZhKmENK6tqD-8">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="396" y="207" as="sourcePoint" />
+            <Array as="points">
+              <mxPoint x="406" y="198" />
+              <mxPoint x="406" y="198" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-2" value="Scope &quot;C&quot;" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="276" y="168" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-46" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;" edge="1" parent="1" source="9eBK2uxRpZhKmENK6tqD-6" target="9eBK2uxRpZhKmENK6tqD-44">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-6" value="Scope &quot;D&quot;" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="496" y="79" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-21" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;" edge="1" parent="1" source="9eBK2uxRpZhKmENK6tqD-8" target="9eBK2uxRpZhKmENK6tqD-18">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-32" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;" edge="1" parent="1" source="9eBK2uxRpZhKmENK6tqD-8" target="9eBK2uxRpZhKmENK6tqD-31">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-8" value="Scope &quot;E&quot;" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="496" y="168" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-13" value="addPipe" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="116" y="207" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-18" value="addPipe" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="598" y="257" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-25" value="use" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="216" y="88" width="40" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-26" value="use" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="216" y="183" width="40" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-27" value="use" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="436" y="94" width="40" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-29" value="use" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="436" y="183" width="40" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-40" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;" edge="1" parent="1" source="9eBK2uxRpZhKmENK6tqD-31" target="9eBK2uxRpZhKmENK6tqD-39">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-31" value="parentScope" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="597" y="303" width="90" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-34" value="emits 1, 2" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=11;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="76" y="53" width="80" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-35" value="emits 3" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=11;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="338" y="149" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-36" value="receives 1, 2" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=11;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="146" y="229" width="85" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-37" value="receives 1, 2, 3, 4" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=11;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="635" y="232" width="113" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-38" value="reference to Scope &quot;C&quot;" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=11;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="638" y="333" width="85" height="45" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-39" value="emit &quot;3&quot;" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="737" y="303" width="90" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-41" value="emit &quot;1&quot;" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="114" y="273" width="90" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-43" value="emits 4" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=11;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="568" y="158" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-44" value="addPipe" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" vertex="1" parent="1">
+          <mxGeometry x="597" y="34" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="9eBK2uxRpZhKmENK6tqD-45" value="receives 1, 2, 3" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=11;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+          <mxGeometry x="625" y="10" width="113" height="30" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/assets/diagrams/presets/architecture.drawio b/assets/diagrams/presets/architecture.drawio
new file mode 100644
index 00000000..c164f814
--- /dev/null
+++ b/assets/diagrams/presets/architecture.drawio
@@ -0,0 +1,80 @@
+<mxfile host="Electron" modified="2023-10-18T18:28:13.990Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="YkWEfi0nsJawasIZNYPW" version="22.0.2" type="device">
+  <diagram name="page-1" id="nTteX_-L-bd6lsjCAH_5">
+    <mxGraphModel dx="1036" dy="606" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="yDWCO1SHKQv-f6mczWXj-18" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="yDWCO1SHKQv-f6mczWXj-16" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="yDWCO1SHKQv-f6mczWXj-24" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;" parent="1" source="0EIq4OgII-BHYrVc7AHv-1" target="yDWCO1SHKQv-f6mczWXj-23" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="0EIq4OgII-BHYrVc7AHv-1" value="Module 1" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="20" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="z7vC7oLisWLh9jTTofFt-3" value="Feature 1" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="617" y="90" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="yDWCO1SHKQv-f6mczWXj-3" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="yDWCO1SHKQv-f6mczWXj-1" target="z7vC7oLisWLh9jTTofFt-3" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="yDWCO1SHKQv-f6mczWXj-1" value="addPreset" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="500" y="100" width="90" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="yDWCO1SHKQv-f6mczWXj-7" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="yDWCO1SHKQv-f6mczWXj-5" target="yDWCO1SHKQv-f6mczWXj-6" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="617" y="190" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="yDWCO1SHKQv-f6mczWXj-5" value="addPreset" style="rounded=1;whiteSpace=wrap;html=1;arcSize=50;" parent="1" vertex="1">
+          <mxGeometry x="500" y="170" width="90" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="yDWCO1SHKQv-f6mczWXj-6" value="Feature 2" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="617" y="160" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="yDWCO1SHKQv-f6mczWXj-19" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" parent="1" source="yDWCO1SHKQv-f6mczWXj-16" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="411" y="50" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="yDWCO1SHKQv-f6mczWXj-78" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;" parent="1" source="yDWCO1SHKQv-f6mczWXj-16" target="yDWCO1SHKQv-f6mczWXj-76" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="yDWCO1SHKQv-f6mczWXj-79" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;" parent="1" source="yDWCO1SHKQv-f6mczWXj-16" target="yDWCO1SHKQv-f6mczWXj-77" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="yDWCO1SHKQv-f6mczWXj-16" value="Module 2" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="209" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="yDWCO1SHKQv-f6mczWXj-43" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;" parent="1" source="yDWCO1SHKQv-f6mczWXj-17" target="yDWCO1SHKQv-f6mczWXj-1" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="yDWCO1SHKQv-f6mczWXj-44" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=1;" parent="1" source="yDWCO1SHKQv-f6mczWXj-17" target="yDWCO1SHKQv-f6mczWXj-5" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="yDWCO1SHKQv-f6mczWXj-17" value="Module 3" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="410" y="20" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="yDWCO1SHKQv-f6mczWXj-23" value="Namespace" style="rounded=1;whiteSpace=wrap;html=1;arcSize=0;" parent="1" vertex="1">
+          <mxGeometry x="80" y="120" width="90" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="yDWCO1SHKQv-f6mczWXj-76" value="Extension 1" style="rounded=1;whiteSpace=wrap;html=1;arcSize=0;" parent="1" vertex="1">
+          <mxGeometry x="289" y="100" width="90" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="yDWCO1SHKQv-f6mczWXj-77" value="Extension 2" style="rounded=1;whiteSpace=wrap;html=1;arcSize=0;" parent="1" vertex="1">
+          <mxGeometry x="289" y="160" width="90" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="yDWCO1SHKQv-f6mczWXj-80" value="Data models" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=14;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
+          <mxGeometry x="40" y="150" width="100" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="yDWCO1SHKQv-f6mczWXj-81" value="any feature or refinement&lt;br&gt;of existing ones" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=14;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
+          <mxGeometry x="184" y="190" width="170" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="yDWCO1SHKQv-f6mczWXj-83" value="interchangeable feature for a specific use case" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;size=14;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
+          <mxGeometry x="671" y="40" width="119" height="60" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/assets/diagrams/qa/index.drawio b/assets/diagrams/qa/index.drawio
new file mode 100644
index 00000000..2a11d780
--- /dev/null
+++ b/assets/diagrams/qa/index.drawio
@@ -0,0 +1,124 @@
+<mxfile host="Electron" modified="2023-10-19T17:55:58.805Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="sgS0TQmoTuMfSpKwHydW" version="22.0.2" type="device">
+  <diagram name="page-1" id="nTteX_-L-bd6lsjCAH_5">
+    <mxGraphModel dx="863" dy="505" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="0EIq4OgII-BHYrVc7AHv-1" value="Playwright" style="rounded=0;whiteSpace=wrap;html=1;dashed=1;" parent="1" vertex="1">
+          <mxGeometry x="190" y="40" width="90" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-4" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0;exitDx=120;exitDy=40;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="d6y_oB0yooJnR8Vl0AjD-2" target="0EIq4OgII-BHYrVc7AHv-1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-8" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="d6y_oB0yooJnR8Vl0AjD-2" target="d6y_oB0yooJnR8Vl0AjD-7">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="d6y_oB0yooJnR8Vl0AjD-2" target="d6y_oB0yooJnR8Vl0AjD-9">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-13" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.25;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="d6y_oB0yooJnR8Vl0AjD-2" target="d6y_oB0yooJnR8Vl0AjD-11">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-2" value="rete-qa" style="shape=folder;fontStyle=1;tabWidth=40;tabHeight=10;tabPosition=left;html=1;boundedLbl=1;whiteSpace=wrap;" vertex="1" parent="1">
+          <mxGeometry x="20" y="20" width="120" height="70" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-30" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="d6y_oB0yooJnR8Vl0AjD-3" target="d6y_oB0yooJnR8Vl0AjD-27">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-32" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="d6y_oB0yooJnR8Vl0AjD-3" target="d6y_oB0yooJnR8Vl0AjD-29">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-3" value="React.js" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="190" y="105" width="100" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-49" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="d6y_oB0yooJnR8Vl0AjD-7" target="d6y_oB0yooJnR8Vl0AjD-3">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-52" style="edgeStyle=orthogonalEdgeStyle;shape=connector;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;labelBackgroundColor=default;strokeColor=default;align=center;verticalAlign=middle;fontFamily=Helvetica;fontSize=11;fontColor=default;endArrow=classic;" edge="1" parent="1" source="d6y_oB0yooJnR8Vl0AjD-7" target="d6y_oB0yooJnR8Vl0AjD-15">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-53" style="edgeStyle=orthogonalEdgeStyle;shape=connector;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;labelBackgroundColor=default;strokeColor=default;align=center;verticalAlign=middle;fontFamily=Helvetica;fontSize=11;fontColor=default;endArrow=classic;" edge="1" parent="1" source="d6y_oB0yooJnR8Vl0AjD-7" target="d6y_oB0yooJnR8Vl0AjD-14">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-54" style="edgeStyle=orthogonalEdgeStyle;shape=connector;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;labelBackgroundColor=default;strokeColor=default;align=center;verticalAlign=middle;fontFamily=Helvetica;fontSize=11;fontColor=default;endArrow=classic;" edge="1" parent="1" source="d6y_oB0yooJnR8Vl0AjD-7" target="d6y_oB0yooJnR8Vl0AjD-16">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-7" value="Test 1" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="80" y="110" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-55" style="edgeStyle=orthogonalEdgeStyle;shape=connector;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;labelBackgroundColor=default;strokeColor=default;align=center;verticalAlign=middle;fontFamily=Helvetica;fontSize=11;fontColor=default;endArrow=classic;" edge="1" parent="1" source="d6y_oB0yooJnR8Vl0AjD-9" target="d6y_oB0yooJnR8Vl0AjD-15">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-9" value="Test 2" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="80" y="152" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-56" style="edgeStyle=orthogonalEdgeStyle;shape=connector;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;labelBackgroundColor=default;strokeColor=default;align=center;verticalAlign=middle;fontFamily=Helvetica;fontSize=11;fontColor=default;endArrow=classic;" edge="1" parent="1" source="d6y_oB0yooJnR8Vl0AjD-11" target="d6y_oB0yooJnR8Vl0AjD-14">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-11" value="Test N" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="80" y="248" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-12" value=".&lt;br&gt;.&lt;br&gt;." style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
+          <mxGeometry x="95" y="183" width="30" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-44" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="d6y_oB0yooJnR8Vl0AjD-14" target="d6y_oB0yooJnR8Vl0AjD-37">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-45" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="d6y_oB0yooJnR8Vl0AjD-14" target="d6y_oB0yooJnR8Vl0AjD-38">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-46" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="d6y_oB0yooJnR8Vl0AjD-14" target="d6y_oB0yooJnR8Vl0AjD-39">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-14" value="Angular" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="190" y="259" width="100" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-42" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="d6y_oB0yooJnR8Vl0AjD-15" target="d6y_oB0yooJnR8Vl0AjD-35">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-43" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="d6y_oB0yooJnR8Vl0AjD-15" target="d6y_oB0yooJnR8Vl0AjD-36">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-15" value="Vue.js" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="190" y="175" width="100" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-47" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="d6y_oB0yooJnR8Vl0AjD-16" target="d6y_oB0yooJnR8Vl0AjD-40">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-48" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;" edge="1" parent="1" source="d6y_oB0yooJnR8Vl0AjD-16" target="d6y_oB0yooJnR8Vl0AjD-41">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-16" value="Svelte" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="190" y="345" width="100" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-27" value="v16" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="350" y="100" width="52" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-29" value="v18" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="350" y="130" width="52" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-35" value="v2" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="350" y="170" width="52" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-36" value="v3" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="350" y="200" width="52" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-37" value="v12" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="350" y="240" width="52" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-38" value="v14" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="350" y="270" width="52" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-39" value="v16" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="350" y="300" width="52" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-40" value="v3" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="350" y="340" width="52" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="d6y_oB0yooJnR8Vl0AjD-41" value="v4" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="350" y="370" width="52" height="20" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/content/en/docs/19.quality-assurance.md b/content/en/docs/19.quality-assurance.md
index 30ca602f..2c44a1c9 100644
--- a/content/en/docs/19.quality-assurance.md
+++ b/content/en/docs/19.quality-assurance.md
@@ -27,6 +27,8 @@ Guidelines for writing tests:
 
 The main purpose of this tool is to conduct regression UI testing on different combinations of supported features, which are presented as individual packages and various integrations with UI frameworks.
 
+:diagram{name="qa/index" caption="Architecture"}
+
 [Playwright](https://playwright.dev) serves as the underlying technology for this testing tool and enables it to conduct tests in three different browser types: **Chromium**, **Firefox**, **WebKit**.
 
 Additionally, we test our framework on various versions of commonly used UI frameworks, such as Angular, Svelte, Vue.js, and React.js. This gives us **27** test runs across different environments as we have a matrix of browsers and framework versions
diff --git a/content/en/docs/20.development/2.rete-cli.md b/content/en/docs/20.development/2.rete-cli.md
index 5300be71..e884109f 100644
--- a/content/en/docs/20.development/2.rete-cli.md
+++ b/content/en/docs/20.development/2.rete-cli.md
@@ -13,6 +13,8 @@ keywords: cli,build plugin,commandline interface
 :ref-external{title="TypeDoc" link="https://typedoc.org/"}
 ::
 
+:diagram{name="cli/index" caption="Architecture"}
+
 Rete CLI is a building tool with built-in support for TypeScript and ESLint along with predefined rules. Additionally, it includes Jest. These features make it simple to start building new plugins without having to setup your own environment for building, linting, and testing.
 
 The build feature is based on Rollup and comes with pre-configured Babel presets for TypeScript support.
diff --git a/content/en/docs/20.development/3.rete-kit.md b/content/en/docs/20.development/3.rete-kit.md
index 63801818..078fb502 100644
--- a/content/en/docs/20.development/3.rete-kit.md
+++ b/content/en/docs/20.development/3.rete-kit.md
@@ -16,6 +16,8 @@ keywords: development,kit,setup,bootstrap,react.js,vue.js,angular,svelte,vite.js
 :ref-external{title="Nuxt" link="https://nuxt.com/"}
 ::
 
+:diagram{name="kit/index" caption="Architecture"}
+
 The purpose of this tool is to improve efficiency when developing plugins or projects using this framework.
 
 It offers the following features:
diff --git a/content/en/docs/3.concepts/1.plugin-system.md b/content/en/docs/3.concepts/1.plugin-system.md
index 633420cd..5527989c 100644
--- a/content/en/docs/3.concepts/1.plugin-system.md
+++ b/content/en/docs/3.concepts/1.plugin-system.md
@@ -11,6 +11,8 @@ keywords: plugin,scope,parent,child,addpipe,signals
 
 Plugins offer the ability to add new functionality mostly through a single entry point. They communicate with each other using signals that propagate from parent plugins to child plugins. Since plugins can have multiple child plugins, these signals are passed through in the order they are connected (it can be important when including plugins such as `rete-readonly-plugin`)
 
+:diagram{name="plugin-system/architecture" caption="Architecture"}
+
 The following code example demonstrates the creation of two scopes: the parent and the child. Both scopes log signals.
 ```ts
 import { Scope } from 'rete';
@@ -47,6 +49,8 @@ child a
 
 Signals can be modified or prevented in some cases.
 
+:diagram{name="plugin-system/addPipe" caption="Prevent and modify"}
+
 ```ts
 parentScope.addPipe((context) => {
   return context * 2;
diff --git a/content/en/docs/3.concepts/2.presets.md b/content/en/docs/3.concepts/2.presets.md
index 683882b1..77378c3e 100644
--- a/content/en/docs/3.concepts/2.presets.md
+++ b/content/en/docs/3.concepts/2.presets.md
@@ -7,6 +7,8 @@ keywords: presets,reusability,features
 
 A preset is a set of pre-built functionality that typically forms the foundation of an editor but can be replaced with another preset from the same category or a custom one.
 
+:diagram{name="presets/architecture" caption="Architecture"}
+
 ## Data structures {#data-structures}
 
 For example, there is a classic editor preset that provides classes such as Node, Connection, Input, Output, and Socket.
diff --git a/content/en/docs/3.concepts/3.editor.md b/content/en/docs/3.concepts/3.editor.md
index e464d0c1..b02b734d 100644
--- a/content/en/docs/3.concepts/3.editor.md
+++ b/content/en/docs/3.concepts/3.editor.md
@@ -5,7 +5,10 @@ keywords: graph,add node,remove node,add connection,remove connection,visualize
 
 # Editor
 
+:diagram{name="editor/node-editor" caption="NodeEditor"}
+
 `NodeEditor` is a class that implements an interface for interacting with a graph. Similar to other modules, it extends `Scope`: can produce signals and provides the ability to connect plugins.
+
 ```ts
 import { NodeEditor, BaseSchemes } from 'rete'
 
@@ -22,6 +25,8 @@ The editor is applicable on both the client and server sides. On the client side
 
 ## Node and Connection management {#node-connection-management}
 
+:diagram{name="editor/classic-preset" caption="ClassicPreset"}
+
 We can add nodes as a regular object with a mandatory `id` field, or as nodes from `ClassicPreset`
 
 ```ts
@@ -58,6 +63,8 @@ await editor.removeConnection(connection.id)
 
 ## Create a 2D area {#create-2d-area}
 
+:diagram{name="editor/area" caption="AreaPlugin"}
+
 In order to visualize on HTML, `rete-area-plugin` is necessary. This plugin is responsible for basic features, such as zooming and dragging, and serves as an entry point for other plugins for visualizing and interacting with users
 
 ```ts
@@ -80,6 +87,8 @@ AreaExtensions.selectableNodes(area, AreaExtensions.selector(), {
 
 ## Interaction with connections {#interaction-with-connections}
 
+:diagram{name="editor/connection" caption="ConnectionPlugin"}
+
 The `rete-connection-plugin` plugin is responsible for user interaction with connections (creation, deletion)
 
 ```ts
@@ -94,6 +103,8 @@ Unlike Rete.js v1, this plugin doesn't render connections.
 
 ## Rendering {#rendering}
 
+:diagram{name="editor/rendering" caption="Rendering"}
+
 The rendering of the UI is exclusively handled by rendering plugins (with a few exceptions), which provide presets for various kinds of functionality.
 
 Let's take a look at the example using `rete-react-plugin`
diff --git a/content/en/docs/3.concepts/5.engine.md b/content/en/docs/3.concepts/5.engine.md
index 0dedee12..e2bec89a 100644
--- a/content/en/docs/3.concepts/5.engine.md
+++ b/content/en/docs/3.concepts/5.engine.md
@@ -5,12 +5,16 @@ keywords: engine,dataflow,control flow
 
 # Engine
 
+:diagram{name="engine/architecture" caption="Architecture"}
+
 The `rete-engine` is a package that implements two approaches for processing graph: [Dataflow](#dataflow) and [Control flow](#control-flow)
 
 ### Dataflow {#dataflow}
 
 The dataflow approach is focused solely on data, where the target node requests data from incoming nodes. Graph processing proceeds from left to right, passing the output of nodes as input arguments to outgoing nodes.
 
+:diagram{name="engine/dataflow" caption="Dataflow"}
+
 This approach is commonly used in products with node editors such as Blender.
 
 The code below represents the basic constructs required for the `DataflowEngine` to work:
@@ -51,7 +55,11 @@ const nodeOutput = await engine.fetch(resultNode.id)
 
 ### Control flow {#control-flow}
 
-Control flow is a node traversal approach that allows you to determine how to pass control to the next nodes. The processing starts at the start node, which specifies how control is passed through its outgoing connections. For instance, it can be a delay or a branching. The closest example is UE4 Blueprints.
+Control flow is a node traversal approach that allows you to determine how to pass control to the next nodes.
+
+:diagram{name="engine/control-flow" caption="Control flow"}
+
+The processing starts at the start node, which specifies how control is passed through its outgoing connections. For instance, it can be a delay or a branching. The closest example is UE4 Blueprints.
 
 ```ts
 import { ControlFlowEngine } from 'rete-engine'
diff --git a/content/en/docs/3.concepts/6.integration.md b/content/en/docs/3.concepts/6.integration.md
index 828fc75c..79a97e6f 100644
--- a/content/en/docs/3.concepts/6.integration.md
+++ b/content/en/docs/3.concepts/6.integration.md
@@ -5,6 +5,8 @@ keywords: integration,ui,rendering,react.js,vue.js,angular,svelte
 
 # Integration
 
+:diagram{name="integration/architecture" caption="Architecture"}
+
 This framework is not bound to any UI rendering framework and can be integrated with the most popular frameworks/libraries such as **Angular**, **Svelte**, **Vue.js**, **React.js**. The following rendering packages are available:
 
 - [`rete-react-plugin`](https://www.npmjs.com/package/rete-react-plugin)
@@ -16,6 +18,8 @@ The primary objective is to empower you to choose the visualization tools that a
 
 ## Classic preset {#classic-preset}
 
+:diagram{name="integration/presets" caption="Presets"}
+
 By default, you can use the classic preset that has built-in components for:
 
 - nodes
@@ -36,6 +40,8 @@ The framework allows you to swap out the pre-defined components with any other c
 
 ## Combining render plugins {#combine}
 
+:diagram{name="integration/combine" caption="Combine"}
+
 This framework version has improved approaches for combining various rendering frameworkswhile ensuring TypeScript support. For instance, you can render one node using **Vue.js** and another using **React.js**.
 
 ```ts
diff --git a/content/en/docs/4.guides/4.3d/1.index.md b/content/en/docs/4.guides/4.3d/1.index.md
index 60262d9c..b977ab63 100644
--- a/content/en/docs/4.guides/4.3d/1.index.md
+++ b/content/en/docs/4.guides/4.3d/1.index.md
@@ -18,6 +18,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 This guide outlines how to incorporate the node editor into a 3D scene. It can be achieved by `rete-area-3d-plugin`, which substitutes the standard `rete-area-plugin`.
 
+:diagram{name="guides/3d/index" caption="Architecture"}
+
 Powered by Three.js, this plugin creates a scene that contains a camera and two renderers - `CSS3DRenderer` and `WebGLRenderer`. Consequently, 3D objects and native HTML elements are rendered together in a single viewport, enabling overlapping. The primary advantage of utilizing native elements (as opposed to rendering to texture) is the preservation of full interactivity.
 
 ## Install dependencies {#install-dependencies}
@@ -90,6 +92,8 @@ Area3DExtensions.lookAt(area, editor.getNodes()) // alternative to zoomAt from r
 
 ## Scene management {#scene-management}
 
+:diagram{name="guides/3d/scene" caption="Scene"}
+
 As previously stated, this plugin creates a scene complete with camera and renderers. To access them, you can use the following code:
 
 ```ts
diff --git a/content/en/docs/4.guides/4.data-structures.md b/content/en/docs/4.guides/4.data-structures.md
index efa3651a..d7db8ffd 100644
--- a/content/en/docs/4.guides/4.data-structures.md
+++ b/content/en/docs/4.guides/4.data-structures.md
@@ -12,6 +12,8 @@ The `NodeEditor` instance stores this data in a normalized format, specifically
 - `{ id: <string> }` for a nodes
 - `{ id: <string>, source: <string>, target: <string> }` for a connections
 
+:diagram{name="editor/node-editor" caption="NodeEditor"}
+
 Initializing the editor involves using a basic scheme without any supplementary fields to start with:
 
 ```ts
@@ -47,6 +49,8 @@ You have all the necessary methods to process the graph, such as retrieving a li
 
 ## Incoming/outgoing connections {#incoming-outgoing-connections}
 
+:diagram{name="guides/data-structures/connections" caption="Incoming/outgoing connections"}
+
 The following code shows how to retrieve a list of incoming and outgoing connections for `node`:
 
 ```ts
@@ -58,6 +62,8 @@ const outgoingConnections = connections.filter(connection => connection.source =
 
 ## Incoming/outgoing nodes {#incoming-outgoing-nodes}
 
+:diagram{name="guides/data-structures/nodes" caption="Incoming/outgoing nodes"}
+
 We can use variables from the previous section to retrieve incoming or outgoing nodes:
 
 ```ts
@@ -81,6 +87,8 @@ The previously mentioned approaches are fairly flexible, but they require the im
 - **Subgraph**: graphs that have parent-child relationships between nodes.
 - **Traverse**: traversing nodes by their connections, such as retrieving only incoming nodes or all predecessors.
 
+:diagram{name="guides/data-structures/structures" caption="rete-structures"}
+
 ### Usage {#rete-structures-usage}
 
 Install the dependency
diff --git a/content/en/docs/4.guides/5.arrange.md b/content/en/docs/4.guides/5.arrange.md
index 255e3433..c04b00c8 100644
--- a/content/en/docs/4.guides/5.arrange.md
+++ b/content/en/docs/4.guides/5.arrange.md
@@ -16,6 +16,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 :ref-external{title="Elk.js" link="https://github.com/kieler/elkjs"}
 ::
 
+:diagram{name="guides/arrange/index" caption="Architecture"}
+
 ## Install dependencies {#install-dependencies}
 
 Prior to using this plugin, `elkjs` peer dependency must be installed separately.
diff --git a/content/en/docs/4.guides/7.readonly.md b/content/en/docs/4.guides/7.readonly.md
index 581df5cc..1be877b0 100644
--- a/content/en/docs/4.guides/7.readonly.md
+++ b/content/en/docs/4.guides/7.readonly.md
@@ -14,6 +14,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 :ref-github{title="Plugin" link="https://github.com/retejs/readonly-plugin"}
 ::
 
+:diagram{name="guides/readonly/index" caption="Prevent events"}
+
 ## Install dependencies {#install-dependencies}
 
 ```bash
diff --git a/content/uk/docs/19.quality-assurance.md b/content/uk/docs/19.quality-assurance.md
index dbe0a699..8c5d65ca 100644
--- a/content/uk/docs/19.quality-assurance.md
+++ b/content/uk/docs/19.quality-assurance.md
@@ -27,6 +27,8 @@ keywords: qa,забезпечення якості,юніт тестування
 
 Основною метою цього інструменту є проведення регресійного тестування інтерфейсу користувача на різних комбінаціях підтримуваних функцій, які представлені як окремі пакети та різні інтеграції з UI фреймворками.
 
+:diagram{name="qa/index" caption="Architecture"}
+
 [Playwright](https://playwright.dev) слугує базовою технологією для цього інструменту тестування та дає змогу проводити тести в трьох різних типах браузерів: **Chromium**, **Firefox**, **WebKit**.
 
 Крім того, ми тестуємо наш фреймворк на різних версіях UI фреймворків, таких як Angular, Svelte, Vue.js і React.js. Це дає нам **18** тестових прогонів у різних середовищах, оскільки у нас є матриця браузерів і версій фреймворку
diff --git a/content/uk/docs/20.development/2.rete-cli.md b/content/uk/docs/20.development/2.rete-cli.md
index 6decb54a..7eb27c61 100644
--- a/content/uk/docs/20.development/2.rete-cli.md
+++ b/content/uk/docs/20.development/2.rete-cli.md
@@ -13,6 +13,8 @@ keywords: cli,збірка плагіну,інтерфейс командног
 :ref-external{title="TypeDoc" link="https://typedoc.org/"}
 ::
 
+:diagram{name="cli/index" caption="Architecture"}
+
 Rete CLI — це інструмент для збірки з вбудованою підтримкою TypeScript і ESLint разом із попередньо визначеними правилами. Крім того, він включає Jest. Ці функції спрощують створення нових плагінів без необхідності налаштовувати власне середовище для збірки, лінтингу та тестування.
 
 Функція збірки базується на Rollup і постачається з попередньо налаштованими стилями Babel для підтримки TypeScript.
diff --git a/content/uk/docs/20.development/3.rete-kit.md b/content/uk/docs/20.development/3.rete-kit.md
index 6d7d1b86..c6d6fa37 100644
--- a/content/uk/docs/20.development/3.rete-kit.md
+++ b/content/uk/docs/20.development/3.rete-kit.md
@@ -16,6 +16,8 @@ keywords: розробка,kit,setup,bootstrap,react.js,vue.js,angular,svelte,vi
 :ref-external{title="Nuxt" link="https://nuxt.com/"}
 ::
 
+:diagram{name="kit/index" caption="Architecture"}
+
 Метою цього інструменту є підвищення ефективності розробки плагінів або проектів із використанням цього фреймворку.
 
 Він пропонує такі функції:
diff --git a/content/uk/docs/3.concepts/1.plugin-system.md b/content/uk/docs/3.concepts/1.plugin-system.md
index fdc3dd52..33a503e7 100644
--- a/content/uk/docs/3.concepts/1.plugin-system.md
+++ b/content/uk/docs/3.concepts/1.plugin-system.md
@@ -11,6 +11,8 @@ keywords: плагін,область,батьківський,дочірній,
 
 Плагіни пропонують можливість додавати нові функції переважно через одну точку входу. Вони спілкуються один з одним за допомогою сигналів, які поширюються від батьківських плагінів до дочірніх. Оскільки плагіни можуть мати кілька дочірніх плагінів, ці сигнали передаються в тому порядку, в якому вони підключені (це може бути важливо під час включення плагінів, таких як `rete-readonly-plugin`)
 
+:diagram{name="plugin-system/architecture" caption="Архітектура"}
+
 Наступний приклад коду демонструє створення двох скоупів: батьківського та дочірнього. Обидва скоупи логують сигнали.
 ```ts
 import { Scope } from 'rete';
@@ -47,6 +49,8 @@ child a
 
 У деяких випадках сигнали можна змінювати або блокувати.
 
+:diagram{name="plugin-system/addPipe" caption="Блокувати або змінити"}
+
 ```ts
 parentScope.addPipe((context) => {
   return context * 2;
diff --git a/content/uk/docs/3.concepts/2.presets.md b/content/uk/docs/3.concepts/2.presets.md
index bfa8a56a..4b3ff13b 100644
--- a/content/uk/docs/3.concepts/2.presets.md
+++ b/content/uk/docs/3.concepts/2.presets.md
@@ -7,6 +7,8 @@ keywords: пресети,багаторазове використання,фі
 
 Пресет — це набір попередньо створених функціональних можливостей, які зазвичай становлять основу редактора, але можуть бути замінені на інші пресети з тієї ж категорії або кастомні.
 
+:diagram{name="presets/architecture" caption="Architecture"}
+
 ## Структури даних {#data-structures}
 
 Наприклад, існує класичний пресет редактора, який містить такі класи, як Node, Connection, Input, Output і Socket.
diff --git a/content/uk/docs/3.concepts/3.editor.md b/content/uk/docs/3.concepts/3.editor.md
index 0db15d24..85b0be1e 100644
--- a/content/uk/docs/3.concepts/3.editor.md
+++ b/content/uk/docs/3.concepts/3.editor.md
@@ -5,7 +5,10 @@ keywords: граф,додати вузол,видалити вузол,дода
 
 # Редактор
 
+:diagram{name="editor/node-editor" caption="NodeEditor"}
+
 `NodeEditor` — це клас, який реалізує інтерфейс для взаємодії з графом. Подібно до інших модулів, він розширює `Scope`: може створювати сигнали та надає можливість підключати плагіни.
+
 ```ts
 import { NodeEditor, BaseSchemes } from 'rete'
 
@@ -19,8 +22,11 @@ const editor = new NodeEditor<Schemes>()
 Існує [класичний пресет](/uk/docs/concepts/presets#data-structures), який надає інтерфейси для створення вузлів.
 
 Редактор може бути застосовний як на стороні клієнта, так і на стороні сервера. На стороні клієнта він може надавати дані для візуалізації. На стороні сервера він може надавати дані для обробки графіків, наприклад, через `rete-engine` або інші взаємодії за допомогою `rete-structures`.
+
 ## Керування вузлом і з’єднанням {#node-connection-management}
 
+:diagram{name="editor/classic-preset" caption="ClassicPreset"}
+
 Ми можемо додавати вузли як звичайний об’єкт із обов’язковим полем `id` або як вузли з `ClassicPreset`
 
 ```ts
@@ -57,6 +63,8 @@ await editor.removeConnection(connection.id)
 
 ## Створення 2D області {#create-2d-area}
 
+:diagram{name="editor/area" caption="AreaPlugin"}
+
 Для візуалізації на HTML необхідний `rete-area-plugin`. Цей плагін відповідає за основні функції, такі як масштабування та перетягування, і служить точкою входу для інших плагінів для візуалізації та взаємодії з користувачами
 
 ```ts
@@ -79,6 +87,8 @@ AreaExtensions.selectableNodes(area, AreaExtensions.selector(), {
 
 ## Взаємодія зі з'єднаннями {#interaction-with-connections}
 
+:diagram{name="editor/connection" caption="ConnectionPlugin"}
+
 Плагін `rete-connection-plugin` відповідає за взаємодію користувача зі з'єднаннями (створення, видалення)
 
 ```ts
@@ -93,6 +103,8 @@ connection.addPreset(ConnectionPresets.classic.setup())
 
 ## Рендерінг {#rendering}
 
+:diagram{name="editor/rendering" caption="Rendering"}
+
 Візуалізація інтерфейсу користувача обробляється виключно плагінами візуалізації (за кількома винятками), які надають пресети для різних видів функціональності.
 
 Давайте подивимося на приклад використання `rete-react-plugin`
diff --git a/content/uk/docs/3.concepts/5.engine.md b/content/uk/docs/3.concepts/5.engine.md
index 55afad10..1716c623 100644
--- a/content/uk/docs/3.concepts/5.engine.md
+++ b/content/uk/docs/3.concepts/5.engine.md
@@ -5,12 +5,16 @@ keywords: двигун,потік даних,управлінням потоко
 
 # Двигун
 
+:diagram{name="engine/architecture" caption="Architecture"}
+
 `rete-engine` — це пакет, який реалізує два підходи до обробки графів: [Dataflow](#dataflow) і [Control flow](#control-flow)
 
 ## Dataflow {#dataflow}
 
 Підхід потоку даних зосереджений виключно на даних, де цільовий вузол запитує дані від вхідних вузлів. Обробка графа відбувається зліва направо, передаючи вихідні дані вузлів як вхідні аргументи до вихідних вузлів.
 
+:diagram{name="engine/dataflow" caption="Dataflow"}
+
 Цей підхід зазвичай використовується в продуктах з редакторами вузлів, таких як Blender.
 
 Наведений нижче код представляє основні конструкції, необхідні для роботи `DataflowEngine`:
@@ -51,7 +55,11 @@ const nodeOutput = await engine.fetch(resultNode.id)
 
 ## Control flow {#control-flow}
 
-Потік керування — це підхід обходу вузлів, який дозволяє визначити спосіб передавати керування наступним вузлам. Обробка починається з початкового вузла, який визначає, як контроль передається через його вихідні з'єднання. Наприклад, це може бути затримка або розгалуження. Найближчим прикладом є UE4 Blueprints.
+Потік керування — це підхід обходу вузлів, який дозволяє визначити спосіб передавати керування наступним вузлам.
+
+:diagram{name="engine/control-flow" caption="Control flow"}
+
+Обробка починається з початкового вузла, який визначає, як контроль передається через його вихідні з'єднання. Наприклад, це може бути затримка або розгалуження. Найближчим прикладом є UE4 Blueprints.
 
 ```ts
 import { ControlFlowEngine } from 'rete-engine'
diff --git a/content/uk/docs/3.concepts/6.integration.md b/content/uk/docs/3.concepts/6.integration.md
index 1c8e5420..095aa6c0 100644
--- a/content/uk/docs/3.concepts/6.integration.md
+++ b/content/uk/docs/3.concepts/6.integration.md
@@ -5,6 +5,8 @@ keywords: інтеграція,ui,рендерінг,react.js,vue.js,angular,sve
 
 # Інтеграція
 
+:diagram{name="integration/architecture" caption="Architecture"}
+
 Цей фреймворк не прив’язаний до будь-якого фреймворку візуалізації інтерфейсу і може бути інтегрований із найпопулярнішими фреймворками/бібліотеками, такими як **Angular**, **Svelte**, **Vue.js**, **React.js**. Доступні такі пакети візуалізації:
 
 - [`rete-react-plugin`](https://www.npmjs.com/package/rete-react-plugin)
@@ -16,6 +18,8 @@ keywords: інтеграція,ui,рендерінг,react.js,vue.js,angular,sve
 
 ## Класичний пресет {#classic-preset}
 
+:diagram{name="integration/presets" caption="Presets"}
+
 За замовчуванням ви можете використовувати класичний стиль із вбудованими компонентами для:
 
 - вузлів
@@ -36,6 +40,8 @@ area.use(angular)
 
 ## Комбінування рендер плагінів {#combine}
 
+:diagram{name="integration/combine" caption="Combine"}
+
 У цій версії фреймворку покращено підходи до комбінування різних фреймворків візуалізації, одночасно забезпечуючи підтримку TypeScript. Наприклад, ви можете рендерити один вузол за допомогою **Vue.js**, а інший — за допомогою **React.js**.
 
 ```ts
diff --git a/content/uk/docs/4.guides/4.3d/1.index.md b/content/uk/docs/4.guides/4.3d/1.index.md
index b3d19dc3..0b8c2d57 100644
--- a/content/uk/docs/4.guides/4.3d/1.index.md
+++ b/content/uk/docs/4.guides/4.3d/1.index.md
@@ -18,6 +18,8 @@ keywords: 3d,three.js,вбудувати
 
 У цьому гайді описано, як включити редактор вузлів у 3D-сцену. Це можна досягти за допомогою `rete-area-3d-plugin`, який замінює стандартний `rete-area-plugin`.
 
+:diagram{name="guides/3d/index" caption="Architecture"}
+
 Завдяки Three.js цей плагін створює сцену, яка містить камеру та два рендерери – `CSS3DRenderer` і `WebGLRenderer`. Отже, 3D-об’єкти та нативні HTML-елементи відображаються разом в одному в’юпорті, з можливістю перекриття. Основна перевага використання нативних елементів (на відміну від візуалізації в текстуру) полягає в збереженні повної інтерактивності.
 
 ## Встановити залежності {#install-dependencies}
@@ -90,6 +92,8 @@ Area3DExtensions.lookAt(area, editor.getNodes()) // альтернатива zoo
 
 ## Менеджмент сцени {#scene-management}
 
+:diagram{name="guides/3d/scene" caption="Scene"}
+
 Як було сказано раніше, цей плагін створює сцену з камерою та рендерерами. Щоб отримати доступ до них, ви можете використовувати такий код:
 
 ```ts
diff --git a/content/uk/docs/4.guides/4.data-structures.md b/content/uk/docs/4.guides/4.data-structures.md
index efb6d1d0..39af7599 100644
--- a/content/uk/docs/4.guides/4.data-structures.md
+++ b/content/uk/docs/4.guides/4.data-structures.md
@@ -12,6 +12,8 @@ keywords: nodeeditor,вузли,з'єднання,вхідні,вихідні,к
 - `{ id: <string> }` для вузлів
 - `{ id: <string>, source: <string>, target: <string> }` для з’єднань
 
+:diagram{name="editor/node-editor" caption="NodeEditor"}
+
 Ініціалізація редактора передбачає використання базової схеми без будь-яких додаткових полів для початку:
 
 ```ts
@@ -47,6 +49,8 @@ editor.getConnections() // returns [connection]
 
 ## Вхідні/вихідні з'єднання {#incoming-outgoing-connections}
 
+:diagram{name="guides/data-structures/connections" caption="Incoming/outgoing connections"}
+
 Наступний код показує, як отримати список вхідних і вихідних з’єднань для `node`:
 
 ```ts
@@ -58,6 +62,8 @@ const outgoingConnections = connections.filter(connection => connection.source =
 
 ## Incoming/outgoing nodes {#incoming-outgoing-nodes}
 
+:diagram{name="guides/data-structures/nodes" caption="Incoming/outgoing nodes"}
+
 Ми можемо використовувати змінні з попереднього розділу для отримання вхідних або вихідних вузлів:
 
 ```ts
@@ -81,6 +87,8 @@ Array.from(new Set(outgoers))
 - **Підграф**: графи, які мають зв’язки «батько-дитина» між вузлами.
 - **Траверс**: обхід вузлів за їхніми з’єднаннями, наприклад отримання лише вхідних вузлів або всіх попередників.
 
+:diagram{name="guides/data-structures/structures" caption="rete-structures"}
+
 ### Використання {#rete-structures-usage}
 
 Встановимо залежність
diff --git a/content/uk/docs/4.guides/5.arrange.md b/content/uk/docs/4.guides/5.arrange.md
index 2b20b426..4b2ffbfc 100644
--- a/content/uk/docs/4.guides/5.arrange.md
+++ b/content/uk/docs/4.guides/5.arrange.md
@@ -16,6 +16,8 @@ keywords: макет,упорядкування,положення вузла
 :ref-external{title="Elk.js" link="https://github.com/kieler/elkjs"}
 ::
 
+:diagram{name="guides/arrange/index" caption="Architecture"}
+
 ## Встановити залежності {#install-dependencies}
 
 Перед використанням цього плагіна необхідно окремо встановити однорангову залежність `elkjs`.
diff --git a/content/uk/docs/4.guides/7.readonly.md b/content/uk/docs/4.guides/7.readonly.md
index c2b541c2..6fd97b0b 100644
--- a/content/uk/docs/4.guides/7.readonly.md
+++ b/content/uk/docs/4.guides/7.readonly.md
@@ -14,6 +14,8 @@ keywords: тільки для читання
 :ref-github{title="Плагін" link="https://github.com/retejs/readonly-plugin"}
 ::
 
+:diagram{name="guides/readonly/index" caption="Prevent events"}
+
 ## Встановити залежності {#install-dependencies}
 
 ```bash