Hilfe:Graphviz

aus ZUM-Wiki, dem Wiki für Lehr- und Lerninhalte auf ZUM.de
Wechseln zu: Navigation, Suche
ZUM-Logo.png
Seiten bearbeiten:
Erweiterungen
... mehr

ACHTUNG: Diese Erweiterung steht nicht mehr zur Verfügung!


Inhaltsverzeichnis

Bedienungsanleitung

Beispiel

Einführung

<graphviz> digraph NAME {

  1. Ein einfacher zyklischer Graph.
 Knoten1 -> "Knoten 2";
 "Knoten 2" -> Knoten3;
 Knoten3 -> Knoten1;
 Knoten1 -> "Version 1.10.1";

} </graphviz>

<graphviz>
   digraph NAME {
   # Ein einfacher cyclischer Graph.
   Knoten1 -> "Knoten 2";
   "Knoten 2" -> Knoten3;
   Knoten3 -> Knoten1;
   Knoten1 -> "Version 1.10.1";
 }
 </graphviz>

NAME ist der Graph, aber eigentlich unwichtig.

Nodes sind die Knoten und können auch mit Leerzeichen angegeben werden, dann allerdings in Anführungszeichen (node 2).

Die Pfeile (->) geben die Orientierung an, die einzelnen Angaben werden durch Semikolon (;) getrennt.

Komplizierteres Beispiel

<graphviz> digraph G {

subgraph cluster_0 { style=filled; color=lightgrey; node [style=filled,color=white]; a0 -> a1 -> a2 -> a3; label = "Teil 1"; }

subgraph cluster_1 { node [style=filled]; b0 -> b1 -> b2 -> b3; label = "Teil 2"; color=blue } start -> a0; start -> b0; a1 -> b3; b2 -> a3; a3 -> a0; a3 -> end; b3 -> end;

start [shape=diamond]; end [shape=box]; } </graphviz>

<graphviz>
digraph G {

	subgraph cluster_0 {
		style=filled;
		color=lightgrey;
		node [style=filled,color=white];
		a0 -> a1 -> a2 -> a3;
		label = "Teil 1";
	}

	subgraph cluster_1 {
		node [style=filled];
		b0 -> b1 -> b2 -> b3;
		label = "Teil 2";
		color=blue
	}
	start -> a0;
	start -> b0;
	a1 -> b3;
	b2 -> a3;
	a3 -> a0;
	a3 -> end;
	b3 -> end;

	start [shape=diamond];
	end [shape=box];
}
</graphviz>

Formen für die Knoten

Nodeshapes.gif

Abgerundete Formen

<graphviz> digraph R {

 rankdir=LR
 node [style=rounded]
 node1 [shape=box]
 node2 [fillcolor=yellow, style="dashed,rounded,filled", shape=diamond]
 node3 [shape=record, label="{ a | b | c }"]
 node1 -> node2 -> node3

} </graphviz>

<graphviz>
 digraph R {
  rankdir=LR
  node [style=rounded]
  node1 [shape=box]
  node2 [fillcolor=yellow, 
         style="dashed,rounded,
         filled", shape=diamond]
  node3 [shape=record, 
         label="{ a | b | c }"]

  node1 -> node2 -> node3
 }
 </graphviz>

Gestaltungsmöglichkeiten für den Rand: dashed, dotted, bold, solid (default)

Ausrichtung

Die Ausrichtung einer Grafik lässt sich mit rankdir=LR bestimmen. ersetzen:

<graphviz> digraph G { rankdir=TB; A -> B; </graphviz>

<graphviz> digraph G { rankdir=BT; A -> B; </graphviz>

<graphviz> digraph G { rankdir=LR; A -> B; </graphviz>

<graphviz> digraph G { rankdir=RL A -> B; </graphviz>

Von oben nach unten Von unten nach oben Von links nach rechts Von rechts nach links
<graphviz>
digraph G {
rankdir=TB;
A -> B;
</graphviz>
<graphviz>
digraph G {
rankdir=BT;
A -> B;
</graphviz>
<graphviz>
digraph G {
rankdir=LR;
A -> B;
</graphviz>
<graphviz>
digraph G {
rankdir=RL
A -> B;
</graphviz>

Farbe

Farbtabelle

1. Farbbeispiel

<graphviz> digraph G {

 bgcolor="transparent";
 rankdir=LR;
 Diamond  
   [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]; // Pfeile blau
 Standard -> Ei -> Haus [color=red]; 

</graphviz>

<graphviz>
digraph G {
  bgcolor="transparent";
  rankdir=LR;
  Dreieck  
    [shape=triangle, 
     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];

  Dreieck -> Ei -> Kasten -> 
  Haus -> Kreis ->Nix [color=blue]; // Pfeile blau
  Standard -> Ei -> Haus [color=red]; // Standard vorher nicht definiert
                                    // Pfeile rot
</graphviz>

2. Farbbeispiel

<graphviz> digraph G {

   xyz [label = "hallo\nWelt",
       color="slate_blue",
       fontsize=24,
       fontname="Palatino-Italic",
       style=filled,
       fontcolor="hot pink"];
   node [style=filled];
  1. Colors can be hue, saturation, brightness,
   red [color="0.0 1.0 1.0"];
  1. or colors can be red green blue,
   green [color="#00FF00"];
  1. or colors can be named.
   blue [color=blue, fontcolor=black];
   cyan [color=cyan];
   magenta [color=magenta];
   yellow [color=yellow];
   orange [color=orange];
   red -> green;
   red -> blue;
   blue -> cyan;
   blue -> magenta;
   green -> yellow;
   green -> orange;

} </graphviz>

<graphviz>
digraph G {
    xyz [label = "hallo\nWelt",
        color="slate_blue",
        fontsize=24,
        fontname="Palatino-Italic",
        style=filled,
        fontcolor="hot pink"];
    node [style=filled];
# Farben mit Farbton, Sättigung, Helligkeit definieren,
    red [color="0.0 1.0 1.0"];
# oder Farben mit rot grün blau definieren,
    green [color="#00FF00"];
# oder Farben können benannt werden.
    blue [color=blue, fontcolor=black];
    cyan [color=cyan];
    magenta [color=magenta];
    yellow [color=yellow];
    orange [color=orange];
    red -> green;
    red -> blue;
    blue -> cyan;
    blue -> magenta;
    green -> yellow;
    green -> orange;
}
</graphviz>


 

Pfeilspitzen

Globale Angaben werden mit edge= ... angegeben. Die Pfeilspitze mit arrowhead=... Pfeilspitzen.gif

Anwendung

<graphviz> digraph G {

 rankdir=LR;
 edge[color=blue,fillcolor=blue;style=bold];
 node [shape=box, color=green];
 node1 [style=filled]; 
 node2 [style=filled, fillcolor=red]; 
 node0 -> node1 [color=lightblue]; 
 node1 -> node2 [arrowhead=odot color=green]; 
 node2 -> node3 [arrowhead=none];

} </graphviz>

 
  <graphviz>
  digraph G {
  rankdir=LR;
  edge[fillcolor=blue; style=bold]; //Pfeil blau,bold
  node [shape=box, color=green]; // Rahmen grün
  node1 [style=filled]; 
  node2 [style=filled, fillcolor=red]; 
  node0 -> node1 [color=lightblue]; 
  node1 -> node2 [arrowhead=odot color=green]; 
  node2 -> node3 [arrowhead=none];
 }
 </graphviz>

Hintergrund

<graphviz> digraph G { node [shape=circle style=filled, color=blue, fontcolor=white]; bgcolor="transparent"; rankdir="LR"; // Richtung von links

                 // nach rechts

1 -> 2 [color=red]; 2 -> 3 [color=green]; 3 -> 4 [color=darkgreen]; } </graphviz>

 <graphviz>
    digraph G {
    node [shape=circle style=filled, 
          color=blue, 
          fontcolor=white];
    bgcolor="transparent";
    rankdir="LR"; // Richtung von links 
                  // nach rechts
    1 -> 2 [color=red];
    2 -> 3 [color=green];
    3 -> 4 [color=darkgreen];  }
  </graphviz>

Kombinierte Knoten

Hier wird die Struktur shape=record verwendet.

<graphviz> digraph G { node [style=filled, color=black, fillcolor=ghostwhite shape=record]; bgcolor="yellow"; rankdir=BT; struct1 [label="<f0> E|<f1> 0. |<f2> 0", shape=record]; Adresstyp -> struct1:f0; Byteadresse -> struct1:f1[label=" 0 bis ...", fontsize=10]; Bitadresse -> struct1:f2[label=" 0 bis 7", fontsize=10]; } </graphviz>

<graphviz>
   digraph G {
     node [style=filled, 
           color=black, 
           fillcolor=ghostwhite 
           shape=record];
     bgcolor="yellow";
     rankdir=BT; // von unten nach oben
     struct1 
          [label="<f0> E|<f1>   0. |<f2> 0", 
           shape=record]; 
     Adresstyp -> struct1:f0;
     Byteadresse -> struct1:f1[label=" 0 bis ...",
           fontsize=10];
     Bitadresse -> struct1:f2[label=" 0 bis 7",
           fontsize=10]; 
   }
</graphviz>

Links

Beispiel 1

<graphviz>digraph G { node [URL="/wiki/index.php/\N"] Punkt1 [URL="Graphviz"]; // also hierher Punkt1 -> Punkt2; Punkt2 -> Punkt3 [color=blue]; Punkt2 -> Punkt4 [color=red]; </graphviz>

<graphviz>digraph G {
    node [URL="/wiki/index.php/\N"]
    Punkt1 [URL="Graphviz"]; // Also hierher
    Punkt1 -> Punkt2;
    Punkt2 -> Punkt3 [color=blue];
    Punkt2 -> Punkt4 [color=red]; 
</graphviz>

Beispiel 2

Das sieht man
<graphviz>

digraph G { bgcolor="transparent" node [style=filled, color=black, fillcolor=lightblue shape=box]; node [URL="/\N"] "ZUM-Wiki-Rundgang" -> "Was ist ein Wiki?"; "ZUM-Wiki-Rundgang" -> "Das ZUM-Wiki"; "ZUM-Wiki-Rundgang" -> "Probier es aus!"; "Probier es aus!" -> "Ich will im Wiki schreiben."; "Probier es aus!" -> "Ich will im Wiki etwas finden."; "Probier es aus!" -> "Wiki-Fuehrerschein"; "ZUM-Wiki-Rundgang" -> "Wikis in der Schule?"; }

</graphviz>


Das schreibt man
<center><graphviz>
digraph G { 
bgcolor="transparent"
node [style=filled, color=black, fillcolor=lightblue shape=box];
node [URL="/\N"]
"ZUM-Wiki-Rundgang" -> "Was ist ein Wiki?";
"ZUM-Wiki-Rundgang" -> "Das ZUM-Wiki";
"ZUM-Wiki-Rundgang" -> "Probier es aus!";
"Probier es aus!" -> "Ich will im Wiki schreiben.";
"Probier es aus!" -> "Ich will im Wiki etwas finden.";
"Probier es aus!" -> "Wiki-Fuehrerschein";
"ZUM-Wiki-Rundgang" -> "Wikis in der Schule?";
}
</graphviz></center>

Zeilenumbruch

Zeilenumbrüche können manchmal sehr nützlich sein. In Graphviz erstellt man solche mit \n.

<graphviz>

digraph G { bgcolor="transparent" node [style=filled, color=black, fillcolor=white, shape=box]; "So passt der \nText gut\nhinein."; </graphviz>

<graphviz>
   digraph G { 
   bgcolor="transparent"
   node [style=filled, 
         color=black, 
         fillcolor=white,
         shape=box]; 
   "So passt der  \nText gut\nhinein.";
 </graphviz>
NEU:
<graphviz>

digraph G { bgcolor="transparent" node [style=filled, color=red, shape=box]; "Veränderte Farbe \nmit Zeilenumbruch und \n Umlauten äöüÄÖÜß"; </graphviz>

<graphviz>
   digraph G { 
   bgcolor="transparent"
   node [style=filled, 
         color=red, 
         shape=box]; 
   "Veränderte Farbe  \nmit Zeilenumbruch
                  und \n Umlauten äöüÄÖÜß";
  </graphviz>

Auch Umlaute werden richtig dargestellt.

Subgraph

Subgraph ist sinnvoll, wenn Untergruppen benötigt werden.

Die Verwendung von Attributen, wie color=purple; oder style= "dashed"; verschönert die Darstellung. top gehört nicht zu einem Untergraphen und wird daher außerhalb gezeichnet.

<graphviz>

digraph G {

   subgraph cluster_0 {
       label = "hello world";

a -> b; a -> c; color = hot_pink;

   }
   subgraph cluster_1 {

label = "MSDOT"; style= "dashed"; color=purple; x -> y; x -> z; y -> z; y -> q;

   }
   top -> a;
   top -> y;
   y -> b;

} </graphviz>

<graphviz>
digraph G {
    subgraph cluster_0 {
        label = "hello world";
	a -> b;
	a -> c;
	color = hot_pink;
    }
    subgraph cluster_1 {
	label = "MSDOT";
	style= "dashed";
	color=purple;
	x -> y;
	x -> z;
	y -> z;
	y -> q;
    }
    top -> a;
    top -> y;
    y -> b;
}
</graphviz>

Sonstiges

Beginn - Ende

<graphviz>digraph G{ ...}</graphviz>

Größe

size=(4,4)
Größe wird in inch, Breite Höhe angegeben

Kommentar

/* Kommentar */ oder //Kommentar
Am Ende einer Zeile

Bezeichnungen

  • shape
  • sides
  • peripheries
  • color
  • style
  • fontcolor
  • label
a [shape=polygon,
        sides=5,
        peripheries=3, 
        color=blue,
        style=filled,
        fontcolor=white,
        label="TEST"];

<graphviz> digraph G{ a [shape=polygon,sides=5,peripheries=3,color=blue,fontcolor=white,style=filled,label="TEST"]; }</graphviz>

Abschlussbeispiel:

<graphviz> digraph G {

size ="4,4";
main [shape=box]; /* this is a comment */
main -> parse [weight=8];
parse -> execute;
main -> init [style=dotted];
main -> cleanup;
execute -> { make_string; printf}
init -> make_string;
edge [color=red]; // ab jetzt Pfeile rot
main -> printf [style=bold,label="100 mal"];
make_string [label="make a\nstring"];
node [shape=box,style=filled,color=".7 .3 1.0"];
execute -> compare;
}

</graphviz>

<graphviz>
digraph G {
 size ="4,4";
 main [shape=box]; /* this is a comment */
 main -> parse [weight=8];
 parse -> execute;
 main -> init [style=dotted];
 main -> cleanup;
 execute -> { make_string; printf}
 init -> make_string;
 edge [color=red]; // ab jetzt Pfeile rot
 main -> printf [style=bold,label="100 mal"];
 make_string [label="make a\nstring"];
 node [shape=box,style=filled,color=".7 .3 1.0"];
 execute -> compare;
 }
</graphviz>


Linkliste

Siehe auch