Mit der Erweiterung können Sie einfache grafische Abbildungen integrieren, ohne ein separates Grafikprogramm zu bemühen. Vorallem Strukturdiagramme, Pfeildiagramme, aber auch andere automatisch erzeugte Diagramme lassen sich damit schnell und unkompliziert erstellen. Im Folgenden werden die grundlegenden Funktionen zur Produktion einfacher Pfeildiagramme erläutert.
Code:
<graphviz>
digraph Beispiel1 {Hallo -> "Welt!"}
</graphviz>
Ergebnis:
<graphviz> digraph Beispiel1 {Hallo -> "Welt!"} </graphviz>
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.
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).
Code:
<graphviz>
digraph Beispiel2 {
graph [rankdir=LR]
Hallo -> "Welt"
}
</graphviz>
Ergebnis:
<graphviz> digraph Beispiel2 { graph [rankdir=LR]
Hallo -> "Welt"
} </graphviz>
Wollen Sie die Größe des Graphen nachträglich vergrößern oder verkleinern verwenden Sie das Attribut size="Breite in Zoll, Höhe in Zoll".
Code:
<graphviz>
digraph Beispiel3 {
graph size=(4, 4)
Hallo -> "Welt!"
}
</graphviz>
Ergebnis:
<graphviz> digraph Beispiel3 { graph [size="4,4"]
Hallo -> "Welt!"
} </graphviz>
node [fontname=Verdana,fontsize=12] node [shape=box/ellipse/circle/egg/plaintext/triangle/diamond, style=filled/rounded, color=green, fillcolor=grey, fontcolor=white]
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]
Hinweis: Zuerst werden die Knoten (node) initiiert und mit Attributen ausgestattet, anschließend die Kanten (edge) zwischen ihnen angelegt.
Code:
<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>
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>
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
Es handelt sich hierbei um das Tutorial für LOOP1. Die Dokumentation für LOOP 2 wird gegenwärtig entwickelt: https://loop.eduloop.de. Viele Funktionen lassen sich ähnlich auch in LOOP2 verwenden.