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]]
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:
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:
- 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
* Ungeordnet
- Geordnet
- Noch einer
* Zurück zu ungeordnet
Ergebnis:
- Ungeordnet
- Geordnet
- 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:
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:
- Netflix Says 50% of Global Users Now Watch Anime von msmash (07.07.2025 20:15)
- OpenAI Says It Has No Plan To Use Google's In-house Chip von msmash (07.07.2025 19:40)
- EU Holds Back on Signing Climate Action Pledge With China von msmash (07.07.2025 18:49)
- America Has Two Labor Markets Now von msmash (07.07.2025 18:01)
- Poland's Clean Energy Usage Overtakes Coal For First Time von msmash (07.07.2025 17:23)
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:
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:
| Tag | Menge |
|---|---|
| ToDo | 1 |
| fixme | 1 |
| translate | 2 |
| wiki | 1 |
| syntax | 1 |
| dokuwiki | 1 |
| referenz | 1 |
| 2024 | 1 |
| tag1 | 1 |
| tag2 | 1 |
| tag3 | 1 |
| reveal.js | 1 |
| praesentation | 1 |
| slideshow | 1 |
| plugin | 1 |
| mermaid | 1 |
| diagramm | 1 |
| flowchart | 1 |
| sequenz | 1 |
| gantt | 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.
- GitHub Repository: 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
~~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,defaultmoon,night,serif,simple,sky,solarizeddokuwiki(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+ vertikal2: 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:
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-downzoom-in,zoom-outhighlight-red,highlight-green,highlight-bluecurrent-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
- URL mit
&print-pdfParameter 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
Escfü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:
TDoderTB: 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 PfeilA–»B: Gestrichelter PfeilA-xB: Pfeil mit KreuzA–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
DokuWiki-Links in Mermaid
<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:
- Interne Links:
Anzeige-Text - Externe Links:
Anzeige-Text - Anführungszeichen: Notwendig bei Links in Mermaid-Knoten
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:
- 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:
%% Falsch: graph TD A[Link] --> B[[internal:link]] %% Richtig: graph TD A[Link] --> B["[[internal:link]]"]
Click-Events vs. DokuWiki-Links
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:
- 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: 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 GitHub Repository.