Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- wiki:syntax [10.06.2025 10:40] – Michael Wegener
+++ wiki:syntax [02.07.2025 05:40] (aktuell) – Mermaid Plugin Syntax-Dokumentation hinzugefügt Jane Alesi
@@ Zeile 345: / Zeile 345: @@
 ==== Code-Blöcke ====
-<code>
-<code>
-Dies ist vorformatierter Code, alle Leerzeichen bleiben erhalten: wie              <-hier
-</code>
-</code>
 **Ergebnis:**
 <code>
@@ Zeile 772: / Zeile 766: @@
 {{tag>wiki syntax dokuwiki referenz 2024}}
+----
+===== 18. Reveal.js Slideshow Plugin =====
+==== Plugin-Übersicht ====
+Das **Reveal.js Plugin** ermöglicht es, DokuWiki-Seiten in professionelle HTML5-Präsentationen umzuwandeln. Basierend auf dem beliebten Reveal.js Framework von Hakim El Hattab.
+  * **GitHub Repository:** [[https://github.com/neuralyzer/dokuwiki-plugin-revealjs|neuralyzer/dokuwiki-plugin-revealjs]]
+  * **Reveal.js Version:** 3.9.2
+  * **DokuWiki Kompatibilität:** 2024-02-06b "Kaos" und früher
+  * **Lizenz:** MIT (Reveal.js Framework)
+==== Grundlegende Verwendung ====
+=== Präsentation aktivieren ===
+<code>
+~~REVEAL~~
+</code>
+**Ergebnis:** Fügt einen "Präsentation starten" Button ein. **Obligatorisch** für alle Präsentationen.
+=== Theme-Auswahl ===
+<code>
+~~REVEAL white~~
+~~REVEAL theme=sky&transition=convex&controls=1~~
+</code>
+**Verfügbare Themes:**
+  * ''black'', ''white'', ''beige'', ''blood'', ''league'', ''default''
+  * ''moon'', ''night'', ''serif'', ''simple'', ''sky'', ''solarized''
+  * ''dokuwiki'' (solarized mit DokuWiki-Hintergrundfarbe)
+==== Folien-Struktur ====
+=== Header-basierte Folien ===
+<code>
+====== Hauptfolie (H1) ======
+Inhalt der ersten Folie
+===== Horizontale Folie (H2) =====
+Inhalt der zweiten Folie
+==== Vertikale Folie (H3) ====
+Unterfolie (vertikal verschachtelt)
+=== Weitere vertikale Folie ===
+Noch eine Unterfolie
+</code>
+**Folien-Hierarchie:**
+  * **H1 (======):** Hauptfolien (horizontal)
+  * **H2 (=====):** Horizontale Folien
+  * **H3 (====) und tiefer:** Vertikale Folien (verschachtelt)
+=== Konfigurierbare Folien-Ebenen ===
+<code>
+~~REVEAL horizontal_slide_level=1~~
+</code>
+**horizontal_slide_level Optionen:**
+  * ''1'': H1+ horizontal, H2+ vertikal
+  * ''2'': H2+ horizontal, H3+ vertikal (Standard)
+==== Hintergrund-Gestaltung ====
+=== Einfache Hintergründe ===
+<code>
+{{background>red}}
+===== Folie mit rotem Hintergrund =====
+{{background>:wiki:dokuwiki-128.png}}
+===== Folie mit Bild-Hintergrund =====
+</code>
+=== Erweiterte Hintergrund-Optionen ===
+<code>
+{{background>orange wiki:dokuwiki-128.png 10% repeat bg-slide}}
+===== Folie mit komplexem Hintergrund =====
+</code>
+**Hintergrund-Parameter:**
+  * **Farben:** HTML-Farbnamen, Hex (''#ff0000''), RGB, HSL
+  * **Bilder:** DokuWiki-Medien ('':wiki:image.png'') oder URLs
+  * **Größe:** ''10%'', ''250px'', ''auto'', ''contain'', ''cover''
+  * **Position:** ''top'', ''bottom'', ''left'', ''right'', ''center''
+  * **Wiederholung:** ''repeat'' (Standard: no-repeat)
+  * **Übergang:** ''bg-none'', ''bg-fade'', ''bg-slide'', ''bg-convex'', ''bg-concave'', ''bg-zoom''
+==== Alternative Folien-Indikatoren ====
+=== Horizontale Folien ===
+<code>
+---- orange wiki:dokuwiki-128.png 10% repeat bg-slide zoom-in fade-out slow no-footer ---->
+Folien-Inhalt hier
+<----
+</code>
+**Syntax-Elemente:**
+  * ''---->'': Neue horizontale Folie öffnen
+  * ''<----'': Folie schließen
+  * ''---->>'': Vertikaler Folien-Container öffnen
+  * ''<<----'': Vertikalen Container schließen
+=== Parameter für alternative Indikatoren ===
+<code>
+---- salmon wiki:dokuwiki-128.png 10% repeat bg-slide zoom-in fade-out slow no-footer ---->
+</code>
+**Übergangs-Optionen:**
+  * **Folien-Übergang:** ''none'', ''fade'', ''slide'', ''convex'', ''concave'', ''zoom''
+  * **Richtung:** ''-in'', ''-out'' (z.B. ''zoom-in'', ''fade-out'')
+  * **Geschwindigkeit:** ''default'', ''fast'', ''slow''
+==== Fragmente (Schrittweise Anzeige) ====
+=== Inline-Fragmente ===
+<code>
+<fragment>Erscheint zuerst...</fragment>
+<fragment>...dann das hier...</fragment>
+<fragment>...und schließlich das!</fragment>
+</code>
+=== Block-Fragmente ===
+<code>
+<fragment-block>
+==== Überschrift erscheint komplett ====
+  * Listenpunkt 1
+  * Listenpunkt 2
+  * Listenpunkt 3
+</fragment-block>
+</code>
+=== Fragment-Listen ===
+<code>
+<fragment-list>
+  * Punkt 1 (erscheint einzeln)
+  * Punkt 2 (erscheint einzeln)
+  * Punkt 3 (erscheint einzeln)
+</fragment-list>
+<no-fragment-list>
+  * Alle Punkte (erscheinen zusammen)
+  * Auch bei aktivierter build_all_lists Option
+</no-fragment-list>
+</code>
+=== Fragment-Stile und Indizes ===
+<code>
+<fragment style="fade-in" index="1">Erstes Fragment</fragment>
+<fragment style="highlight-red" index="2">Zweites Fragment</fragment>
+</code>
+**Fragment-Stile:**
+  * ''fade-in'', ''fade-out'', ''fade-up'', ''fade-down''
+  * ''zoom-in'', ''zoom-out''
+  * ''highlight-red'', ''highlight-green'', ''highlight-blue''
+  * ''current-visible'', ''semi-fade-out''
+==== Sprecher-Notizen ====
+<code>
+===== Folie-Titel =====
+Sichtbarer Folien-Inhalt
+<notes>
+  * Notiz für den Sprecher
+  * Nur im Sprecher-Modus sichtbar (Taste 's')
+  * Listen sind hier nie inkrementell
+</notes>
+</code>
+**Sprecher-Modus aktivieren:** Taste ''s'' während der Präsentation drücken.
+==== Fußzeilen ====
+=== Globale Fußzeile ===
+<code>
+<wrap footer>
+Firmenlogo oder Copyright-Hinweis
+</wrap>
+====== Erste Folie ======
+Inhalt...
+</code>
+=== Fußzeile für einzelne Folien deaktivieren ===
+<code>
+{{no-footer}}
+===== Folie ohne Fußzeile =====
+{{background>:images:image1.png no-footer}}
+===== Folie mit Hintergrund ohne Fußzeile =====
+---- no-footer ---->
+Alternative Folien-Syntax ohne Fußzeile
+</code>
+==== Konfigurationsoptionen ====
+=== Vollständige Parameter-Syntax ===
+<code>
+~~REVEAL theme=sky&transition=convex&controls=1&show_progress_bar=1&build_all_lists=1&show_image_borders=0&horizontal_slide_level=2&enlarge_vertical_slide_headers=0&show_slide_details=1&open_in_new_window=1&auto_slide=6000&loop=1~~
+</code>
+=== Wichtige Konfigurationsparameter ===
+^ Parameter ^ Werte ^ Beschreibung ^
+| ''theme'' | ''white'', ''black'', ''sky'', etc. | Präsentations-Theme |
+| ''transition'' | ''none'', ''fade'', ''slide'', ''convex'', ''concave'', ''zoom'' | Folien-Übergang |
+| ''controls'' | ''0'', ''1'' | Navigations-Kontrollen anzeigen |
+| ''show_progress_bar'' | ''0'', ''1'' | Fortschrittsbalken anzeigen |
+| ''build_all_lists'' | ''0'', ''1'' | Listen schrittweise aufbauen |
+| ''show_image_borders'' | ''0'', ''1'' | Bild-Rahmen anzeigen |
+| ''horizontal_slide_level'' | ''1'', ''2'' | Header-Ebene für horizontale Folien |
+| ''enlarge_vertical_slide_headers'' | ''0'', ''1'' | Vertikale Folien-Header vergrößern |
+| ''size'' | ''960x700'' | Basis-Foliengröße in Pixeln |
+| ''auto_slide'' | ''0'', ''6000'' | Automatischer Folien-Wechsel (ms) |
+| ''loop'' | ''0'', ''1'' | Präsentation wiederholen |
+==== PDF-Export ====
+=== Export-URL ===
+<code>
+Normale URL:
+http://example.com/doku.php?do=export_revealjs&id=example:page
+PDF-Export URL:
+http://example.com/doku.php?do=export_revealjs&id=example:page&print-pdf
+</code>
+=== Export-Schritte ===
+  - URL mit ''&print-pdf'' Parameter aufrufen
+  - Seite lädt im PDF-Export-Modus
+  - Browser-Druckfunktion verwenden (Strg+P)
+  - Als PDF speichern
+**Empfohlene Browser:** Chrome oder Chromium für beste Ergebnisse.
+==== Best Practices ====
+=== Folien-Design ===
+  * **Wenig Text:** Maximal 6-8 Zeilen pro Folie
+  * **Große Schrift:** Gut lesbar auch von hinten
+  * **Kontrast:** Dunkler Text auf hellem Hintergrund oder umgekehrt
+  * **Bilder optimieren:** Nicht zu große Dateien verwenden
+=== Navigation ===
+  * **Tastatur:** Pfeiltasten für Navigation
+  * **Maus:** Klick für nächste Folie
+  * **Touch:** Wischen auf mobilen Geräten
+  * **Übersicht:** Taste ''Esc'' für Folien-Übersicht
+=== Performance ===
+  * ''%%~~NOCACHE~~%%'' für dynamische Inhalte
+  * Bilder vor Upload komprimieren
+  * Nicht zu viele Fragmente pro Folie
+=== Kompatibilität ===
+  * **Include Plugin:** Siehe Kompatibilitäts-Fix in Plugin-Dokumentation
+  * **MathJax:** Wird automatisch geladen (ignoriert DokuWiki MathJax Plugin)
+  * **Wrap Plugin:** Vollständig kompatibel
+==== Beispiel-Präsentation ====
+<code>
+~~REVEAL white~~
+====== Meine Präsentation ======
+**Untertitel hier**
+Datum und Autor
+===== Agenda =====
+  * Punkt 1
+  * Punkt 2
+  * Punkt 3
+{{background>lightblue}}
+===== Hauptteil =====
+<fragment>Erster wichtiger Punkt</fragment>
+<fragment>Zweiter wichtiger Punkt</fragment>
+<fragment-block>
+==== Detaillierte Informationen ====
+  * Detail A
+  * Detail B
+  * Detail C
+</fragment-block>
+==== Unterfolie ====
+Vertikale Navigation mit Pfeiltasten
+<notes>
+Sprecher-Notizen:
+- Punkt A erwähnen
+- Fragen stellen
+- Auf nächste Folie überleiten
+</notes>
+===== Zusammenfassung =====
+  * Wichtigste Erkenntnisse
+  * Nächste Schritte
+  * Kontakt-Informationen
+===== Vielen Dank! =====
+**Fragen?**
+{{background>:images:company-logo.png}}
+</code>
+==== Fehlerbehebung ====
+=== Häufige Probleme ===
+^ Problem ^ Lösung ^
+| Präsentation startet nicht | ''%%~~REVEAL~~%%'' am Seitenanfang hinzufügen |
+| Folien werden nicht getrennt | Header-Syntax prüfen (====== vs =====) |
+| Hintergrund wird nicht angezeigt | Bild-Pfad und Dateiformat überprüfen |
+| Fragmente funktionieren nicht | Syntax von ''<fragment>'' Tags prüfen |
+| PDF-Export fehlerhaft | Chrome/Chromium Browser verwenden |
+=== Bekannte Einschränkungen ===
+  * **PHP 7.4+ erforderlich:** Ältere Versionen nicht unterstützt
+  * **DokuWiki "Igor" Kompatibilität:** Begrenzte Unterstützung
+  * **Plugin-Konflikte:** Include Plugin benötigt Anpassung
+  * **MathJax:** Verwendet eigene MathJax-Einbindung
+=== Debug-Tipps ===
+  * Browser-Entwicklertools für JavaScript-Fehler
+  * ''%%~~NOCACHE~~%%'' für Konfigurationsänderungen
+  * Plugin-Manager für Aktivierung/Deaktivierung
+  * DokuWiki-Logs für Server-seitige Fehler
+----
+**Das Reveal.js Plugin erweitert DokuWiki um professionelle Präsentationsfähigkeiten. Für detaillierte Informationen und Updates besuchen Sie das [[https://github.com/neuralyzer/dokuwiki-plugin-revealjs|GitHub Repository]].**
+{{tag>reveal.js präsentation slideshow plugin dokuwiki}}
+----
+===== 19. Mermaid Plugin =====
+==== Plugin-Übersicht ====
+Das **Mermaid Plugin** ermöglicht die Erstellung von Diagrammen und Flussdiagrammen mit der JavaScript-basierten Bibliothek [Mermaid](https://mermaid.js.org/). Mermaid rendert Markdown-inspirierte Textdefinitionen zu interaktiven Diagrammen.
+  * **GitHub Repository:** [[https://github.com/RobertWeinmeister/dokuwiki-mermaid|RobertWeinmeister/dokuwiki-mermaid]]
+  * **Mermaid Version:** 11.6.0 (lokal gehostet)
+  * **DokuWiki Kompatibilität:** 2024-02-06b "Kaos" ✅
+  * **PHP Anforderung:** 8.0+ (⚠️ wichtig für Funktionalität)
+  * **Lizenz:** GNU GPL v2.0 (Plugin), MIT (Mermaid.js)
+==== Grundlegende Verwendung ====
+=== Einfaches Diagramm ===
+<code>
+<mermaid>
+  graph TD
+    A[Start] --> B{Entscheidung}
+    B -->|Ja| C[Aktion 1]
+    B -->|Nein| D[Aktion 2]
+    C --> E[Ende]
+    D --> E
+</mermaid>
+</code>
+**Ergebnis:** Rendert ein interaktives Flussdiagramm.
+=== Grundlegende Syntax-Regeln ===
+  * **Container:** Verwenden Sie ''<mermaid>'' und ''</mermaid>'' Tags
+  * **Diagramm-Typ:** Definiert die erste Zeile (z.B. ''graph TD'', ''sequenceDiagram'')
+  * **Knoten:** Definiert mit verschiedenen Formen: ''A[Text]'', ''B(Text)'', ''C{Text}''
+  * **Verbindungen:** Verwenden Sie Pfeile: ''-->'', ''---'', ''-.->''
+==== Unterstützte Diagramm-Typen ====
+=== Flussdiagramme (Flowcharts) ===
+<code>
+<mermaid>
+  flowchart TD
+    A[Rechteck] --> B(Runde Ecken)
+    B --> C{Raute}
+    C -->|Ja| D[Ergebnis 1]
+    C -->|Nein| E[Ergebnis 2]
+    D --> F((Kreis))
+    E --> F
+</mermaid>
+</code>
+**Richtungen:**
+  * ''TD'' oder ''TB'': Top-Down (oben nach unten)
+  * ''BT'': Bottom-Top (unten nach oben)
+  * ''LR'': Left-Right (links nach rechts)
+  * ''RL'': Right-Left (rechts nach links)
+=== Sequenzdiagramme ===
+<code>
+<mermaid>
+  sequenceDiagram
+    participant A as Kunde
+    participant B as Server
+    participant C as Datenbank
+    A->>B: Anfrage senden
+    B->>C: Daten abfragen
+    C-->>B: Daten zurückgeben
+    B-->>A: Antwort senden
+    Note over A,C: Kommunikation beendet
+</mermaid>
+</code>
+**Pfeil-Typen:**
+  * ''A->>B'': Solider Pfeil
+  * ''A-->>B'': Gestrichelter Pfeil
+  * ''A-xB'': Pfeil mit Kreuz
+  * ''A--xB'': Gestrichelter Pfeil mit Kreuz
+=== Gantt-Diagramme ===
+<code>
+<mermaid>
+  gantt
+    title Projektplan
+    dateFormat  YYYY-MM-DD
+    section Planung
+    Anforderungen sammeln :done, des1, 2024-01-01,2024-01-05
+    System-Design        :active, des2, 2024-01-06, 3d
+    section Entwicklung
+    Frontend entwickeln  :2024-01-10, 7d
+    Backend entwickeln   :2024-01-15, 10d
+    section Tests
+    Unit Tests          :2024-01-20, 3d
+    Integration Tests   :2024-01-23, 2d
+</mermaid>
+</code>
+=== Klassendiagramme ===
+<code>
+<mermaid>
+  classDiagram
+    class Fahrzeug {
+      +String marke
+      +String modell
+      +int baujahr
+      +starten()
+      +stoppen()
+    }
+    class Auto {
+      +int anzahlTueren
+      +boolean automatik
+      +fahren()
+    }
+    class Motorrad {
+      +String motortyp
+      +beschleunigen()
+    }
+    Fahrzeug <|-- Auto
+    Fahrzeug <|-- Motorrad
+</mermaid>
+</code>
+=== Git-Graphen ===
+<code>
+<mermaid>
+  gitGraph
+    commit id: "Initial"
+    branch develop
+    checkout develop
+    commit id: "Feature A"
+    commit id: "Feature B"
+    checkout main
+    commit id: "Hotfix"
+    merge develop
+    commit id: "Release"
+</mermaid>
+</code>
+=== User Journey Diagramme ===
+<code>
+<mermaid>
+  journey
+    title Benutzer-Journey: Online-Shopping
+    section Suche
+      Webseite besuchen: 5: Benutzer
+      Produkt suchen: 3: Benutzer
+      Ergebnisse filtern: 4: Benutzer
+    section Kauf
+      Produkt auswählen: 5: Benutzer
+      In Warenkorb legen: 5: Benutzer
+      Checkout: 3: Benutzer
+      Bezahlung: 2: Benutzer
+    section Lieferung
+      Bestellung bestätigen: 5: Benutzer
+      Lieferung verfolgen: 4: Benutzer
+      Produkt erhalten: 5: Benutzer
+</mermaid>
+</code>
+=== Entity-Relationship Diagramme ===
+<code>
+<mermaid>
+  erDiagram
+    KUNDE ||--o{ BESTELLUNG : "erstellt"
+    BESTELLUNG ||--|{ BESTELLPOSITION : "enthält"
+    BESTELLPOSITION }o--|| PRODUKT : "bezieht sich auf"
+    PRODUKT }o--|| KATEGORIE : "gehört zu"
+    KUNDE {
+      int kunde_id
+      string name
+      string email
+      string adresse
+    }
+    BESTELLUNG {
+      int bestellung_id
+      int kunde_id
+      date bestelldatum
+      decimal gesamtbetrag
+    }
+    PRODUKT {
+      int produkt_id
+      string name
+      decimal preis
+      int kategorie_id
+    }
+</mermaid>
+</code>
+=== Tortendiagramme ===
+<code>
+<mermaid>
+  pie title Marktanteile Browser 2024
+    "Chrome" : 65.8
+    "Safari" : 18.8
+    "Edge" : 5.4
+    "Firefox" : 3.2
+    "Andere" : 6.8
+</mermaid>
+</code>
+==== Erweiterte Funktionen ====
+=== Größenanpassung ===
+<code>
+<mermaid 100% 400px>
+  graph TD
+    A[Breite: 100%] --> B[Höhe: 400px]
+</mermaid>
+<mermaid 500px 300px>
+  graph LR
+    C[Breite: 500px] --> D[Höhe: 300px]
+</mermaid>
+</code>
+**Unterstützte Einheiten:**
+  * **Pixel:** ''400px'', ''500px''
+  * **Prozent:** ''100%'', ''50%''
+  * **CSS-Einheiten:** ''10cm'', ''5in'', ''20em''
+=== Raw-Modus ===
+<code>
+<mermaid>
+  raw
+  graph TD
+    A(**mermaid**)-->B((__plugin__))
+    A-->C(((//for//)))
+    B-->D[["[[https://www.dokuwiki.org/dokuwiki|DokuWiki]]"]]
+    C-->D
+</mermaid>
+</code>
+**Raw-Modus Vorteile:**
+  * Keine DokuWiki-Syntax-Verarbeitung
+  * Vollständige Mermaid-Funktionalität verfügbar
+  * Vermeidet Konflikte zwischen DokuWiki und Mermaid-Syntax
+=== DokuWiki-Links in Mermaid ===
+<code>
+<mermaid>
+  graph TD
+    A[Start] --> B["[[wiki:syntax|Syntax-Seite]]"]
+    B --> C["[[namespace:page|Interne Seite]]"]
+    C --> D["[[https://www.dokuwiki.org|Externe Seite]]"]
+</mermaid>
+</code>
+**Link-Syntax-Regeln:**
+  * **Interne Links:** ''[[seitenname|Anzeige-Text]]''
+  * **Externe Links:** ''[[URL|Anzeige-Text]]''
+  * **Anführungszeichen:** Notwendig bei Links in Mermaid-Knoten
+=== Styling und Themes ===
+<code>
+<mermaid>
+  graph TD
+    A[Knoten A] --> B[Knoten B]
+    A --> C[Knoten C]
+    B --> D[Knoten D]
+    C --> D
+    %% Styling-Definitionen
+    classDef wichtig fill:#ff9999,stroke:#333,stroke-width:2px
+    classDef normal fill:#bbdefb,stroke:#333,stroke-width:1px
+    class A,D wichtig
+    class B,C normal
+</mermaid>
+</code>
+**Verfügbare Themes:**
+  * **Standard:** ''default'', ''neutral'', ''dark''
+  * **Erweitert:** ''forest'', ''base'', ''mc-squared''
+==== Diagramm-Export ====
+=== SVG-Export aktivieren ===
+**Administratoren müssen den Save-Button in der Plugin-Konfiguration aktivieren:**
+  - Admin → Konfiguration → Mermaid Plugin
+  - "Visibility of Save Button" auf "sichtbar" setzen
+=== Export-Funktionalität ===
+  - **Maus über Diagramm:** Save-Button erscheint
+  - **SVG-Download:** Klick auf Save-Button startet Download
+  - **Format:** Behält exakte Darstellung bei
+=== Server-seitige Konvertierung ===
+**Lock-Button aktivieren für statische SVG-Einbettung:**
+  - Verhindert client-seitige Konvertierung
+  - Nützlich für PDF-Export (dw2pdf Plugin)
+  - Archivierung von Seiten mit statischen Diagrammen
+==== Bekannte Probleme und Lösungen ====
+=== Klammer-Konflikte ===
+**Problem:** Mermaid und DokuWiki verwenden beide eckige Klammern.
+**Lösung:** Anführungszeichen verwenden:
+<code>
+%% Falsch:
+graph TD
+  A[Link] --> B[[internal:link]]
+%% Richtig:
+graph TD
+  A[Link] --> B["[[internal:link]]"]
+</code>
+=== Click-Events vs. DokuWiki-Links ===
+**Problem:** Mermaid Click-Events kollidieren mit DokuWiki-Links.
+**Schlecht:**
+<code>
+<mermaid>
+  flowchart TD
+    A[Link]
+    click A "https://www.github.com"
+</mermaid>
+</code>
+**Besser:**
+<code>
+<mermaid>
+  flowchart TD
+    A["[[https://www.github.com|Link]]"]
+</mermaid>
+</code>
+=== Such-Highlighting ===
+  * **Problem:** DokuWiki-Suchhervorhebung kann Mermaid-Parsing stören
+  * **Lösung:** Automatisch deaktiviert für Mermaid-Diagramme
+  * **Auswirkung:** Suche funktioniert normal, aber keine Hervorhebung in Diagrammen
+==== Praktische Beispiele ====
+=== Systemarchitektur ===
+<code>
+<mermaid>
+  graph TB
+    subgraph "Frontend"
+      UI[Web-Interface]
+      API[API-Gateway]
+    end
+    subgraph "Backend"
+      AUTH[Authentication]
+      LOGIC[Business Logic]
+      CACHE[Redis Cache]
+    end
+    subgraph "Datenbank"
+      PG[(PostgreSQL)]
+      MONGO[(MongoDB)]
+    end
+    UI --> API
+    API --> AUTH
+    API --> LOGIC
+    LOGIC --> CACHE
+    LOGIC --> PG
+    LOGIC --> MONGO
+</mermaid>
+</code>
+=== Deployment-Pipeline ===
+<code>
+<mermaid>
+  graph LR
+    DEV[Development] --> TEST[Testing]
+    TEST --> STAGE[Staging]
+    STAGE --> PROD[Production]
+    DEV --> |Git Push| BUILD[Build]
+    BUILD --> |Unit Tests| TEST
+    TEST --> |Integration Tests| STAGE
+    STAGE --> |Manual QA| PROD
+    BUILD -.-> |Artifacts| REPO[Artifact Repository]
+    REPO -.-> STAGE
+    REPO -.-> PROD
+</mermaid>
+</code>
+=== Entscheidungsbaum ===
+<code>
+<mermaid>
+  graph TD
+    START[Problem identifiziert] --> CRITICAL{Kritisch?}
+    CRITICAL -->|Ja| IMMEDIATE[Sofortige Maßnahmen]
+    CRITICAL -->|Nein| ANALYZE[Analyse durchführen]
+    ANALYZE --> SOLUTION{Lösung verfügbar?}
+    SOLUTION -->|Ja| IMPLEMENT[Implementierung]
+    SOLUTION -->|Nein| RESEARCH[Weitere Recherche]
+    IMMEDIATE --> DOCUMENT[Dokumentation]
+    IMPLEMENT --> DOCUMENT
+    RESEARCH --> ANALYZE
+    DOCUMENT --> REVIEW[Review & Feedback]
+    REVIEW --> CLOSE[Abschluss]
+</mermaid>
+</code>
+==== Konfiguration ====
+=== Admin-Einstellungen ===
+**Zugang:** Admin → Konfiguration → Mermaid Plugin
+^ Einstellung ^ Optionen ^ Beschreibung ^
+| **Version/Ort** | Lokal (11.6.0), Remote (latest), Spezifische Version | Mermaid-Version auswählen |
+| **Standard-Theme** | default, neutral, dark, forest, base, mc-squared | Globales Theme |
+| **Standard-Look** | classic, handDrawn, rough | Darstellungsstil |
+| **Log-Level** | fatal, error, warn, info, debug | Debug-Informationen |
+| **Save-Button** | Sichtbar, Verborgen | SVG-Export-Funktionalität |
+| **Lock-Button** | Sichtbar, Verborgen | Server-seitige Konvertierung |
+=== Entwickler-Einstellungen ===
+**Debug-Modus aktivieren:**
+  - Log-Level auf "debug" setzen
+  - Browser-Entwicklertools öffnen
+  - Konsole auf Mermaid-Fehler prüfen
+==== Best Practices ====
+=== Performance ===
+  * **Einfache Diagramme:** Bessere Ladezeiten
+  * **Komplexe Diagramme:** In Unterdiagramme aufteilen
+  * **Lokale Version:** Schneller als Remote-Version
+  * **Cache nutzen:** Vermeiden Sie ''%%~~NOCACHE~~%%'' wenn möglich
+=== Wartbarkeit ===
+  * **Kommentare:** Verwenden Sie ''%%'' für Kommentare
+  * **Struktur:** Logische Gruppierung mit ''subgraph''
+  * **Benennung:** Sprechende Knotennamen verwenden
+  * **Dokumentation:** Diagramm-Zweck beschreiben
+=== Zugänglichkeit ===
+  * **Alt-Text:** Textuelle Beschreibung für komplexe Diagramme
+  * **Kontrast:** Ausreichender Farbkontrast
+  * **Größe:** Angemessene Diagrammgröße für Lesbarkeit
+==== Fehlerbehebung ====
+=== Häufige Probleme ===
+^ Problem ^ Ursache ^ Lösung ^
+| Diagramm wird nicht gerendert | PHP < 8.0 | PHP-Version upgraden |
+| Syntax-Fehler | Ungültige Mermaid-Syntax | Syntax in Mermaid Live Editor testen |
+| DokuWiki-Konflikte | Klammer-Probleme | Raw-Modus oder Anführungszeichen verwenden |
+| Performance-Probleme | Zu komplexe Diagramme | Diagramm vereinfachen oder aufteilen |
+| Export funktioniert nicht | Save-Button nicht aktiviert | Admin-Konfiguration prüfen |
+=== Debug-Strategien ===
+  - **Mermaid Live Editor:** [[https://mermaid.live/|mermaid.live]] zum Testen
+  - **Browser-Konsole:** JavaScript-Fehler prüfen
+  - **Schrittweise Entwicklung:** Komplexe Diagramme Schritt für Schritt aufbauen
+  - **Raw-Modus:** Bei Syntax-Konflikten verwenden
+==== Changelog ====
+=== Aktuelle Version (11.6) ===
+  * **2025-06-04:** Mermaid 11.6.0 Support
+  * **2025-03-23:** Mermaid 11.5.0, Theme/Look-Konfiguration
+  * **2024-10-15:** Mermaid 11.2.0, SVG-Export, Lock-Funktionalität
+  * **2024-02-15:** Mermaid 10.8.0, Standard-Theme-Einstellung
+=== Kompatibilität ===
+  * **DokuWiki:** 2024-02-06b "Kaos" ✅
+  * **PHP:** 8.0+ erforderlich ⚠️
+  * **Browser:** Alle modernen Browser
+  * **Plugins:** Konflikt mit flowcharts Plugin
+----
+**Das Mermaid Plugin erweitert DokuWiki um professionelle Diagramm-Funktionalität. Für Updates und Probleme besuchen Sie das [[https://github.com/RobertWeinmeister/dokuwiki-mermaid|GitHub Repository]].**
+{{tag>mermaid diagramm flowchart sequenz gantt plugin dokuwiki}}