wiki:syntax

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
wiki:syntax [10.06.2025 10:32] – Die DokuWiki-Syntaxreferenz wurde vollständig überarbeitet und um 25+ Plugin-spezifische Syntaxelemente (AddNewPage, BPMN.io, Bureaucracy, Color, DataTables, Icons, Struct, Tag, ToDo, VShare, Wrap etc.), erweiterte Formatierungsoptionen, spezifische Fehle Michael Wegenerwiki:syntax [02.07.2025 05:40] (aktuell) – Mermaid Plugin Syntax-Dokumentation hinzugefügt Jane Alesi
Zeile 28: Zeile 28:
 <code> <code>
 Sie können <sub>tiefgestellt</sub> und <sup>hochgestellt</sup> verwenden. Sie können <sub>tiefgestellt</sub> und <sup>hochgestellt</sup> verwenden.
 +Beispiel: H<sub>2</sub>O und E=mc<sup>2</sup>
 </code> </code>
  
-**Ergebnis:** Sie können <sub>tiefgestellt</sub> und <sup>hochgestellt</sup> verwenden.+**Ergebnis:** Sie können <sub>tiefgestellt</sub> und <sup>hochgestellt</sup> verwenden.\\ 
 +Beispiel: H<sub>2</sub>O und E=mc<sup>2</sup>
  
 ==== Durchgestrichener Text ==== ==== Durchgestrichener Text ====
Zeile 45: Zeile 47:
 oder gefolgt von\\ einem Leerzeichen erkannt werden \\dies passiert ohne. oder gefolgt von\\ einem Leerzeichen erkannt werden \\dies passiert ohne.
 </code> </code>
 +
 +**Ergebnis:**\\
 +Dies ist Text mit Zeilenumbrüchen\\
 +Beachten Sie, dass die zwei Backslashes nur am Zeilenende\\
 +oder gefolgt von\\ einem Leerzeichen erkannt werden \\dies passiert ohne.
  
 **Wichtig:** Verwenden Sie erzwungene Zeilenumbrüche nur wenn wirklich nötig. **Wichtig:** Verwenden Sie erzwungene Zeilenumbrüche nur wenn wirklich nötig.
Zeile 60: Zeile 67:
 == Ebene 5 == == Ebene 5 ==
 </code> </code>
 +
 +**Ergebnis:**
 +====== Ebene 1 (Hauptüberschrift) ======
 +===== Ebene 2 =====
 +==== Ebene 3 ====
 +=== Ebene 4 ===
 +== Ebene 5 ==
  
 ==== Automatisches Inhaltsverzeichnis ==== ==== Automatisches Inhaltsverzeichnis ====
Zeile 69: Zeile 83:
 ---- ----
 </code> </code>
 +
 +**Ergebnis:**
 +----
 +
 Vier oder mehr Bindestriche erzeugen eine horizontale Linie. Vier oder mehr Bindestriche erzeugen eine horizontale Linie.
  
Zeile 82: Zeile 100:
 <andi@splitbrain.org> <andi@splitbrain.org>
 </code> </code>
 +
 +**Ergebnis:**\\
 +http://www.google.com\\
 +[[http://www.google.com]]\\
 +[[http://www.google.com|Dieser Link führt zu Google]]\\
 +<andi@splitbrain.org>
  
 ==== Interne Links ==== ==== Interne Links ====
Zeile 90: Zeile 114:
 [[syntax#internal|Zu diesem Abschnitt]] [[syntax#internal|Zu diesem Abschnitt]]
 </code> </code>
 +
 +**Ergebnis:**\\
 +[[seitenname]]\\
 +[[seitenname|Link-Text]]\\
 +[[namespace:seitenname]]\\
 +[[syntax#internal|Zu diesem Abschnitt]]
  
 ==== Interwiki-Links ==== ==== Interwiki-Links ====
Zeile 96: Zeile 126:
 [[wp>Wiki]] [[wp>Wiki]]
 </code> </code>
 +
 +**Ergebnis:**\\
 +[[doku>Interwiki]]\\
 +[[wp>Wiki]]
  
 ==== Windows-Freigaben ==== ==== Windows-Freigaben ====
Zeile 101: Zeile 135:
 [[\\server\freigabe|Diese Freigabe]] [[\\server\freigabe|Diese Freigabe]]
 </code> </code>
 +
 +**Ergebnis:**\\
 +[[\\server\freigabe|Diese Freigabe]]
  
 ==== Bild-Links ==== ==== Bild-Links ====
Zeile 106: Zeile 143:
 [[http://php.net|{{wiki:dokuwiki-128.png}}]] [[http://php.net|{{wiki:dokuwiki-128.png}}]]
 </code> </code>
 +
 +**Ergebnis:**\\
 +[[http://php.net|{{wiki:dokuwiki-128.png}}]]
  
 ---- ----
Zeile 118: Zeile 158:
 {{https://www.php.net/images/php.gif?200x50}} // Externes Bild {{https://www.php.net/images/php.gif?200x50}} // Externes Bild
 </code> </code>
 +
 +**Ergebnis:**\\
 +{{wiki:dokuwiki-128.png}}\\
 +{{wiki:dokuwiki-128.png?50}}\\
 +{{wiki:dokuwiki-128.png?200x50}}\\
 +{{https://www.php.net/images/php.gif?200x50}}
  
 ==== Bildausrichtung ==== ==== Bildausrichtung ====
Zeile 125: Zeile 171:
 {{ wiki:dokuwiki-128.png }}   // Zentriert {{ wiki:dokuwiki-128.png }}   // Zentriert
 </code> </code>
 +
 +**Ergebnis:**
 +
 +{{ wiki:dokuwiki-128.png}}
 +
 +{{wiki:dokuwiki-128.png }}
 +
 +{{ wiki:dokuwiki-128.png }}
  
 ==== Bildtitel und Alt-Text ==== ==== Bildtitel und Alt-Text ====
Zeile 130: Zeile 184:
 {{ wiki:dokuwiki-128.png |Dies ist die Bildunterschrift}} {{ wiki:dokuwiki-128.png |Dies ist die Bildunterschrift}}
 </code> </code>
 +
 +**Ergebnis:**\\
 +{{ wiki:dokuwiki-128.png |Dies ist die Bildunterschrift}}
  
 ==== Unterstützte Medienformate ==== ==== Unterstützte Medienformate ====
Zeile 143: Zeile 200:
 {{wiki:dokuwiki-128.png?linkonly}} {{wiki:dokuwiki-128.png?linkonly}}
 </code> </code>
 +
 +**Ergebnis:**\\
 +{{wiki:dokuwiki-128.png?linkonly}}
  
 ==== Fallback-Formate für Videos ==== ==== Fallback-Formate für Videos ====
Zeile 159: Zeile 219:
   * Ein weiterer Punkt   * Ein weiterer Punkt
 </code> </code>
 +
 +**Ergebnis:**
 +  * Dies ist eine Liste
 +  * Der zweite Punkt
 +    * Sie können verschiedene Ebenen haben
 +    * Noch ein Unterpunkt
 +  * Ein weiterer Punkt
  
 ==== Geordnete Listen ==== ==== Geordnete Listen ====
Zeile 168: Zeile 235:
   - Zurück zur ersten Ebene   - Zurück zur ersten Ebene
 </code> </code>
 +
 +**Ergebnis:**
 +  - Die gleiche Liste, aber nummeriert
 +  - Ein weiterer Punkt
 +    - Verwenden Sie Einrückung für tiefere Ebenen
 +    - Das war's
 +  - Zurück zur ersten Ebene
  
 ==== Gemischte Listen ==== ==== Gemischte Listen ====
Zeile 176: Zeile 250:
   * Zurück zu ungeordnet   * Zurück zu ungeordnet
 </code> </code>
 +
 +**Ergebnis:**
 +  * Ungeordnet
 +    - Geordnet
 +    - Noch einer
 +  * Zurück zu ungeordnet
  
 ---- ----
Zeile 187: Zeile 267:
 | Zeile 2 Sp 1  | Zeile 2 Sp 2  | Zeile 2 Sp 3  | | Zeile 2 Sp 1  | Zeile 2 Sp 2  | Zeile 2 Sp 3  |
 </code> </code>
 +
 +**Ergebnis:**
 +^ Überschrift 1 ^ Überschrift 2 ^ Überschrift 3 ^
 +| Zeile 1 Sp 1  | Zeile 1 Sp 2  | Zeile 1 Sp 3  |
 +| Zeile 2 Sp 1  | Zeile 2 Sp 2  | Zeile 2 Sp 3  |
  
 ==== Colspan (Zellen horizontal verbinden) ==== ==== Colspan (Zellen horizontal verbinden) ====
Zeile 195: Zeile 280:
 | Zeile 3 Sp 1  | Zeile 3 Sp 2  | Zeile 3 Sp 3  | | Zeile 3 Sp 1  | Zeile 3 Sp 2  | Zeile 3 Sp 3  |
 </code> </code>
 +
 +**Ergebnis:**
 +^ Überschrift 1 ^ Überschrift 2 ^ Überschrift 3 ^
 +| Zeile 1 Sp 1  | Zeile 1 Sp 2  | Zeile 1 Sp 3  |
 +| Zeile 2 Sp 1  | ein colspan (beachten Sie die doppelte Pipe) ||
 +| Zeile 3 Sp 1  | Zeile 3 Sp 2  | Zeile 3 Sp 3  |
  
 ==== Vertikale Überschriften ==== ==== Vertikale Überschriften ====
Zeile 202: Zeile 293:
 ^ Überschrift 4 | Zeile 2 Sp 2  | Zeile 2 Sp 3  | ^ Überschrift 4 | Zeile 2 Sp 2  | Zeile 2 Sp 3  |
 </code> </code>
 +
 +**Ergebnis:**
 +|              ^ Überschrift 1  ^ Überschrift 2  ^
 +^ Überschrift 3 | Zeile 1 Sp 2  | Zeile 1 Sp 3  |
 +^ Überschrift 4 | Zeile 2 Sp 2  | Zeile 2 Sp 3  |
  
 ==== Rowspan (Zellen vertikal verbinden) ==== ==== Rowspan (Zellen vertikal verbinden) ====
Zeile 210: Zeile 306:
 | Zeile 3 Sp 1  | :::                                 | Zeile 3 Sp 3 | | Zeile 3 Sp 1  | :::                                 | Zeile 3 Sp 3 |
 </code> </code>
 +
 +**Ergebnis:**
 +^ Überschrift 1 ^ Überschrift 2                ^ Überschrift 3 ^
 +| Zeile 1 Sp 1  | diese Zelle erstreckt sich vertikal | Zeile 1 Sp 3 |
 +| Zeile 2 Sp 1  | :::                                 | Zeile 2 Sp 3 |
 +| Zeile 3 Sp 1  | :::                                 | Zeile 3 Sp 3 |
  
 ==== Tabellenausrichtung ==== ==== Tabellenausrichtung ====
Zeile 218: Zeile 320:
 | xxxxxxxxxxxx | xxxxxxxxxxxx | xxxxxxxxxxxx | | xxxxxxxxxxxx | xxxxxxxxxxxx | xxxxxxxxxxxx |
 </code> </code>
 +
 +**Ergebnis:**
 +^           Tabelle mit Ausrichtung           ^^^
 +|        rechts|    zentriert    |links          |
 +|links          |        rechts|    zentriert    |
 +| xxxxxxxxxxxx | xxxxxxxxxxxx | xxxxxxxxxxxx |
  
 **Ausrichtungsregeln:** **Ausrichtungsregeln:**
Zeile 232: Zeile 340:
 Dies ist ''monospace'' Text. Dies ist ''monospace'' Text.
 </code> </code>
 +
 +**Ergebnis:**\\
 +Dies ist ''monospace'' Text.
  
 ==== Code-Blöcke ==== ==== Code-Blöcke ====
-<code>+**Ergebnis:**
 <code> <code>
 Dies ist vorformatierter Code, alle Leerzeichen bleiben erhalten: wie              <-hier Dies ist vorformatierter Code, alle Leerzeichen bleiben erhalten: wie              <-hier
-</code> 
 </code> </code>
  
Zeile 246: Zeile 356:
 </file> </file>
 </code> </code>
 +
 +**Ergebnis:**
 +<file>
 +Dies ist ziemlich dasselbe, aber Sie könnten es verwenden, um zu zeigen, dass Sie eine Datei zitiert haben.
 +</file>
  
 ==== Syntax-Highlighting ==== ==== Syntax-Highlighting ====
Zeile 260: Zeile 375:
 } }
 </code> </code>
 +</code>
 +
 +**Ergebnis:**
 +<code java>
 +/**
 + * Die HelloWorldApp-Klasse implementiert eine Anwendung, die
 + * einfach "Hello World!" zur Standardausgabe anzeigt.
 + */
 +class HelloWorldApp {
 +    public static void main(String[] args) {
 +        System.out.println("Hello World!"); //Zeigt den String an.
 +    }
 +}
 </code> </code>
  
Zeile 271: Zeile 399:
 </file> </file>
 </code> </code>
 +
 +**Ergebnis:**
 +<file php myexample.php>
 +<?php echo "hello world!"; ?>
 +</file>
  
 ==== Code ohne Highlighting ==== ==== Code ohne Highlighting ====
Zeile 277: Zeile 410:
 Kein Syntax-Highlighting, aber herunterladbar Kein Syntax-Highlighting, aber herunterladbar
 </code> </code>
 +</code>
 +
 +**Ergebnis:**
 +<code - myfile.foo>
 +Kein Syntax-Highlighting, aber herunterladbar
 </code> </code>
  
Zeile 289: Zeile 427:
 </nowiki> </nowiki>
 </code> </code>
 +
 +**Ergebnis:**
 +<nowiki>
 +Dies ist Text, der Adressen wie diese enthält: http://www.splitbrain.org und **Formatierung**, aber nichts wird damit gemacht.
 +</nowiki>
  
 ==== Prozent-Zeichen ==== ==== Prozent-Zeichen ====
Zeile 294: Zeile 437:
 Das Gleiche gilt für %%//__dieser__ Text// mit einem Smiley ;-)%%. Das Gleiche gilt für %%//__dieser__ Text// mit einem Smiley ;-)%%.
 </code> </code>
 +
 +**Ergebnis:**\\
 +Das Gleiche gilt für %%//__dieser__ Text// mit einem Smiley ;-)%%.
  
 ---- ----
Zeile 344: Zeile 490:
 DokuWiki konvertiert häufig verwendete Emoticons in ihre grafischen Entsprechungen: DokuWiki konvertiert häufig verwendete Emoticons in ihre grafischen Entsprechungen:
  
-  * ''8-)'' → 8-) (cool) +<code> 
-  * ''8-O'' → 8-O (eek) +8-) 8-O :-( :-) =) :-/ :-\ :-? :-D :-P :-O :-X :-| ;-) ^_^ m( :?: :!: LOL FIXME DELETEME 
-  * '':-('' → :-( (sad) +</code> 
-  * '':-)'' → :-) (smile) + 
-  * ''=)'' → =) (smile2) +**Ergebnis:**\\ 
-  * '':-/'' → :-/ (doubt) +8-) 8-O :-( :-) =) :-/ :-\ :-? :-D :-P :-O :-X :-| ;-) ^_^ m( :?: :!: LOL FIXME DELETEME
-  * '':-\'' → :-\ (doubt2) +
-  * '':-?'' → :-? (confused) +
-  * '':-D'' → :-D (biggrin) +
-  * '':-P'' → :-P (razz) +
-  * '':-O'' → :-O (surprised) +
-  * '':-X'' → :-X (silenced) +
-  * '':-|'' → :-| (neutral) +
-  * '';-)'' → ;-) (wink) +
-  * ''^_^'' → ^_^ (fun) +
-  * ''m('' → m( (facepalm) +
-  * '':?:'' → :?: (question) +
-  * '':!:'' → :!: (exclaim) +
-  * ''LOL'' → LOL (lol) +
-  * ''FIXME'' → FIXME (fixme) +
-  * ''DELETEME'' → DELETEME (deleteme)+
  
 ==== Typografische Konvertierungen ==== ==== Typografische Konvertierungen ====
Zeile 383: Zeile 514:
 {{rss>http://slashdot.org/index.rss 5 author date 1h}} {{rss>http://slashdot.org/index.rss 5 author date 1h}}
 </code> </code>
 +
 +**Ergebnis:**\\
 +{{rss>http://slashdot.org/index.rss 5 author date 1h}}
  
 **Parameter:** **Parameter:**
Zeile 401: Zeile 535:
 ~~NOTOC~~ ~~NOTOC~~
 </code> </code>
-Verhindert die automatische Erstellung eines Inhaltsverzeichnisses.+ 
 +**Ergebnis:** Verhindert die automatische Erstellung eines Inhaltsverzeichnisses.
  
 ==== NOCACHE - Cache deaktivieren ==== ==== NOCACHE - Cache deaktivieren ====
Zeile 407: Zeile 542:
 ~~NOCACHE~~ ~~NOCACHE~~
 </code> </code>
-Zwingt DokuWiki, die Seite bei jedem Aufruf neu zu rendern.+ 
 +**Ergebnis:** Zwingt DokuWiki, die Seite bei jedem Aufruf neu zu rendern.
  
 ---- ----
Zeile 421: Zeile 557:
 {{NEWPAGE>namespace?label=Benutzerdefiniertes Label}} {{NEWPAGE>namespace?label=Benutzerdefiniertes Label}}
 </code> </code>
 +
 +**Ergebnis:**\\
 +{{NEWPAGE}}\\
 +{{NEWPAGE>namespace}}\\
 +{{NEWPAGE>namespace?label=Benutzerdefiniertes Label}}
  
 ==== BPMN.io Plugin ==== ==== BPMN.io Plugin ====
Zeile 428: Zeile 569:
 </bpmnio> </bpmnio>
 </code> </code>
 +
 +**Ergebnis:** Rendert BPMN-Diagramme basierend auf dem bereitgestellten XML-Inhalt.
  
 ==== Bureaucracy Plugin ==== ==== Bureaucracy Plugin ====
Zeile 442: Zeile 585:
 </form> </form>
 </code> </code>
 +
 +**Ergebnis:** Erstellt ein funktionsfähiges Formular mit E-Mail-Versand.
  
 ==== Color Plugin ==== ==== Color Plugin ====
Zeile 449: Zeile 594:
 <color #FF0000>roter Text</color> <color #FF0000>roter Text</color>
 </code> </code>
 +
 +**Ergebnis:**\\
 +<color green>grüner Text</color>\\
 +<color blue/lightgrey>blauer Text auf hellgrauem Hintergrund</color>\\
 +<color #FF0000>roter Text</color>
  
 ==== DataTables Plugin ==== ==== DataTables Plugin ====
Zeile 458: Zeile 608:
 </datatables> </datatables>
 </code> </code>
 +
 +**Ergebnis:** Erstellt eine interaktive Tabelle mit Sortier-, Filter- und Suchfunktionen.
  
 ==== Icons Plugin ==== ==== Icons Plugin ====
Zeile 465: Zeile 617:
 {{glyphicon>user?24}} {{glyphicon>user?24}}
 </code> </code>
 +
 +**Ergebnis:**\\
 +{{icon>home}}\\
 +{{fa>home|Startseite}}\\
 +{{glyphicon>user?24}}
  
 ==== Struct Plugin ==== ==== Struct Plugin ====
Zeile 474: Zeile 631:
 ---- ----
 </code> </code>
 +
 +**Ergebnis:** Speichert strukturierte Daten, die später abgefragt werden können.
  
 ==== Tag Plugin ==== ==== Tag Plugin ====
Zeile 481: Zeile 640:
 {{count>+}} {{count>+}}
 </code> </code>
 +
 +**Ergebnis:**\\
 +{{tag>tag1 tag2 tag3}}\\
 +{{topic>tag1 -tag2}}\\
 +{{count>+}}
  
 ==== ToDo Plugin ==== ==== ToDo Plugin ====
Zeile 488: Zeile 652:
 <todo @benutzer>Aufgabe für Benutzer</todo> <todo @benutzer>Aufgabe für Benutzer</todo>
 </code> </code>
 +
 +**Ergebnis:**\\
 +<todo>Titel der Aufgabe</todo>\\
 +<todo #>Erledigte Aufgabe</todo>\\
 +<todo @benutzer>Aufgabe für Benutzer</todo>
  
 ==== VShare Plugin ==== ==== VShare Plugin ====
Zeile 495: Zeile 664:
 {{youtube>L-WM8YxwqEU?large}} {{youtube>L-WM8YxwqEU?large}}
 </code> </code>
 +
 +**Ergebnis:** Bettet Videos von YouTube, Vimeo und anderen Plattformen ein.
  
 ==== Wrap Plugin ==== ==== Wrap Plugin ====
Zeile 504: Zeile 675:
 <wrap classes #id width :language>"kleiner" Inhalt</wrap> <wrap classes #id width :language>"kleiner" Inhalt</wrap>
 </code> </code>
 +
 +**Ergebnis:** Erstellt Container mit CSS-Klassen für erweiterte Formatierung.
  
 ---- ----
Zeile 570: Zeile 743:
 Dies verlinkt zu [[syntax#internal|diesem Abschnitt]]. Dies verlinkt zu [[syntax#internal|diesem Abschnitt]].
 </code> </code>
 +
 +**Ergebnis:**\\
 +Dies verlinkt zu [[syntax#internal|diesem Abschnitt]].
  
 ==== Namespaces ==== ==== Namespaces ====
Zeile 575: Zeile 751:
 [[some:namespaces]] [[some:namespaces]]
 </code> </code>
 +
 +**Ergebnis:**\\
 +[[some:namespaces]]
 +
 Verwenden Sie Doppelpunkte, um Namespaces zu erstellen. Verwenden Sie Doppelpunkte, um Namespaces zu erstellen.
  
Zeile 586: Zeile 766:
 {{tag>wiki syntax dokuwiki referenz 2024}} {{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}}
  • wiki/syntax.1749544345.txt.gz
  • Zuletzt geändert: 10.06.2025 10:32
  • von Michael Wegener