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
Nächste Überarbeitung Beide Seiten der Revision
start:dokuwiki:plugins:flowcharts [2018/08/11 23:35]
wikiadmin [Verbinder erstellen] 		start:dokuwiki:plugins:flowcharts [2018/08/12 15:09]
wikiadmin [Verbinder erstellen]
Zeile 1: Zeile 1:
 +Nicht alle Web-Browser zeigen die Flowchart-Grafik korrekt an. Verwenden alternativ den [[https://www.google.com/chrome|Google-Chrome]] Web-Browser.
 ====== FlowCharts ====== ====== FlowCharts ======
  
Zeile 5: 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 120: 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 173: Zeile 181:
  
 ==== Substitutions-Grafik erstellen ==== ==== Substitutions-Grafik erstellen ====
 +
 ^Grafik^Code^ ^Grafik^Code^
 |<flow> |<flow>
Zeile 187: Zeile 196:
    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 204: Zeile 213:
 ---- ----
  
-===== Beispiele =====+===== Beispiel: Flow-Diagramm =====
 Hier ein paar Code-Beispiele: Hier ein paar Code-Beispiele:
 ^Grafik^Code^ ^Grafik^Code^
Zeile 270: Zeile 279:
     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>
 +    
 +----
 +