add img

images/README.md

@@ -0,0 +1,55 @@
+# Architecture Diagrams
+
+This folder contains visual representations of the studio einszwovier platform architecture.
+
+## Files
+
+### `architecture.png`
+
+High-resolution PNG diagram showing the complete platform architecture including:
+
+- **Web Platform** - Landing page, About page, Cost calculator
+- **Services** - BookStack, Open WebUI, JupyterHub, Forgejo, Element Web, Portainer
+- **Backend** - Synapse Matrix server, Ollama LLM engine, MariaDB database
+- **Educational Resources** - Drone programming, Git repositories, Documentation
+- **Storage** - Persistent data for all services
+- **Infrastructure** - Watchtower auto-updates, Docker network
+
+**Specifications:**
+- Resolution: 2400x1600 pixels
+- Format: PNG with transparent background
+- Size: ~242 KB
+- Generated from: `architecture.mmd`
+
+### `architecture.mmd`
+
+Source Mermaid diagram file. This is the plain-text definition used to generate the PNG.
+
+## Regenerating the Diagram
+
+To regenerate the PNG from the Mermaid source:
+
+```bash
+# Install mermaid-cli if needed
+npm install -g @mermaid-js/mermaid-cli
+
+# Generate PNG
+mmdc -i images/architecture.mmd -o images/architecture.png -w 2400 -H 1600 -b transparent
+```
+
+## Usage
+
+The PNG is embedded in the main [README.md](../README.md) file under the "Architecture" section. It provides a visual overview for developers, contributors, and users to understand how all services interconnect.
+
+## Updating
+
+When the architecture changes:
+
+1. Update the Mermaid diagram in [README.md](../README.md)
+2. Copy the updated diagram to `architecture.mmd`
+3. Regenerate the PNG using the command above
+4. Commit both files to git
+
+---
+
+**Maintained by studio einszwovier**