124-webapp/images

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:

# 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 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
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