Abbildungen mit GraphViz erstellen

Mit der Erweiterung GraphViz können Sie einfache graphische Abbildungen integrieren, ohne ein separates Grafikprogramm zu benutzen.

Vor allem Strukturdiagramme, Pfeildiagramme, aber auch andere automatisch erzeugte Diagramme lassen sich damit relativ unkompliziert erstellen.

Im Folgenden werden die grundlegenden Funktionen zur Erstellung einfacher Pfeildiagramme erläutert.

Syntax: <graphviz> digraph Beispiel1 {Hallo -> "Welt!"} </graphviz>

Ergebnis: <graphviz> digraph Beispiel1 {Hallo -> "Welt!"} </graphviz>

Was ist ein graph, node und edge?

graph:
Im obigen Beispiel gibt es einen graph (deut.: Graphen), welcher gerichtet ist von oben nach unten verläuft. Darum wird er auch als digraph eingefügt und heißt Beispiel1. Es gibt auch ungerichtete Graphen auf die jedoch in diesen Erläuterungen nicht eingegangen wird.

node:
Ein node (deut.: Knoten) ist ein Element, die durch eine oder mehrere Verknüpfungen mit einander verbunden werden. Im Beispiel heißen die Knoten Hallo und Welt!. Ein Knoten muss nicht extra initiiert werden, sondern wird bei seiner ersten Verwendung gebildet.

edge:
Eine edge (deut.: Kante) ist eine Verknüpfung zwischen Knoten. Eine gerichtete Verbinidung entsteht, wenn man zwischen zwei Knoten mit -> verbindet.

Wie beeinflusse ich die Richtung meines Graphen?

Mit dem Attribut rankdir lässt sich die Orientierung des Graphen festlegen. Mögliche Werte sind TB (top-to-bottom, default), BT (bottom-to-top), LR (left-to-right) und RL (right-to-left).

Syntax: <graphviz> digraph Beispiel2 { graph [rankdir=LR]

Hallo -> "Welt" } </graphviz>

Ergebnis: <graphviz> digraph Beispiel2 { graph [rankdir=LR]

Hallo -> "Welt" } </graphviz>

Wie ändere ich die Größe eines Graphen?

Wollen Sie die Größe des Graphen nachträglich verkleinern?

Dann verwenden Sie das Attribut size="Breite in Zoll, Höhe in Zoll". Ea dient dazu die maximale Größe des Diagrammes einzustellen.

Hinweis

Jedoch hat das Attribut erst eine Wirkung, wenn das Diagramm die maximale Größe zu überschreiten droht! Optisch werden dann alle Nodes und alle Schriften kleiner. Dies ist vorallem zu beachten, wenn der Betrachter das Diagramm nicht mehr in einem Stück erfassen kann.

Syntax: <graphviz> digraph Beispiel3 { graph [size="5, 5"]

Hallo -> "Welt!" Hallo -> Esel Hallo -> Hund Hallo -> Katze Hallo -> Maus Hallo -> Flo Hallo -> Bakterium } </graphviz>

Ergebnis: <graphviz> digraph Beispiel3 { graph [size="5, 5"]

Hallo -> "Welt!" Hallo -> Esel Hallo -> Hund Hallo -> Katze Hallo -> Maus Hallo -> Flo Hallo -> Bakterium } </graphviz>

Wie verändere ich die Form, Farbe und Fonts meiner Knoten?

Um die Knoten eines Graphen in Form, Farbe und Fonts anzupassen kann man wie folgt vorgehen:

Zuerst wird ein Knoten initiiert und über die Attribute
fontname= , fontsize= , shape= , style= , color= , fillcolor= , fontcolor=
den gewünschten Zielvorgaben angepasst.

Mögliche Formen sind
shape=box/ellipse/circle/egg/plaintext/triangle/diamond
und mögliche Style sind
style= filled/rounded/dotted/bold, wobei Style-Kombinationen mit
style="rounded,filled" angegeben werden.

Syntax: <graphviz> digraph Beispiel4 { Hallo [fontname=Verdana, fontsize=18] Hallo [shape=box, style="rounded,filled", color=green, fillcolor=grey, fontcolor=white]

Hallo -> "Welt!" } </graphviz>

Ergebnis: <graphviz> digraph Beispiel4 { Hallo [fontname=Verdana, fontsize=18] Hallo [shape=box, style="rounded,filled", color=green, fillcolor=grey, fontcolor=black]

Hallo -> "Welt!" } </graphviz>

Wie beeinflusse ich die Beschreibung, Farbe und Pfeilspitze von Kanten?

Nach dem Setzen einer Kante zwischen zwei Knoten kann diese mit den Attributen
fontname= , fontsize= , fontcolor= , arrowhead= , color= , label=
versehen werden.

Mögliche Werte für die Form der Pfeilspitze sind
arrowhead=normal/dot/odot/inv/vee/none.

Syntax: <graphviz> digraph Beispiel5 {

Hallo -> "Welt!" [fontname=Verdana, fontsize=16, fontcolor=blue, <br /> arrowhead=dot, color=red, label=Beschreibung] } </graphviz>

Ergebnis: <graphviz> digraph Beispiel5 {

Hallo -> "Welt!" [fontname=Verdana, fontsize=16, fontcolor=blue, arrowhead=dot, color=red, label=Beschreibung] } </graphviz>

Wichtig

Farben können auch als Hex-Code angegeben werden...siehe:

z.B. color="#RRGGBB" --> color="#FF0000"
Vgl. dazu auch HTML-Farbcodes

Zum Abschluss hier nochmal ein Beispiel für die erweiterte Anpassung von Diagrammen mit GraphViz.

Hinweis: Zuerst werden die Knoten (node) initiiert und mit Attributen ausgestattet, anschließend die Kanten (edge) zwischen ihnen angelegt.

Syntax: <graphviz> digraph BeispielX { graph [rankdir=LR]

Diamant  
  [shape=diamond, 
   style=filled, 
   color=blue, 
   fillcolor=midnightblue, 
   fontcolor=white];
Ei 
  [shape=egg, 
   style=filled, 
   color=beige, 
   fillcolor=lightcoral];
Kasten 
  [shape=box, 
   style=filled, 
   color=yellow, 
   fillcolor=green];
Haus 
   [shape=house, 
    style=filled, 
    color=gray, 
    fillcolor=red];
Kreis 
  [shape=circle,
   style=filled, 
   color=green, 
   fillcolor=lawngreen, 
   fontcolor=linen];
Nix 
  [shape=none, 
   fontcolor=red];

Diamant -> Kasten -> 
Haus -> Kreis -> Nix [color=blue];
Standard -> Ei -> Haus [color=red]; 

</graphviz>

Ergebnis: <graphviz> digraph BeispielX {

[bgcolor="transparent"]
[rankdir=LR]

Diamant  
  [shape=diamond, 
   style=filled, 
   color=blue, 
   fillcolor=midnightblue, 
   fontcolor=white];
Ei 
  [shape=egg, 
   style=filled, 
   color=beige, 
   fillcolor=lightcoral];
Kasten 
  [shape=box, 
   style=filled, 
   color=yellow, 
   fillcolor=green];
Haus 
   [shape=house, 
    style=filled, 
    color=gray, 
    fillcolor=red];
Kreis 
  [shape=circle,
   style=filled, 
   color=green, 
   fillcolor=lawngreen, 
   fontcolor=linen];
Nix 
  [shape=none, 
   fontcolor=red];

Diamant -> Kasten -> Haus -> Kreis -> Nix [color=blue];
Standard -> Ei -> Haus [color=red];

</graphviz>

Hinweis

Detaillierte Informationen finden Sie unter

http://www.mediawiki.org/wiki/GraphViz

https://www.mediawiki.org/wiki/Extension:GraphViz

Eine gute Übersicht was mit der Erweiterung möglich ist finden Sie unter

http://wiki.zum.de/Hilfe:Graphviz