Blockdiagramme

Knoten und Form der Knoten

Standardknoten

Knoten werden über ihren Namen definiert:

id
graph LR id

Bemerkung

Die ID muss aus einem einzigen Wort bestehen.

Knoten mit Text

Soll ein Knoten mehr als ein Wort umfassen, so schreibt man die betreffende ID und ergänzt diese mit dem entsprechenden Text in eckigen Klammern. Wenn später Verbindungen zwischen Knoten definiert werden, so können diese zwischen den jeweiligen IDs beschrieben werden. Die zugehörigen Textbeschreibungen können weggelassen werden.

id[Dies ist ein Beispieltext]
graph LR id[Dies ist ein Beispieltext]

Warnung

Zwischen der ID und der öffnenden, eckigen Klammer darf kein Leerzeichen stehen.

Knoten mit unterschiedlichen Formen

Durch entsprechenden Befehlszeichen kann die Form des Knotens angepasst werden:

id_0[Dies ist ein eckiger Knoten]
id_1(Dies ist ein abgerundeter Knoten)
id_2((Dies ist ein kreisförmiger Knoten))
id_3{Dies ist eine Raute}
id_4>Dieser Knoten ist asymmetrisch]
graph LR id_0(Dies ist ein eckiger Knoten) id_1(Dies ist ein abgerundeter Knoten) id_2((Dies ist ein kreisförmiger Knoten)) id_3{Dies ist eine Raute} id_4>Dieser Knoten ist asymmetrisch]

Warnung

Zwischen der ID und der öffnenden Befehlszeichen ( [, (, {, > ) darf kein Leerzeichen stehen.

Verbindungen zwischen Knoten

Knoten können mit Zuordnungspfeilen/Kanten verbunden werden. Es ist möglich, verschiedene Arten von Pfeilen zu verwenden oder eine Verbindung mit einem Text zu beschriften.

Zuordnung und Kanten

A --> B
B --- C
graph LR A --> B B --- C B --> A

Text in Zuordnungen und Kanten

Beschriftete Kanten und Zuordnungen können auf unterschiedliche Weise definiert werden:

A -- Das ist der Text --- B
B ---|Das ist eine Beschreibung| C
D -- und noch eine Beschreibung --> E
E -->|ein weiterer Text| F
graph LR A -- Das ist der Text --- B B ---|Das ist eine Beschreibung| C D -- und noch eine Beschreibung --> E E -->|ein weiterer Text| F

Gepunktete Verbindungen

Die Verbindungen können gepunktet

A -.-> B
B -.- C
D -. mit einer Beschreibung -.-> E
E -. noch ein Text -.- F
graph LR A -.-> B B -.- C D -. mit einer Beschreibung -.-> E E -. noch ein Text -.- F

Fette Verbindungen

oder fett dargestellt werden:

A ==> B
B === C
D == 1. Text ==> E
E == 2. Text === F
graph LR A ==> B B === C D == 1. Text ==> E E == 2. Text === F

Verwendung von Sonderzeichen, die die Syntax verletzen

Wenn Text in Anführungszeichen gesetzt wird, können auch gewisse Sonderzeichen verwendet werden, die sonst als Befehle interpretiert würden:

A["Dies ist der (Text) in der Box"]
graph LR A["Dies ist der (Text) in der Box"]

Entity-Codes

Es ist möglich, besondere Zeichen mit der hier dargestellten Syntax zu beschreiben:

A["Ein Anführungszeichen #quot;"] -->B["Ein Dezimalcode #9829;"]
graph LR A["Ein Anführungszeichen #quot;"] -->B["Ein Dezimalcode #9829;"]

Teilgraphen

Eine komplettes Blockdiagramm kann mit Teilgraphen strukturiert werden.

subgraph Titel
    graph Definition
end

Ein Beispiel:

c1 --> a2
subgraph ein
a1 --> a2
end
subgraph zwei
b1 --> b2
end
subgraph drei
c1 --> c2
end
graph TB c1 --> a2 subgraph ein a1 --> a2 end subgraph zwei b1 --> b2 end subgraph drei c1 --> c2 end

Interaktion

Einen Knoten kann mit einem Verweis gekoppelt werden, der beim Anklicken des Knotens in einem neuen Browser-Fenster geöffnet wird.

A --> B
click B "http://expo.proteus.education" "Ausstellung"
style B cursor: pointer
graph LR; A --> B; click B "http://expo.proteus.education" "Ausstellung" style B cursor: pointer

Styling eines Knotens

Es ist möglich, einem Knoten bestimmte Stile zuzuweisen, z. B. einen dickeren Rahmen oder eine andere Hintergrundfarbe.

id1 (Start) --> id2 (Stop)
style id1 fill: #f9f, stroke: #333, stroke-width: 4px
style id2 fill: #ccf, stroke: #f66, stroke-width: 2px, stroke-dasharray: 7,2
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: 7,2

Klassen

Sollen bestimmte Stile mehrfach verwendet werden, dann sollte man besser mit Klassen arbeiten.

Eine Klassendefinition sieht wie das folgende Beispiel aus:

classDef className fill:#f9f,stroke:#333,stroke-width:4px;

Die Verbindung zwischen der Klasse und dem bzw. den Knoten wird in folgender Weise vorgenommen:

class nodeId1 className;
class nodeId1,nodeId2 className;