Nicht alle Web-Browser zeigen die Flowchart-Grafik korrekt an. Verwenden alternativ den [[https://www.google.com/chrome|Google-Chrome]] Web-Browser.
====== FlowCharts ======

Flowcharts basiert auf mermaid (([[https://mermaidjs.github.io/|mermaidjs.github.io]])) Code und wurde für DokuWiki von Jakob Schwichtenberg <mail@jakobschwichtenberg.com> zur Verfügung gestellt. Flowcharts kann mit dem Online-Editor (([[https://mermaidjs.github.io/mermaid-live-editor/|mermaid-live-editor]])) ausprobiert werden.
Das DokuWiki Plugin (([[https://www.dokuwiki.org/plugin:flowcharts]])) können Sie auf der DokuWiki-Seite (([[https://www.dokuwiki.org/start]])) 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.
^Grafik^Code^Beschreibung^
|<flow>
graph TD; A-->B</flow>|<file - example.txt>
graph TD;
A-->B;
</file>|graph TD ((TD = Top Down)) zeichnet von oben nach unten.|
|<flow>
graph TB; A-->B</flow>|<file - example.txt>
graph TB;
A-->B;
</file>|graph TB ((TB = Top Botton)) zeichnet von oben nach unten. Wie graph TD.|
|<flow>
graph BT; A-->B</flow>|<file - example.txt>
graph BT;
A-->B;
</file>|graph BT ((BT = Botton Top)) zeichnet von unten nach oben.|
|<flow>
graph RL; A-->B</flow>|<file - example.txt>
graph RL;
A-->B;
</file>|graph RL ((RL = Right Left)) zeichnet von rechts nach links.|
|<flow>
graph LR; A-->B</flow>|<file - example.txt>
graph LR;
A-->B;
</file>|graph LR ((LR = Left Right)) 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:
  * [] Rechteckige Form.
  * >] Rechteck mit einer//Einbuchtung//.
  * () Rechteckige Form mit runden Ecken.
  * {} Raute Form.

Nach einer Formatierungszeichenfolge muss zwingen eine Zeichenfolge((Nur ASCI-Zeichen erlaubt!)) als Text in der Form angegeben werden. Die Knoten-ID wird nicht mehr dargestellt. Die Knoten-ID ist für die [[flowcharts#graph xx|Verknüpfungen]] der Formen notwendig.

Folgender [[flowcharts#Beispielcodes für die Knoten und Formen|Beispielcode]] zeigt wie die Formen erzeugt werden können.
=== Zeilenweise Code Beschreibung ===
  - Es wird ein Flowchart mit der Zeichungsrichtung links nach rechts eingrichtet.
  - Ein Standard-Rechteck mit der Knoten-ID **A** wird erstellt und angezeigt.
  - Ein Standard-Rechteck mit der Knoten-ID **12.345** wird erstellt und angezeigt.
  - Ein Standard-Rechteck mit der Knoten-ID **Hallo** wird erstellt und angezeigt.
  - Ein Standard-Rechteck mit der Knoten-ID **Rechteck=Standard** wird erstellt und angezeigt.
  - Diese Form wird ignoriert da doppelt vorhanden.
  - Bei mehrfach vorhandenen Knoten-IDs wird nur die Letztere dargestellt.
  - Diese Form wird ignoriert da doppelt vorhanden.
  - Es wird ein Rechteck mit der Knoten-ID **AA** dargestellt und der Text //'Hier ist der Text'// eingetragen.
  - Es wird ein Kreis mit der Foram-ID **XX** und dem Text //'Text im Kreis'// dargestellt.
  - Knoten-ID **Z** mit Text //'Eck ab'.//
  - Ein Rechteck mit runden Ecken mit der Knoten-ID **Bla** und dem Text //'runde Ecken'// wird dargestellt.
  - Eine Raute mit der Knoten-ID **Entscheidung** und dem Text //'Viereck?'// wird dargestellt.

=== Beispielcodes für die Knoten und Formen ===
^Grafik^Code^
|<flow>
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?}
</flow>|<file [enable_line_numbers="true",highlight_lines_extra="6,8"] example.txt>
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?}
</file>|

----

==== 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.
  * **fill** => Hintergrundfarbe.
  * **stroke** => Rahmenfarbe.
  * **stroke-width** => Rahmendicke.
  * **stroke-dasharray** => ein Array von Werten das die Strichfolge bezeichnet. Zum Beispiel wird bei einem Wert von 10,10 ein unterbrochener Strich von 10 Pixel Strich und 10 Pixel ohne Strich dargestellt.

^Grafik^Code^
|<flow>
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
</flow>|<file [enable_line_numbers="true",highlight_lines_extra="4"] example.txt>
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
</file>|
|Wird ein Style mit einer nicht existierenden Knoten-ID angegeben so wird ein Standard-Form ((Rechteck mit Ecken)) gezeichnet. Siehe Zeile 4. Der [[http://www.farbtabelle.at/grosse-farbtabelle/|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.
  - Startet immer (!) mit einem **(Strich)**.
  - Der mittlere Teil beschreibt die Form der Verbindung. **(Strich)** = druchgezogener Strich, **(Punkt)** = unterbrochener Strich.
  - Der letzte Teil beschreibt das Endzeichen. **(Strich)** = durchgezogener Strich, **>** = Pfeilspitze.

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

^Grafik^Code^Grafik^Code^Grafik^Code^Grafik^Code^
|<flow>
graph TD 
A---B</flow>|<file - >
graph TD
A---B</file>|<flow>
graph TD
A-- Text ---B</flow>|<file - >
graph TD
A-- Text ---B</file>|<flow>
graph TD
A-.-B</flow>|<file - >
graph TD
A-.-B</file>|<flow>
graph TD
A-. Text .-B</flow>|<file - >
graph TD
A-. Text .-B</file>|
|<flow>
graph TD 
A-->B</flow>|<file - >
graph TD
A-->B</file>|<flow>
graph TD 
A-- Text -->B</flow>|<file - >
graph TD
A-- Text -->B</file>|<flow>
graph TD
A-.->B</flow>|<file - >
graph TD
A-.->B
</file>|<flow>
graph TD
A-. Text .->B</flow>|<file - >
graph TD
A-. Text .->B
</file>|
|<flow>
graph TD
A==>B</flow>|<file - >
graph TD
A==>B
</file>|<flow>
graph TD
A== Text ==>B</flow>|<file - >
graph TD
A== Text ==>B
</file>| ||||

----

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

^Grafik^Code^
|<flow>
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
</flow>|<file [enable_line_numbers="true",highlight_lines_extra="6,8,9,12"] example.txt>
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
</file>|

----

===== Beispiel: Flow-Diagramm =====
Hier ein paar Code-Beispiele:
^Grafik^Code^
|<flow>
graph TD; A-->B; A-->C; B-->D; C-->D;</flow>|<file - example.txt>
graph TD;
   A-->B;
   A-->C;
   B-->D;
   C-->D;
</file>|
|<flow>graph LR; A == text ==> B</flow>|<file - example.txt>
graph LR;
A == text ==> B
</file>|
|<flow>graph TB; c1-->a2; subgraph one; 
                 a1==>a2; end; 
                 subgraph two; 
                 b1-->b2; end;
                 subgraph three;
                 c1-->c2;end;
</flow>|<file - example.txt>
graph TB; 
   c1-->a2; 
subgraph one; 
   a1==>a2; 
end; 
subgraph two; 
   b1-->b2; 
end; 
subgraph three; 
  c1-->c2; 
end;
</file>|
|<flow>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</flow>|<file - 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
</file>|
|<flow>
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));
</flow>|<file - 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));
</file>|

----

===== Beispiel: Sequenz-Diagram =====
<flow>
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
</flow>

----

===== Beispiel: GANTT-Diagramm =====
<flow>
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
</flow>
    
----