wiki:syntax

Umfassende DokuWiki-Syntaxreferenz für wiki.satware.com

Basierend auf DokuWiki 2024-02-06b "Kaos" Release

Systemkonfiguration

  • DokuWiki Version: 2024-02-06b "Kaos"
  • Template: Bootstrap3 v2024-02-06 (hotfix/20241008)
  • Installierte Plugins: 25+ aktive Erweiterungen
  • PHP-Kompatibilität: 7.4 bis 8.1

1. Grundlegende Textformatierung

Textauszeichnung

DokuWiki unterstützt **fett**, //kursiv//, __unterstrichen__ und ''monospace'' Text.
Natürlich können Sie **__//''alles kombinieren''//__**.

Ergebnis:
DokuWiki unterstützt fett, kursiv, unterstrichen und monospace Text.
Natürlich können Sie alles kombinieren.

Hoch- und Tiefstellung

Sie können <sub>tiefgestellt</sub> und <sup>hochgestellt</sup> verwenden.
Beispiel: H<sub>2</sub>O und E=mc<sup>2</sup>

Ergebnis: Sie können tiefgestellt und hochgestellt verwenden.
Beispiel: H2O und E=mc2

Durchgestrichener Text

Sie können etwas als <del>gelöscht</del> markieren.

Ergebnis: Sie können etwas als gelöscht markieren.

Zeilenumbrüche und Absätze

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.

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.

2. Überschriften und Gliederung

Überschriftenebenen

====== Ebene 1 (Hauptüberschrift) ======
===== Ebene 2 =====
==== Ebene 3 ====
=== Ebene 4 ===
== Ebene 5 ==

Ergebnis:

Ebene 1 (Hauptüberschrift)

Ebene 2

Ebene 3

Ebene 4

Ebene 5

Automatisches Inhaltsverzeichnis

  • Wird automatisch bei mehr als 3 Überschriften erstellt
  • Deaktivierung mit ~~NOTOC~~

Horizontale Linie

----

Ergebnis:

Vier oder mehr Bindestriche erzeugen eine horizontale Linie.

3. Links

Externe Links

http://www.google.com
[[http://www.google.com]]
[[http://www.google.com|Dieser Link führt zu Google]]
<andi@splitbrain.org>

Ergebnis:
http://www.google.com
http://www.google.com
Dieser Link führt zu Google
andi [at] splitbrain [dot] org

Interne Links

[[seitenname]]
[[seitenname|Link-Text]]
[[namespace:seitenname]]
[[syntax#internal|Zu diesem Abschnitt]]

Ergebnis:
seitenname
Link-Text
seitenname
Zu diesem Abschnitt

Interwiki-Links

[[doku>Interwiki]]
[[wp>Wiki]]

Ergebnis:
Interwiki
Wiki

Windows-Freigaben

[[\\server\freigabe|Diese Freigabe]]

Ergebnis:
Diese Freigabe

Bild-Links

[[http://php.net|{{wiki:dokuwiki-128.png}}]]

Ergebnis:

4. Bilder und Medien

Grundlegende Bildsyntax

{{wiki:dokuwiki-128.png}}                    // Originalgröße
{{wiki:dokuwiki-128.png?50}}                 // Breite: 50px
{{wiki:dokuwiki-128.png?200x50}}             // Breite x Höhe
{{https://www.php.net/images/php.gif?200x50}} // Externes Bild

Ergebnis:



Bildausrichtung

{{ wiki:dokuwiki-128.png}}    // Rechtsbündig
{{wiki:dokuwiki-128.png }}    // Linksbündig
{{ wiki:dokuwiki-128.png }}   // Zentriert

Ergebnis:

Bildtitel und Alt-Text

{{ wiki:dokuwiki-128.png |Dies ist die Bildunterschrift}}

Ergebnis:
Dies ist die Bildunterschrift

Unterstützte Medienformate

Typ Formate
Bilder gif, jpg, png, svg
Video webm, ogv, mp4
Audio ogg, mp3, wav
Flash swf

Nur-Link zu Medien

{{wiki:dokuwiki-128.png?linkonly}}

Ergebnis:
dokuwiki-128.png

Fallback-Formate für Videos

Laden Sie mehrere Formate hoch (z.B. video.mp4, video.webm, video.ogv) für maximale Browser-Kompatibilität.

5. Listen

Ungeordnete Listen

  * Dies ist eine Liste
  * Der zweite Punkt
    * Sie können verschiedene Ebenen haben
    * Noch ein Unterpunkt
  * Ein weiterer Punkt

Ergebnis:

  • Dies ist eine Liste
  • Der zweite Punkt
    • Sie können verschiedene Ebenen haben
    • Noch ein Unterpunkt
  • Ein weiterer Punkt

Geordnete Listen

  - Die gleiche Liste, aber nummeriert
  - Ein weiterer Punkt
    - Verwenden Sie Einrückung für tiefere Ebenen
    - Das war's
  - Zurück zur ersten Ebene

Ergebnis:

  1. Die gleiche Liste, aber nummeriert
  2. Ein weiterer Punkt
    1. Verwenden Sie Einrückung für tiefere Ebenen
    2. Das war's
  3. Zurück zur ersten Ebene

Gemischte Listen

  * Ungeordnet
    - Geordnet
    - Noch einer
  * Zurück zu ungeordnet

Ergebnis:

  • Ungeordnet
    1. Geordnet
    2. Noch einer
  • Zurück zu ungeordnet

6. Tabellen

Grundlegende Tabellensyntax

^ Ü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  |

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)

^ Ü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  |

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

|              ^ Überschrift 1  ^ Überschrift 2  ^
^ Überschrift 3 | Zeile 1 Sp 2  | Zeile 1 Sp 3  |
^ Überschrift 4 | Zeile 2 Sp 2  | Zeile 2 Sp 3  |

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)

^ Ü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 |

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

^           Tabelle mit Ausrichtung           ^^^
|        rechts|    zentriert    |links          |
|links          |        rechts|    zentriert    |
| xxxxxxxxxxxx | xxxxxxxxxxxx | xxxxxxxxxxxx |

Ergebnis:

Tabelle mit Ausrichtung
rechts zentriert links
links rechts zentriert
xxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx

Ausrichtungsregeln:

  • Rechtsbündig: Mindestens 2 Leerzeichen links
  • Linksbündig: Mindestens 2 Leerzeichen rechts
  • Zentriert: Mindestens 2 Leerzeichen auf beiden Seiten

7. Code und Formatierung

Inline-Code

Dies ist ''monospace'' Text.

Ergebnis:
Dies ist monospace Text.

Code-Blöcke

Ergebnis: 

Dies ist vorformatierter Code, alle Leerzeichen bleiben erhalten: wie              <-hier

Datei-Blöcke

<file>
Dies ist ziemlich dasselbe, aber Sie könnten es verwenden, um zu zeigen, dass Sie eine Datei zitiert haben.
</file>

Ergebnis: 

Dies ist ziemlich dasselbe, aber Sie könnten es verwenden, um zu zeigen, dass Sie eine Datei zitiert haben.

Syntax-Highlighting

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

Ergebnis: 

/**
 * 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.
    }
}

Unterstützte Sprachen für Syntax-Highlighting

4cs, 6502acme, 6502kickass, 6502tasm, 68000devpac, abap, actionscript3, actionscript, ada, aimms, algol68, apache, applescript, apt_sources, arm, asm, asp, asymptote, autoconf, autohotkey, autoit, avisynth, awk, bascomavr, bash, basic4gl, batch, bf, biblatex, bibtex, blitzbasic, bnf, boo, caddcl, cadlisp, ceylon, cfdg, cfm, chaiscript, chapel, cil, c_loadrunner, clojure, c_mac, cmake, cobol, coffeescript, c, cpp, cpp-qt, cpp-winapi, csharp, css, cuesheet, c_winapi, dart, dcl, dcpu16, dcs, delphi, diff, div, dos, dot, d, ecmascript, eiffel, email, epc, e, erlang, euphoria, ezt, f1, falcon, fo, fortran, freebasic, freeswitch, fsharp, gambas, gdb, genero, genie, gettext, glsl, gml, gnuplot, go, groovy, gwbasic, haskell, haxe, hicest, hq9plus, html, html4strict, html5, icon, idl, ini, inno, intercal, io, ispfpanel, java5, java, javascript, jcl, j, jquery, julia, kixtart, klonec, klonecpp, kotlin, latex, lb, ldif, lisp, llvm, locobasic, logtalk, lolcode, lotusformulas, lotusscript, lscript, lsl2, lua, m68k, magiksf, make, mapbasic, mathematica, matlab, mercury, metapost, mirc, mk-61, mmix, modula2, modula3, mpasm, mxml, mysql, nagios, netrexx, newlisp, nginx, nimrod, nsis, oberon2, objc, objeck, ocaml-brief, ocaml, octave, oobas, oorexx, oracle11, oracle8, oxygene, oz, parasail, parigp, pascal, pcre, perl6, perl, per, pf, phix, php-brief, php, pic16, pike, pixelbender, pli, plsql, postgresql, postscript, povray, powerbuilder, powershell, proftpd, progress, prolog, properties, providex, purebasic, pycon, pys60, python, qbasic, qml, q, racket, rails, rbs, rebol, reg, rexx, robots, roff, rpmspec, rsplus, ruby, rust, sas, sass, scala, scheme, scilab, scl, sdlbasic, smalltalk, smarty, spark, sparql, sql, sshconfig, standardml, stonescript, swift, systemverilog, tclegg, tcl, teraterm, texgraph, text, thinbasic, tsql, twig, typoscript, unicon, upc, urbi, uscript, vala, vbnet, vb, vbscript, vedit, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, wolfram, xbasic, xml, xojo, xorg_conf, xpp, yaml, z80, zxbasic

Herunterladbare Code-Blöcke

<file php myexample.php>
<?php echo "hello world!"; ?>
</file>

Ergebnis:

myexample.php
<?php echo "hello world!"; ?>

Code ohne Highlighting

<code - myfile.foo>
Kein Syntax-Highlighting, aber herunterladbar

</code>

Ergebnis:

myfile.foo
Kein Syntax-Highlighting, aber herunterladbar

8. Keine Formatierung

Nowiki-Tags

<nowiki>
Dies ist Text, der Adressen wie diese enthält: http://www.splitbrain.org und **Formatierung**, aber nichts wird damit gemacht.
</nowiki>

Ergebnis: Dies ist Text, der Adressen wie diese enthält: http://www.splitbrain.org und **Formatierung**, aber nichts wird damit gemacht.

Prozent-Zeichen

Das Gleiche gilt für %%//__dieser__ Text// mit einem Smiley ;-)%%.

Ergebnis:
Das Gleiche gilt für //__dieser__ Text// mit einem Smiley ;-).

9. Zitate

Ich denke, wir sollten es tun

> Nein, sollten wir nicht

>> Nun, ich sage, wir sollten

> Wirklich?

>> Ja!

>>> Dann lass es uns tun!

Ergebnis:

Ich denke, wir sollten es tun

Nein, sollten wir nicht
Nun, ich sage, wir sollten
Wirklich?
Ja!
Dann lass es uns tun!

10. Fußnoten

Sie können Fußnoten((Dies ist eine Fußnote)) hinzufügen, indem Sie doppelte Klammern verwenden.

Ergebnis: Sie können Fußnoten1) hinzufügen, indem Sie doppelte Klammern verwenden.

11. Text-Konvertierungen

Smileys

DokuWiki konvertiert häufig verwendete Emoticons in ihre grafischen Entsprechungen: 

8-) 8-O :-( :-) =) :-/ :-\ :-? :-D :-P :-O :-X :-| ;-) ^_^ m( :?: :!: LOL FIXME DELETEME

Ergebnis:
8-) 8-O :-( :-) =) :-/ :-\ :-? :-D :-P :-O :-X :-| ;-) ^_^ m( :?: :!: LOL FIXME DELETEME

Typografische Konvertierungen

-> <- <-> => <= <=> >> << -- --- 640x480 (c) (tm) (r)
"Er dachte 'Es ist eine Männerwelt'..."

Ergebnis:
→ ← ↔ ⇒ ⇐ ⇔ » « – — 640x480 © ™ ®
"Er dachte 'Es ist eine Männerwelt'…"

12. RSS/ATOM Feed-Aggregation

{{rss>http://slashdot.org/index.rss 5 author date 1h}}

Ergebnis:

Parameter:

  • Zahl: Maximale Anzahl der anzuzeigenden Elemente (Standard: 8)
  • reverse: Zeigt die letzten Elemente zuerst an
  • author: Zeigt Autorennamen an
  • date: Zeigt Elementdaten an
  • description: Zeigt Elementbeschreibung an (HTML-Tags werden entfernt)
  • nosort: Sortiert die Elemente nicht
  • n[dhm]: Aktualisierungsperiode (d=Tage, h=Stunden, m=Minuten)

13. Kontroll-Makros

NOTOC - Inhaltsverzeichnis unterdrücken

~~NOTOC~~

Ergebnis: Verhindert die automatische Erstellung eines Inhaltsverzeichnisses.

NOCACHE - Cache deaktivieren

~~NOCACHE~~

Ergebnis: Zwingt DokuWiki, die Seite bei jedem Aufruf neu zu rendern.

14. Plugin-spezifische Syntax

Ihre Installation verfügt über folgende Syntax-Plugins:

Add New Page Plugin

{{NEWPAGE}}
{{NEWPAGE>namespace}}
{{NEWPAGE>namespace?label=Benutzerdefiniertes Label}}

Ergebnis:

Du besitzt nicht die Benutzerrechte, um Seiten hinzuzufügen.


Du besitzt nicht die Benutzerrechte, um Seiten hinzuzufügen.


Du besitzt nicht die Benutzerrechte, um Seiten hinzuzufügen.

BPMN.io Plugin

<bpmnio type="bpmn">
BPMN XML Inhalt hier...
</bpmnio>

Ergebnis: Rendert BPMN-Diagramme basierend auf dem bereitgestellten XML-Inhalt.

Bureaucracy Plugin

<form>
Action mail me@example.com
Thanks "Vielen Dank für Ihre Eingabe."

Fieldset "Persönliche Daten"
Textbox "Name" "=Ihr Name"
email "E-Mail Adresse" @@

submit "Absenden"
</form>

Ergebnis: Erstellt ein funktionsfähiges Formular mit E-Mail-Versand.

Color Plugin

<color green>grüner Text</color>
<color blue/lightgrey>blauer Text auf hellgrauem Hintergrund</color>
<color #FF0000>roter Text</color>

Ergebnis:
grüner Text
blauer Text auf hellgrauem Hintergrund
roter Text

DataTables Plugin

<datatables>
^ Spalte A ^ Spalte B ^ Spalte C ^
| Zeile A1 | Zeile B1 | Zeile C1 |
| Zeile A2 | Zeile B2 | Zeile C2 |
</datatables>

Ergebnis: Erstellt eine interaktive Tabelle mit Sortier-, Filter- und Suchfunktionen.

Icons Plugin

{{icon>home}}
{{fa>home|Startseite}}
{{glyphicon>user?24}}

Ergebnis:


Struct Plugin

---- struct data ----
schema: person
name: Max Mustermann
email: max@example.com
----

Ergebnis: Speichert strukturierte Daten, die später abgefragt werden können.

Tag Plugin

{{tag>tag1 tag2 tag3}}
{{topic>tag1 -tag2}}
{{count>+}}

Ergebnis:

, ,



TagMenge
1
1
2
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1

ToDo Plugin

<todo>Titel der Aufgabe</todo>
<todo #>Erledigte Aufgabe</todo>
<todo @benutzer>Aufgabe für Benutzer</todo>

Ergebnis:
Titel der Aufgabe
Erledigte Aufgabe
[benutzer]Aufgabe für Benutzer

VShare Plugin

{{youtube>L-WM8YxwqEU}}
{{vimeo>123456789}}
{{youtube>L-WM8YxwqEU?large}}

Ergebnis: Bettet Videos von YouTube, Vimeo und anderen Plattformen ein.

Wrap Plugin

<WRAP classes #id width :language>
"großer" Inhalt
</WRAP>

<wrap classes #id width :language>"kleiner" Inhalt</wrap>

Ergebnis: Erstellt Container mit CSS-Klassen für erweiterte Formatierung.

15. Fehlerbehebung für DokuWiki 2024-02-06b "Kaos"

Bekannte Probleme und Lösungen

Formatierte Tabellen-Problem

  • Problem: Tabellen mit komplexer Formatierung werden nicht korrekt gerendert
  • Lösung: Entfernen Sie temporär die Tabellenformatierung aus dem Quelltext
  • Langfristig: Warten Sie auf offizielle Patches

PHP 8.1 Kompatibilität

  • Problem: Fehler beim Upgrade von PHP 7.4 auf 8.1
  • Lösung: Überprüfen Sie Plugin-Kompatibilität und aktualisieren Sie alle Plugins
  • Beispiel-Fix für ckgedit Plugin:
function checkuserfiles() {
    $expire = 0; // Diese Zeile hinzufügen
    // Rest der Funktion...
}

Cache-Probleme

  • Browser-Cache leeren (Strg+F5)
  • ~~NOCACHE~~ temporär verwenden
  • Admin: Cache über Konfiguration leeren

Plugin-Konflikte

  • Plugins einzeln deaktivieren
  • Kompatibilität mit DokuWiki-Version prüfen
  • Plugin-Dokumentation konsultieren

16. Best Practices und Tipps

Performance-Optimierung

  • Verwenden Sie ~~NOCACHE~~ nur wenn nötig
  • Große Bilder vor dem Upload optimieren
  • Bei vielen Medien: Ordnerstruktur verwenden

Barrierefreiheit

  • Alt-Text für Bilder verwenden
  • Aussagekräftige Link-Texte
  • Logische Überschriftenhierarchie

Wartung

  • Regelmäßige Backups
  • Plugin-Updates beachten
  • Broken Links prüfen

Sicherheit

  • Sichere Passwörter verwenden
  • ACL-Einstellungen prüfen
  • Regelmäßige Updates

17. Erweiterte Funktionen

Anker-Links

Dies verlinkt zu [[syntax#internal|diesem Abschnitt]].

Ergebnis:
Dies verlinkt zu diesem Abschnitt.

Namespaces

[[some:namespaces]]

Ergebnis:
namespaces

Verwenden Sie Doppelpunkte, um Namespaces zu erstellen.

Sektionsbearbeitung

Jede Überschrift wird automatisch zu einem bearbeitbaren Abschnitt.

Diese umfassende Syntaxreferenz deckt alle verfügbaren Funktionen Ihrer wiki.satware.com Installation ab und ist speziell auf DokuWiki 2024-02-06b "Kaos" abgestimmt. Bei Problemen konsultieren Sie die DokuWiki-Community oder die offizielle Dokumentation.

, , , ,

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.

Grundlegende Verwendung

Präsentation aktivieren

~~REVEAL~~

Ergebnis: Fügt einen "Präsentation starten" Button ein. Obligatorisch für alle Präsentationen.

Theme-Auswahl

~~REVEAL white~~
~~REVEAL theme=sky&transition=convex&controls=1~~

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

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

Folien-Hierarchie:

  • H1 (======): Hauptfolien (horizontal)
  • H2 (=====): Horizontale Folien
  • H3 (====) und tiefer: Vertikale Folien (verschachtelt)

Konfigurierbare Folien-Ebenen

~~REVEAL horizontal_slide_level=1~~

horizontal_slide_level Optionen:

  • 1: H1+ horizontal, H2+ vertikal
  • 2: H2+ horizontal, H3+ vertikal (Standard)

Hintergrund-Gestaltung

Einfache Hintergründe

{{background>red}}
===== Folie mit rotem Hintergrund =====

{{background>:wiki:dokuwiki-128.png}}
===== Folie mit Bild-Hintergrund =====

Erweiterte Hintergrund-Optionen

{{background>orange wiki:dokuwiki-128.png 10% repeat bg-slide}}
===== Folie mit komplexem Hintergrund =====

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

---- orange wiki:dokuwiki-128.png 10% repeat bg-slide zoom-in fade-out slow no-footer ---->

Folien-Inhalt hier

<----

Syntax-Elemente:

  • : Neue horizontale Folie öffnen

  • : Folie schließen

  • : Vertikaler Folien-Container öffnen

  • : Vertikalen Container schließen

Parameter für alternative Indikatoren

---- salmon wiki:dokuwiki-128.png 10% repeat bg-slide zoom-in fade-out slow no-footer ---->

Ü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

<fragment>Erscheint zuerst...</fragment>

<fragment>...dann das hier...</fragment>

<fragment>...und schließlich das!</fragment>

Block-Fragmente

<fragment-block>
==== Überschrift erscheint komplett ====
  * Listenpunkt 1
  * Listenpunkt 2
  * Listenpunkt 3
</fragment-block>

Fragment-Listen

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

Fragment-Stile und Indizes

<fragment style="fade-in" index="1">Erstes Fragment</fragment>
<fragment style="highlight-red" index="2">Zweites Fragment</fragment>

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

===== Folie-Titel =====
Sichtbarer Folien-Inhalt

<notes>
  * Notiz für den Sprecher
  * Nur im Sprecher-Modus sichtbar (Taste 's')
  * Listen sind hier nie inkrementell
</notes>

Sprecher-Modus aktivieren: Taste s während der Präsentation drücken.

Fußzeilen

Globale Fußzeile

<wrap footer>
Firmenlogo oder Copyright-Hinweis
</wrap>

====== Erste Folie ======
Inhalt...

Fußzeile für einzelne Folien deaktivieren

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

Konfigurationsoptionen

Vollständige Parameter-Syntax

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

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

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

Export-Schritte

  1. URL mit &print-pdf Parameter aufrufen
  2. Seite lädt im PDF-Export-Modus
  3. Browser-Druckfunktion verwenden (Strg+P)
  4. 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
  • 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

~~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}}

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 GitHub Repository.

, , , ,

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

<mermaid>
  graph TD
    A[Start] --> B{Entscheidung}
    B -->|Ja| C[Aktion 1]
    B -->|Nein| D[Aktion 2]
    C --> E[Ende]
    D --> E
</mermaid>

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)

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

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

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

Pfeil-Typen:

  • A→>B: Solider Pfeil
  • A–»B: Gestrichelter Pfeil
  • A-xB: Pfeil mit Kreuz
  • A–xB: Gestrichelter Pfeil mit Kreuz

Gantt-Diagramme

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

Klassendiagramme

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

Git-Graphen

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

User Journey Diagramme

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

Entity-Relationship Diagramme

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

Tortendiagramme

<mermaid>
  pie title Marktanteile Browser 2024
    "Chrome" : 65.8
    "Safari" : 18.8
    "Edge" : 5.4
    "Firefox" : 3.2
    "Andere" : 6.8
</mermaid>

Erweiterte Funktionen

Größenanpassung

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

Unterstützte Einheiten:

  • Pixel: 400px, 500px
  • Prozent: 100%, 50%
  • CSS-Einheiten: 10cm, 5in, 20em

Raw-Modus

<mermaid>
  raw
  graph TD
    A(**mermaid**)-->B((__plugin__))
    A-->C(((//for//)))
    B-->D[["[[https://www.dokuwiki.org/dokuwiki|DokuWiki]]"]]
    C-->D
</mermaid>

Raw-Modus Vorteile:

  • Keine DokuWiki-Syntax-Verarbeitung
  • Vollständige Mermaid-Funktionalität verfügbar
  • Vermeidet Konflikte zwischen DokuWiki und Mermaid-Syntax
<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>

Link-Syntax-Regeln:

Styling und Themes

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

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:

  1. Admin → Konfiguration → Mermaid Plugin
  2. "Visibility of Save Button" auf "sichtbar" setzen

Export-Funktionalität

  1. Maus über Diagramm: Save-Button erscheint
  2. SVG-Download: Klick auf Save-Button startet Download
  3. Format: Behält exakte Darstellung bei

Server-seitige Konvertierung

Lock-Button aktivieren für statische SVG-Einbettung:

  1. Verhindert client-seitige Konvertierung
  2. Nützlich für PDF-Export (dw2pdf Plugin)
  3. 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: 

%% Falsch:
graph TD
  A[Link] --> B[[internal:link]]

%% Richtig:
graph TD
  A[Link] --> B["[[internal:link]]"]

Problem: Mermaid Click-Events kollidieren mit DokuWiki-Links.

Schlecht: 

<mermaid>
  flowchart TD
    A[Link]
    click A "https://www.github.com"
</mermaid>

Besser: 

<mermaid>
  flowchart TD
    A["[[https://www.github.com|Link]]"]
</mermaid>

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

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

Deployment-Pipeline

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

Entscheidungsbaum

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

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:

  1. Log-Level auf "debug" setzen
  2. Browser-Entwicklertools öffnen
  3. 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

  1. Mermaid Live Editor: mermaid.live zum Testen
  2. Browser-Konsole: JavaScript-Fehler prüfen
  3. Schrittweise Entwicklung: Komplexe Diagramme Schritt für Schritt aufbauen
  4. 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 GitHub Repository.

, , , , , ,
1)
Dies ist eine Fußnote
  • wiki/syntax.txt
  • Zuletzt geändert: 02.07.2025 05:40
  • von Jane Alesi