Diagramm-Galerie

Übersicht über alle verfügbaren Diagramm-Typen.

🎨 Mermaid (Browser-basiert)

Sequenz-Diagramm

sequenceDiagram
    participant User
    participant Nginx
    participant App
    participant DB

    User->>Nginx: HTTPS Request
    Nginx->>App: Forward
    App->>DB: Query
    DB-->>App: Data
    App-->>Nginx: Response
    Nginx-->>User: HTTPS Response

Flow Chart

flowchart TD
    A[Start] --> B{Docker installiert?}
    B -->|Ja| C[Stack deployen]
    B -->|Nein| D[Docker installieren]
    D --> C
    C --> E[Nginx Proxy konfigurieren]
    E --> F[SSL aktivieren]
    F --> G[Fertig!]

📐 PlantUML (via Kroki)

Komponenten-Diagramm

@startuml
package "Frontend" {
  [ProcessWire CMS]
  [MkDocs Docs]
}

package "Backend Services" {
  [Supabase]
  [n8n Automation]
  [Jitsi Meet]
}

database "Databases" {
  [MariaDB]
  [PostgreSQL]
}

[ProcessWire CMS] --> [MariaDB]
[Supabase] --> [PostgreSQL]
[n8n Automation] --> [Supabase]

@enduml

Aktivitäts-Diagramm

@startuml
start
:User öffnet Browser;
:Verbindung zu Nginx;
if (SSL aktiv?) then (ja)
  :HTTPS Verbindung;
else (nein)
  :HTTP Redirect zu HTTPS;
  :HTTPS Verbindung;
endif
:Request an Backend;
:Response an User;
stop
@enduml

🎯 Graphviz (via Kroki)

Netzwerk-Topologie

digraph G {
  rankdir=LR;
  node [shape=box, style=rounded];

  Internet [shape=ellipse];
  Nginx [label="Nginx Proxy\nPort 80/443"];

  PW [label="ProcessWire"];
  Docs [label="MkDocs"];
  SB [label="Supabase"];
  Jitsi [label="Jitsi"];

  DB1 [label="MariaDB", shape=cylinder];
  DB2 [label="PostgreSQL", shape=cylinder];

  Internet -> Nginx;
  Nginx -> PW;
  Nginx -> Docs;
  Nginx -> SB;
  Nginx -> Jitsi;

  PW -> DB1;
  SB -> DB2;
}

📊 BlockDiag (via Kroki)

blockdiag {
  orientation = portrait;

  Internet -> "Nginx Proxy";
  "Nginx Proxy" -> "ProcessWire CMS";
  "Nginx Proxy" -> "MkDocs Docs";
  "Nginx Proxy" -> "Supabase";

  "ProcessWire CMS" -> "MariaDB";
  "Supabase" -> "PostgreSQL";
}

🎨 BPMN (via Kroki)

Deployment Prozess

<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL">
  <process id="deployment">
    <startEvent id="start" name="Start Deployment"/>
    <task id="pull" name="Docker Pull"/>
    <task id="build" name="Docker Build"/>
    <task id="deploy" name="Deploy Stack"/>
    <task id="test" name="Test Services"/>
    <endEvent id="end" name="Deployment Complete"/>

    <sequenceFlow sourceRef="start" targetRef="pull"/>
    <sequenceFlow sourceRef="pull" targetRef="build"/>
    <sequenceFlow sourceRef="build" targetRef="deploy"/>
    <sequenceFlow sourceRef="deploy" targetRef="test"/>
    <sequenceFlow sourceRef="test" targetRef="end"/>
  </process>
</definitions>

---

Tipp: Du kannst Diagramme auch direkt in Excalidraw zeichnen und als SVG exportieren!