Metainformationen zur Seite
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.
Grafik | Code | Beschreibung |
---|---|---|
graph TD; A-->B |
| graph TD 5) zeichnet von oben nach unten. |
graph TB; A-->B |
| graph TB 6) zeichnet von oben nach unten. Wie graph TD. |
graph BT; A-->B |
| graph BT 7) zeichnet von unten nach oben. |
graph RL; A-->B |
| graph RL 8) zeichnet von rechts nach links. |
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:
- [] Rechteckige Form.
- >] Rechteck mit einerEinbuchtung.
- () Rechteckige Form mit runden Ecken.
- {} Raute Form.
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
- 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 |
---|---|
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?} |
|
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 |
---|---|
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 |
|
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.
- 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 |
---|---|---|---|---|---|---|---|
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.
Grafik | Code |
---|---|
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 |
|
Beispiel: Flow-Diagramm
Hier ein paar Code-Beispiele:
Grafik | Code |
---|---|
graph TD; A-->B; A-->C; B-->D; C-->D; |
|
graph LR; A == text ==> B |
|
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 |
|
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
Beispiel: GANTT-Diagramm
—-