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/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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/content/Diagram.vue b/components/content/Diagram.vue
new file mode 100644
index 00000000..7576df67
--- /dev/null
+++ b/components/content/Diagram.vue
@@ -0,0 +1,31 @@
+
+figure.diagram
+ .scrollable
+ img(:src="'/diagrams/'+name+'.svg'")
+ figcaption.caption {{ caption }}
+
+
+
+
+
+
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/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 ccff6aac..e884109f 100644
--- a/content/en/docs/20.development/2.rete-cli.md
+++ b/content/en/docs/20.development/2.rete-cli.md
@@ -10,8 +10,11 @@ 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/"}
::
+: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 831b69cd..5527989c 100644
--- a/content/en/docs/3.concepts/1.plugin-system.md
+++ b/content/en/docs/3.concepts/1.plugin-system.md
@@ -5,8 +5,14 @@ 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`)
+: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';
@@ -43,12 +49,14 @@ 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;
});
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/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: }` for a nodes
- `{ id: , source: , target: }` 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/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/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 7b29e1da..7eb27c61 100644
--- a/content/uk/docs/20.development/2.rete-cli.md
+++ b/content/uk/docs/20.development/2.rete-cli.md
@@ -10,8 +10,11 @@ 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/"}
::
+: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 8336cb33..33a503e7 100644
--- a/content/uk/docs/3.concepts/1.plugin-system.md
+++ b/content/uk/docs/3.concepts/1.plugin-system.md
@@ -5,8 +5,14 @@ keywords: плагін,область,батьківський,дочірній,
# Система плагінів
+::references
+:ref-github{title="Вихідний код" link="https://github.com/retejs/rete/blob/main/src/scope.ts"}
+::
+
Плагіни пропонують можливість додавати нові функції переважно через одну точку входу. Вони спілкуються один з одним за допомогою сигналів, які поширюються від батьківських плагінів до дочірніх. Оскільки плагіни можуть мати кілька дочірніх плагінів, ці сигнали передаються в тому порядку, в якому вони підключені (це може бути важливо під час включення плагінів, таких як `rete-readonly-plugin`)
+:diagram{name="plugin-system/architecture" caption="Архітектура"}
+
Наступний приклад коду демонструє створення двох скоупів: батьківського та дочірнього. Обидва скоупи логують сигнали.
```ts
import { Scope } from 'rete';
@@ -43,12 +49,14 @@ child a
У деяких випадках сигнали можна змінювати або блокувати.
+:diagram{name="plugin-system/addPipe" caption="Блокувати або змінити"}
+
```ts
parentScope.addPipe((context) => {
return context * 2;
});
childScope.addPipe((context) => {
- if (context === 'b') return // запобігання поширення чисел
+ if (context === 'b') return // запобігання поширення 'b'
return context;
});
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()
Існує [класичний пресет](/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: }` для вузлів
- `{ id: , source: , target: }` для з’єднань
+: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
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/scripts/update-diagrams.bash b/scripts/update-diagrams.bash
new file mode 100644
index 00000000..093e1eef
--- /dev/null
+++ b/scripts/update-diagrams.bash
@@ -0,0 +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
+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' \;