Inhaltsverzeichnis

Nicht alle Web-Browser zeigen die Flowchart-Grafik korrekt an. Verwenden alternativ den Google-Chrome Web-Browser.

FlowCharts

Flowcharts basiert auf mermaid 1) Code und wurde für DokuWiki von Jakob Schwichtenberg mail@jakobschwichtenberg.com zur Verfügung gestellt. Flowcharts kann mit dem Online-Editor 2) ausprobiert werden. Das DokuWiki Plugin 3) können Sie auf der DokuWiki-Seite 4) downloaden.

Grundelemente

Flowchart erstellen

Jeder Flowchart-Code muss im DokuWiki-Dokummentes innerhalb den Tags <flow> und </flow> stehen. Das Schlüsselwort graph xx leitet ein neues Flussdiagramm ein. Der Parameter „xx“ definiert die Zeichnungsrichtung.

GrafikCodeBeschreibung
graph TD; A-->B
example.txt
graph TD;
A-->B;
graph TD 5) zeichnet von oben nach unten.
graph TB; A-->B
example.txt
graph TB;
A-->B;
graph TB 6) zeichnet von oben nach unten. Wie graph TD.
graph BT; A-->B
example.txt
graph BT;
A-->B;
graph BT 7) zeichnet von unten nach oben.
graph RL; A-->B
example.txt
graph RL;
A-->B;
graph RL 8) zeichnet von rechts nach links.
graph LR; A-->B
example.txt
graph LR;
A-->B;
graph LR 9) zeichnet von links nach rechts.

Knoten und Formen

Nach dem Schlüsselwort graph wird eine eindeutige Knoten-ID erwartet. Als Konten-ID kann jedes ASCI-Zeichen benutzt werden. Jede Knoten-ID wird standardmässig als Rechteck mit den Standard-Farben gezeichnet. Nach der Koten-ID kann ein Formatierungszeichenfolge angegeben werden die die Form des Knoten bestimmt. Folgende Zeichenfolgen sind möglich:

Nach einer Formatierungszeichenfolge muss zwingen eine Zeichenfolge10) als Text in der Form angegeben werden. Die Knoten-ID wird nicht mehr dargestellt. Die Knoten-ID ist für die Verknüpfungen der Formen notwendig.

Folgender Beispielcode zeigt wie die Formen erzeugt werden können.

Zeilenweise Code Beschreibung

  1. Es wird ein Flowchart mit der Zeichungsrichtung links nach rechts eingrichtet.
  2. Ein Standard-Rechteck mit der Knoten-ID A wird erstellt und angezeigt.
  3. Ein Standard-Rechteck mit der Knoten-ID 12.345 wird erstellt und angezeigt.
  4. Ein Standard-Rechteck mit der Knoten-ID Hallo wird erstellt und angezeigt.
  5. Ein Standard-Rechteck mit der Knoten-ID Rechteck=Standard wird erstellt und angezeigt.
  6. Diese Form wird ignoriert da doppelt vorhanden.
  7. Bei mehrfach vorhandenen Knoten-IDs wird nur die Letztere dargestellt.
  8. Diese Form wird ignoriert da doppelt vorhanden.
  9. Es wird ein Rechteck mit der Knoten-ID AA dargestellt und der Text 'Hier ist der Text' eingetragen.
  10. Es wird ein Kreis mit der Foram-ID XX und dem Text 'Text im Kreis' dargestellt.
  11. Knoten-ID Z mit Text 'Eck ab'.
  12. Ein Rechteck mit runden Ecken mit der Knoten-ID Bla und dem Text 'runde Ecken' wird dargestellt.
  13. Eine Raute mit der Knoten-ID Entscheidung und dem Text 'Viereck?' wird dargestellt.

Beispielcodes für die Knoten und Formen

GrafikCode
graph LR A 12.345 Hallo Rechteck=Standard TF TF AA(Runde Ecken); AA[Hier ist der Text] XX((Text im Kreis)) Z>Eck ab] Bla(Runde Ecken) Entscheidung{Viereck?}
  1. graph LR 
  2. A
  3. 12.345
  4. Hallo
  5. Rechteck=Standard
  6. TF
  7. TF
  8. AA(Runde Ecken);
  9. AA[Hier ist der Text]
  10. XX((Text im Kreis))
  11. Z>Eck ab]
  12. Bla(Runde Ecken)
  13. Entscheidung{Viereck?}

Knoten mit einem Style versehen

Jede Form kann mit einem Syles versehen werden. Jeder Style wird mit dem Schlüsselwort style und der betreffenden Knoten-ID eingeleitet. Anschliessen könnne die Parameter fill, stroke, stroke-width, stroke-dasharray eingesetzt werden. Es können auch mehrere Styles eingesetzt werden.

GrafikCode
graph RL Kreis((Ein Kreis mit Farbe)) style Kreis fill:#ff3300,stroke:#0000ff,stroke-width:6px,stroke-dasharray:10,10 style Form fill:#ccccff,stroke:#08cc08,stroke-width:6px,stroke-dasharray:3,3
  1. graph RL
  2. Kreis((Ein Kreis mit Farbe))
  3. style Kreis fill:#ff3300,stroke:#0000ff,stroke-width:6px,stroke-dasharray:10,10
  4. style Form fill:#ccccff,stroke:#08cc08,stroke-width:6px,stroke-dasharray:3,3
Wird ein Style mit einer nicht existierenden Knoten-ID angegeben so wird ein Standard-Form 11) gezeichnet. Siehe Zeile 4. Der Farbcode ist im HEX-Format anzugeben.

Verbinder erstellen

Die Verbindungen zwischen den Knoten (Formen) wird durch ein grafisches Element erstellt. Diese Verbinder bestehen aus drei Teilen zwischen den Knoten.

  1. Startet immer (!) mit einem (Strich).
  2. Der mittlere Teil beschreibt die Form der Verbindung. (Strich) = druchgezogener Strich, (Punkt) = unterbrochener Strich.
  3. Der letzte Teil beschreibt das Endzeichen. (Strich) = durchgezogener Strich, > = Pfeilspitze.

Weiter unten sehen Sie einige Beispiele wie die Verbinder erstellt werden können.

GrafikCodeGrafikCodeGrafikCodeGrafikCode
graph TD A---B
graph TD
A---B
graph TD A-- Text ---B
graph TD
A-- Text ---B
graph TD A-.-B
graph TD
A-.-B
graph TD A-. Text .-B
graph TD
A-. Text .-B
graph TD A-->B
graph TD
A-->B
graph TD A-- Text -->B
graph TD
A-- Text -->B
graph TD A-.->B
graph TD
A-.->B
graph TD A-. Text .->B
graph TD
A-. Text .->B
graph TD A==>B
graph TD
A==>B
graph TD A== Text ==>B
graph TD
A== Text ==>B

Substitutions-Grafik erstellen

Flowcharts können gruppiert werden. Dazu verwenden Sie die Schlüsselwort subgraph gefolgt von einen Namen. Der Abschluss bildes das Schlüsselwort end. Alle Flowcharts innerhalb dieser beiden Schlüsselwörter werden zu einer Gruppe zusammengeführt.

GrafikCode
graph TD D-.->G D== Direct ==>F G-.->F Z-. Set .->B subgraph Sub-M A-->B end subgraph Sub-P X-->Z Y-->Z end
  1. graph TD
  2. D-.->G
  3. D== Direct ==>F
  4. G-.->F
  5. Z-. Set .->B
  6. subgraph Sub-M
  7.    A-->B
  8. end
  9. subgraph Sub-P
  10.    X-->Z
  11.    Y-->Z
  12. end

Beispiel: Flow-Diagramm

Hier ein paar Code-Beispiele:

GrafikCode
graph TD; A-->B; A-->C; B-->D; C-->D;
example.txt
graph TD;
   A-->B;
   A-->C;
   B-->D;
   C-->D;
graph LR; A == text ==> B
example.txt
graph LR;
A == text ==> B
graph TB; c1-->a2; subgraph one; a1==>a2; end; subgraph two; b1-->b2; end; subgraph three; c1-->c2;end;
example.txt
graph TB; 
   c1-->a2; 
subgraph one; 
   a1==>a2; 
end; 
subgraph two; 
   b1-->b2; 
end; 
subgraph three; 
  c1-->c2; 
end;
graph TD; id1(Start)-->id2(Stop) style id1 fill:#f9f,stroke:#333,stroke-width:4px style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
example.txt
graph LR;
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
graph TD B["Rechteck 1"] B-->C[Rechteck 2] B-->D(Runde Ecken 1); B-->E(Runde Ecken 2); E-->X; C-->Z; D-->X{Entscheidung 1}; X-->Y((Kreis 1)); X-->Z((Kreis 2));
example.txt
graph TD
    B["Rechteck 1"]
    B-->C[Rechteck 2]
    B-->D(Runde Ecken 1);
    B-->E(Runde Ecken 2);
    E-->X;
    C-->Z;
    D-->X{Entscheidung 1};
    X-->Y((Kreis 1));
    X-->Z((Kreis 2));

Beispiel: Sequenz-Diagram

sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great!

Beispiel: GANTT-Diagramm

gantt title GANTT Diagramm dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d

—-

1)
mermaidjs.github.io
2)
mermaid-live-editor
3)
https://www.dokuwiki.org/plugin:flowcharts
4)
https://www.dokuwiki.org/start
5)
TD = Top Down
6)
TB = Top Botton
7)
BT = Botton Top
8)
RL = Right Left
9)
LR = Left Right
10)
Nur ASCI-Zeichen erlaubt!
11)
Rechteck mit Ecken