3.11.1.3 Abbildungen mit GraphViz erstellen

Mit der Erweiterung können Sie einfache grafische Abbildungen integrieren, ohne ein separates Grafikprogramm zu bemühen.

Beispiel

Code:

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

Ergebnis:

<graphviz> digraph Beispiel1 {Hallo -> "Welt!" [arrowhead=vee, arrowtail=tee]} </graphviz>

Was ist ein graph, node und edge? Graph, Knoten, Kante

Wie beeinflusse ich die Richtung meines graph? [rankdir=TB/BT/LR/RL]

Wie ändere ich die Größe des graph? graph [size="5, 5"] \in Zoll angegeben

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

node [fontname=Verdana,fontsize=12] node [shape=box/ellipse/circle/egg/plaintext/triangle/diamond, style=filled/rounded, color=green, fillcolor=grey, fontcolor=white]

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

edge [fontname=Verdane, fontsize=12, fontcolor=blue/"#EEEEEE"] edge [arrowhead=normal/dot/odot/inv/vee/none, arrowtail=tee/dot/odot/vee/normal, color=blue, label=Beschreibung] A -> B [label=Beschreibung]

Beispiel

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

Code:

<graphviz> digraph Beispiel2 {

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

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

</graphviz>

Ergebnis:

graphviz> digraph Beispiel2 {

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

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

</graphviz>

Detaillierte Informationen finden Sie unter
http://www.mediawiki.org/wiki/GraphViz

Eine gute Übersicht was mit der Erweiterung möglich ist finden Sie unter
http://wiki.zum.de/Hilfe:Graphviz