3.11.1.3 Abbildungen mit GraphViz erstellen

[unmarkierte Version]

Version vom 28. Januar 2016, 12:17 Uhr

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=vee]} </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

Wie beeinflusse ich die Richtung meines Graphen?

[rankdir=TB/BT/LR/RL]

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

graph [size="5, 5"] (in Zoll angegeben)

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

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 Kanten?

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

@@ Zeile 9: / Zeile 9: @@
 '''Ergebnis:'''
 <graphviz>
-digraph Beispiel1 {Hallo -> "Welt!"}
+digraph Beispiel1 {Hallo - "Welt!"[arrowhead=vee, arrowtail=vee]}
 </graphviz>
 </loop_area>
 ===Was ist ein graph, node und edge?===
-Graph, Knoten, Kante
+'''graph:'''<br \>
+Im obigen Beispiel gibt es einen <tt>graph</tt> (deut.: Graphen), welcher gerichtet ist von oben nach unten verläuft. Darum wird er auch als <tt>digraph</tt> eingefügt und heißt <tt>Beispiel1</tt>. Es gibt auch ungerichtete Graphen auf die jedoch in diesen Erläuterungen nicht eingegangen wird.
-Wie beeinflusse ich die Richtung meines graph?
+'''node:'''<br \>
+Ein <tt>node</tt> (deut.: Knoten) ist ein Element, die durch eine oder mehrere Verknüpfungen mit einander verbunden werden. Im Beispiel heißen die Knoten <tt>Hallo</tt> und <tt>Welt!</tt>. Ein Knoten muss nicht extra initiiert werden, sondern wird bei seiner ersten Verwendung gebildet.
+'''edge:'''<br \>
+Eine <tt>edge</tt> (deut.: Kante) ist eine Verknüpfung zwischen Knoten. Eine gerichtete Verbinidung entsteht
+===Wie beeinflusse ich die Richtung meines Graphen?===
 [rankdir=TB/BT/LR/RL]
-Wie ändere ich die Größe des graph?
+===Wie ändere ich die Größe eines Graphen?===
-graph [size="5, 5"]  \in Zoll angegeben
+graph [size="5, 5"]  (in Zoll angegeben)
-Wie verändere ich die Form, Farbe und Fonts meiner nodes?
+===Wie verändere ich die Form, Farbe und Fonts meiner Knoten?===
 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?
+===Wie beeinflusse ich die Beschreibung, Farbe und Pfeilspitze von Kanten?===
 edge [fontname=Verdane, fontsize=12, fontcolor=blue/"#EEEEEE"]