Metainformationen zur Seite
  •  
Übersetzungen dieser Seite:

Dies ist eine alte Version des Dokuments!

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
A
B
example.txt
graph TD;
A-->B;
graph TD 5) zeichnet von oben nach unten.
A
B
example.txt
graph TB;
A-->B;
graph TB 6) zeichnet von oben nach unten. Wie graph TD.
A
B
example.txt
graph BT;
A-->B;
graph BT 7) zeichnet von unten nach oben.
A
B
example.txt
graph RL;
A-->B;
graph RL 8) zeichnet von rechts nach links.
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:

  • [] 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

  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
A
12.345
Hallo
Rechteck=Standard
TF
Hier ist der Text
Text im Kreis
Eck ab
Runde Ecken
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.

  • 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.
GrafikCode
Ein Kreis mit Farbe
Form
  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 Zeichen zwischen den Knoten.

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

Substitutions-Grafik erstellen

GrafikCode
Sub-P
Sub-M
Direct
Set
Z
X
Y
B
A
D
G
F
  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
A
B
C
D
example.txt
graph TD;
   A-->B;
   A-->C;
   B-->D;
   C-->D;
text
A
B
example.txt
graph LR;
A == text ==> B
three
two
one
c2
c1
b2
b1
a2
a1
example.txt
graph TB; 
   c1-->a2; 
subgraph one; 
   a1==>a2; 
end; 
subgraph two; 
   b1-->b2; 
end; 
subgraph three; 
  c1-->c2; 
end;
Start
Stop
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
Rechteck 1
Rechteck 2
Runde Ecken 1
Runde Ecken 2
Entscheidung 1
Kreis 2
Kreis 1
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

AliceJohnHello John, how are you?Great!AliceJohn

Beispiel: GANTT-Diagramm

2014-01-052014-01-122014-01-192014-01-262014-02-022014-02-092014-02-16A task Another task Task in sec another task SectionAnotherGANTT Diagramm

—-

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