Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- wiki:syntax [13.06.2025 13:31] – Reveal.js Plugin Dokumentation hinzugefügt - Vollständige Syntax-Referenz mit Best Practices Jane Alesi
+++ wiki:syntax [02.07.2025 05:40] (aktuell) – Mermaid Plugin Syntax-Dokumentation hinzugefügt Jane Alesi
@@ Zeile 1111: / Zeile 1111: @@
 {{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}}