Metainformationen zur Seite
  •  

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung 		Vorhergehende Überarbeitung
start:dokuwiki:plugins:flowcharts [2018/08/11 23:39]
wikiadmin [FlowCharts] 		start:dokuwiki:plugins:flowcharts [2018/08/12 15:24]
wikiadmin [Substitutions-Grafik erstellen]
Zeile 6: Zeile 6:
 ===== Grundelemente ===== ===== Grundelemente =====
 ==== Flowchart erstellen ==== ==== 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. Das Schlüsselwort **graph xx** leitet ein neues Flussdiagramm ein. Der Parameter "xx" definiert die Zeichnungsrichtung.
 ^Grafik^Code^Beschreibung^ ^Grafik^Code^Beschreibung^
Zeile 121: Zeile 122:
  
 ==== Verbinder erstellen === ==== 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^ ^Grafik^Code^Grafik^Code^Grafik^Code^Grafik^Code^
Zeile 174: Zeile 181:
  
 ==== Substitutions-Grafik erstellen ==== ==== 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^ ^Grafik^Code^
 |<flow> |<flow>
Zeile 188: Zeile 197:
    Y-->Z    Y-->Z
 end end
-</flow>|<file [enable_line_numbers="true",highlight_lines_extra="1"] example.txt>+</flow>|<file [enable_line_numbers="true",highlight_lines_extra="6,8,9,12"] example.txt>
 graph TD graph TD
 D-.->G D-.->G
Zeile 205: Zeile 214:
 ---- ----
  
-===== Beispiele =====+===== Beispiel: Flow-Diagramm =====
 Hier ein paar Code-Beispiele: Hier ein paar Code-Beispiele:
 ^Grafik^Code^ ^Grafik^Code^
Zeile 271: Zeile 280:
     X-->Z((Kreis 2));     X-->Z((Kreis 2));
 </file>| </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>
 +    
 +----
 +