Inhaltsverzeichnis

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

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

Systemkonfiguration

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

Horizontale Linie

----

Ergebnis:

Vier oder mehr Bindestriche erzeugen eine horizontale Linie. 

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 

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

Ergebnis:
seitenname
Link-Text
seitenname
Zu diesem Abschnitt 

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

Ergebnis:
Interwiki
Wiki

Windows-Freigaben

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

Ergebnis:
Diese Freigabe 

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

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:

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:

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:

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

PHP 8.1 Kompatibilität

function checkuserfiles() {
    $expire = 0; // Diese Zeile hinzufügen
    // Rest der Funktion...
}

Cache-Probleme

Plugin-Konflikte

16. Best Practices und Tipps

Performance-Optimierung

Barrierefreiheit

Wartung

Sicherheit

17. Erweiterte Funktionen

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:

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:

Konfigurierbare Folien-Ebenen

~~REVEAL horizontal_slide_level=1~~

horizontal_slide_level Optionen:

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:

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:

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:

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

Performance

Kompatibilität

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

Debug-Tipps

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.

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

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:

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:

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:

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: 

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

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

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

Wartbarkeit

Zugänglichkeit

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)

Kompatibilität

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