Veröffentlicht von am 29. September 2008 in langgemachtes | Keine Kommentare

Wie im ersten Teil bereits angesprochen, hier nun die Fortsetzung.

In diesem Teil soll es nun um die Kanten-Attribute (edge attributes) gehen. Auch hier sei darauf verwiesen, dass ich Attribute und Eigenschaften sofort bei ihrem ersten Auftreten erläutern und im weiteren Verlauf nicht mehr darauf eingehen werde.

Da ich im ersten Teil nicht darauf hingewiesen habe, möchte ich es an dieser Stelle nachholen.

Die Eigenschaften von Knoten- bzw. Kantenattribute werden auf die nachfolgenden Knoten und Kanten weitervererbt! Ich bitte dieses zu beachten.

Am folgenden Diagramm sollen die Kanten-Attribute erläutert werden.

GraphViz-Tutorial (edge)

Auf einige Attribute bin ich bereits im ersten Teil eingegangen. Der Vollständigkeit halber möchte ich sie hier nochmals erwähnen.

Die Notation könnt Ihr in gewohnter Weise auf der Seite ashitani.jp/gv/ eingeben.

Diagrammtitel der ersten Ebene

Bis auf den Diagrammtitel "Kleines GraphViz Tutorial - Teil 2" bleibt der Code unverändert.

  1. compound="true";
  2. remincross="true";
  3.  
  4. // Diagrammtitel der ersten Ebene
  5. "Kleines GraphViz Tutorial - Teil 2" [
  6.    shape="box",
       width="5.0",
       height="0.7",
       peripheries="1",
       fontcolor="0.6,0.9,0.8",
       fontsize="18",
       color="#A0522D",
       style="dashed,diagonals,filled",
       fillcolor="lavenderblush"
  7. ];
  8. // Hinweis
  9. "Liste unvollstaendig" [
  10. shape="box",
       width="2.0",
       height="0.2",
       peripheries="1",
       fontcolor="black",
       fontsize="9",
       fontname="Courier",
       color="navy",
       style="filled",
       fillcolor="white"
  11. ];
  12.  

Die erste Ebene

Kante und Knoten der zweiten Ebene

Für die erste Ebene geben wir diesen Code ein:

  1. // Kante erste Ebene - Knoten zweite Ebene
  2. edge [
  3.    color="slateblue",
       arrowhead="invodot",
       arrowtail="invodot",
       arrowsize="0.7"
  4. ];
  5.  
  6. // Knoten der zweiten Ebene
  7. node [
  8.    shape="box",
       width="15.0",
       peripheries="2",
       fontcolor="black",
       fontsize="12",
       color="powderblue",
       style="filled"
  9. ];
  10. "Kleines GraphViz Tutorial - Teil 2"--"Knoten-Attribute\nedge [attributes]";
  11.  

Die zweite Ebene

Bis auf die Knotenbezeichnung der zweiten Ebene ändert sich nichts. Hier nochmals die Kantenattribute arrowhead, arrowtail und arrowsize kurz erläutert:

  1. Kanten- bzw. Pfeilkopf: arrowhead mit den Werten (none | normal | dot | odot | inv | invdot | invodot)
  2. Kanten- bzw. Pfeilende: arrowtail mit den Werten (none | normal | dot | odot | inv | invdot | invodot)
  3. Kanten-/Pfeilgröße: arrowsize als skalierbarer Wert

Kante und Knoten der dritten Ebene

Für die dritte Ebene geben wir folgenden Code ein:

  1. // Kante zweite Ebene - Knoten dritte Ebene
  2. edge [
  3.    color="saddlebrown",
       arrowhead="dot",
       arrowtail="odot",
       arrowsize="0.7"
  4. ];
  5.  
  6. // Knoten der dritten Ebene
  7. node [
  8.    shape="ellipse",
       width="1.3",
       peripheries="2",
       fontcolor="black",
       color="lavender",
       style="filled"
  9. ];
  10. "Kanten-Attribute\nedge [attributes]"--"arrowhead/arrowtail";
  11. "Kanten-Attribute\nedge [attributes]"--"arrowsize";
  12. "Kanten-Attribute\nedge [attributes]"--"headlabel";
  13. "Kanten-Attribute\nedge [attributes]"--"taillabel";
  14. "Kanten-Attribute\nedge [attributes]"--"label";
  15. "Kanten-Attribute\nedge [attributes]"--"labelfontsize";
  16. "Kanten-Attribute\nedge [attributes]"--"labelfontname";
  17. "Kanten-Attribute\nedge [attributes]"--"labelfontcolor";
  18. "Kanten-Attribute\nedge [attributes]"--"color";
  19. "Kanten-Attribute\nedge [attributes]"--"style";
  20. "Kanten-Attribute\nedge [attributes]"--"headport/tailport";
  21.  

Die dritte Ebene

Auch hier hat sich bis auf die Knotenbezeichnung der dritten Ebene nichts weiter am Code geändert.

Hinweis!
Attributnamen, die als Knotennamen verwendet werden, müssen zwingend in Anführungsstriche "..." gesetzt werden, da GraphViz sonst versucht, sie zu verarbeiten.

Kante und Knoten der vierten Ebene

Der Code der vierten Ebene ist etwas umfangreicher. Dieser lautet folgendermaßen:

  1. // Knoten der vierten Ebene
  2. node [
  3.    shape="box",
       width="0.75",
       peripheries="1",
       fontcolor="#990000",
       fontsize="9",
       fontname="Courier",
       color="black",
       style="filled",
       fillcolor="#FFF5E6"
  4. ];
  5. "arrowhead/arrowtail" [width="5.0"];
  6. "headport/tailport" [width="8.0"];
  7.  
  8. // Kante dritte Ebene - Knoten vierte Ebene - Kanten- bzw. Pfeilarten
  9. edge [
  10.    color="darkseagreen",
       arrowhead="none",
       arrowtail="none",
       arrowsize="0.7"
  11. ];
  12. "arrowhead/arrowtail"--"none";
  13. edge [
  14.    color="darkseagreen",
       arrowhead="normal",
       arrowtail="normal",
       arrowsize="0.7"
  15. ];
  16. "arrowhead/arrowtail"--"normal";
  17. edge [
  18.    color="darkseagreen",
       arrowhead="dot",
       arrowtail="dot",
       arrowsize="0.7"
  19. ];
  20. "arrowhead/arrowtail"--"dot";
  21. edge [
  22.    color="darkseagreen",
       arrowhead="odot",
       arrowtail="odot",
       arrowsize="0.7"
  23. ];
  24. "arrowhead/arrowtail"--"odot";
  25. edge [
  26.    color="darkseagreen",
       arrowhead="inv",
       arrowtail="inv",
       arrowsize="0.7"
  27. ];
  28. "arrowhead/arrowtail"--"inv";
  29. edge [
  30.    color="darkseagreen",
       arrowhead="invdot",
       arrowtail="invdot",
       arrowsize="0.7"
  31. ];
  32. "arrowhead/arrowtail"--"invdot";
  33. edge [
  34.    color="darkseagreen",
       arrowhead="invodot",
       arrowtail="invodot",
       arrowsize="0.7"
  35. ];
  36. "arrowhead/arrowtail"--"invodot";
  37.  

Die vierte Ebene

Die neuen Knotennamen stellen die Eigenschaften der Attribute arrowhead und arrowtail dar, die hier als dazugehörige Kante verwendet wird.

Als nächstes folgt der Code zweier Cluster zum Gruppieren der Knoten für die Pfeilgröße und der Schriftart:

  1. // Cluster1 als Knoten der vierten Ebene
  2. // Gruppierung der Knoten fuer die Pfeilgroesse
  3. subgraph cluster1 {
  4.    fontsize="10";
       label="Die Pfeilgroesse" [
         fontcolor="darkgreen"
       ];
       style="filled";
       fillcolor="#FFF5E6";
  5.  
  6.    // Knoten fuer die Pfeilgroesse
  7.    node [
  8.      peripheries="1",
         fontcolor="#990000",
         fontsize="9",
         fontname="Courier",
         color="coral",
         style="filled",
         fillcolor="#F5FFF5"
  9.    ];
  10.    "Zahlenwert, z.B." [
  11.      shape="box",
         width="2.7"
  12.    ];
  13.    "0.7" [
  14.      shape="box"
  15.    ];
  16.    "1.2" [
  17.      shape="box"
  18.    ];
  19.    "1.7" [
  20.      shape="box"
  21.    ];
  22.  
  23.    edge [
  24.      color="royalblue",
         arrowhead="odot",
         arrowtail="none",
         arrowsize="0.7"
  25.    ];
  26.    "Zahlenwert, z.B."--"0.7";
  27.    edge [
  28.      color="royalblue",
         arrowhead="odot",
         arrowtail="none",
         arrowsize="1.2"
  29.    ];
  30.    "Zahlenwert, z.B."--"1.2";
  31.    edge [
  32.      color="royalblue",
         arrowhead="odot",
         arrowtail="none",
         arrowsize="1.7"
  33.    ];
  34.    "Zahlenwert, z.B."--"1.7";
  35. }
  36.  

Die vierte Ebene – Cluster1

Hier der Code für Cluster2:

  1. // Cluster2 als Knoten der vierten Ebene
  2. // Gruppierung der Knoten zur Schriftart
  3. subgraph cluster2 {
  4.    fontsize="10";
  5.    label="Die Schriftart" [
  6.      fontcolor="darkgreen"
  7.    ];
  8.    style="filled";
  9.    fillcolor="#FFF5E6";
  10.  
  11.    // Knoten zur Schriftart
  12.    node [
  13.      shape="box",
         peripheries="1",
         fontcolor="#990000",
         fontsize="9",
         color="coral",
         style="filled",
         fillcolor="#F5FFF5"
  14.    ];
  15.    "Standardschrift";
  16.    "Times" [
  17.      fontname="Times"
  18.    ];
  19.    "Helvetica" [
  20.      fontname="Helvetica"
  21.    ];
  22.    "Courier" [
  23.      fontname="Courier"
  24.    ];
  25.    "Symbol" [
  26.      fontname="Symbol"
  27.    ];
  28.  
  29.    edge [
  30.      color="royalblue",
         arrowhead="none",
         arrowtail="none"
  31.    ];
  32.  
  33.    "Standardschrift"--"Times"--"Helvetica"--"Courier"--
       "Symbol";
  34. }
  35.  

Die vierte Ebene – Cluster2

Hinweis!
Ich habe im Listing für Cluster2 in Zeile 33 aufgrund der Länge einen Zeilenumbruch eingefügt. Dieser Zeileneintrag muss komplett hintereinander geschrieben werden!

Abschließend folgt der restliche Code sowohl für den Kantenansatz an die Cluster als auch für die Kanten der übrigen Knoten:

  1. // Kante dritte Ebene - Cluster1, 2 und Knoten der vierten Ebene
  2. edge [
  3.    arrowhead="none",
       arrowtail="inv",
       arrowsize="0.7"
  4. ];
  5.  
  6. "arrowsize"--"Zahlenwert, z.B." [
  7.    lhead="cluster1"
  8. ];
  9. "labelfontname"--"Standardschrift" [
  10.    lhead="cluster2"
  11. ];
  12.  

Die vierte Ebene – Kante zu den Clustern

Die beiden Attribute lhead und ltail nochmals kurz erläutert.

  1. Kantenansatz: lhead Name des Clusters der den Kopf der Kante verwendet
  2. Kantenansatz: ltail Name des Clusters der das Ende der Kante verwendet

Nun der Code für die Kantenbezeichnungen:

  1. // Kante dritte Ebene - Knoten vierte Ebene - Kantenbezeichnungen
  2. edge [
  3.    arrowhead="none",
       arrowtail="inv",
       headlabel="head",
       taillabel="",
       labelfontcolor="darkgreen",
       labelfontsize="10"
  4. ];
  5. "headlabel"--"irgendein Name";
  6. edge [
  7.    arrowhead="none",
       arrowtail="inv",
       headlabel="",
       taillabel="tail",
       labelfontcolor="darkgreen",
       labelfontsize="10"
  8. ];
  9. "taillabel"--"irgendein Name";
  10. edge [
  11.    arrowhead="none",
       arrowtail="inv",
       taillabel=""
  12. ];
  13. "label"--"irgendein Name";
  14.  

Die vierte Ebene – Kantenbezeichnungen

Die neu hinzugekommenen Attribute lauten:

  1. Beschriftung am Kanten- bzw. Pfeilkopf: headlabel mit einen Namen
  2. Beschriftung am Kanten- bzw. Pfeilende: taillabel mit einen Namen
  3. Schriftfarbe der Beschriftung: labelfontcolor mit Werten als Farbname, als HSB-Tripel mit Werten zwischen 0 und 1 oder als RGB-Tripel mit Hexadezimalwerten zwischen 00 und FF
  4. Schriftgröße der Beschriftung: labelfontsize mit einem Zahlenwert

Hier der Code für die Labelgröße, Labelfarbe und Farbe:

  1. // Kante dritte Ebene - Knoten vierte Ebene - Labelgroesse
  2. edge [
  3.    arrowhead="none",
       arrowtail="inv",
       headlabel="",
       taillabel="Labelgroesse",
       labelfontcolor="crimson",
       labelfontsize="15"
  4. ];
  5. "labelfontsize"--"Zahlenwert, z.B. 15";
  6.  
  7. // Kante dritte Ebene - Knoten vierte Ebene - Labelfarbe
  8. edge [
  9.    style="solid",
       arrowhead="none",
       arrowtail="inv",
       arrowsize="0.7",
       taillabel="Labelfarbe",
       labelfontcolor="crimson",
       labelfontsize="10"
  10. ];
  11. "labelfontcolor"--"Farbname, RGB- oder HSB-Tripel\nroyalblue, #FF0000 oder 0.6,0.9,0.8";
  12.  
  13. edge [
  14.    style="solid",
       arrowhead="none",
       arrowtail="inv",
       arrowsize="0.7",
       taillabel=""
  15. ];
  16. "color"--"Farbname, RGB- oder HSB-Tripel\nroyalblue, #FF0000 oder 0.6,0.9,0.8";
  17.  

Die vierte Ebene – Labelgröße, Labelfarbe und Farbe

Es folgt der Code für das Kantenformat:

  1. // Kante dritte Ebene - Knoten vierte Ebene - Kantenformat
  2. edge [
  3.    style="solid",
       arrowhead="none",
       arrowtail="inv",
       arrowsize="0.7"
  4. ];
  5. "style"--"solid";
  6. edge [
  7.    style="dashed",
       arrowhead="none",
       arrowtail="inv",
       arrowsize="0.7"
  8. ];
  9. "style"--"dashed";
  10. edge [
  11.    style="dotted",
       arrowhead="none",
       arrowtail="inv",
       arrowsize="0.7"
  12. ];
  13. "style"--"dotted";
  14. edge [
  15.    style="bold",
       arrowhead="none",
       arrowtail="inv",
       arrowsize="0.7"
  16. ];
  17. "style"--"bold";
  18.  

Die vierte Ebene – Kantenformat

Abschließend noch der Code für die Kanten- bzw. Pfeilausrichtung:

  1. // Kante dritte Ebene - Knoten vierte Ebene - Ausrichtung
  2. edge [
  3.    style="solid",
       headport="n"
  4. ];
  5. "headport/tailport"--"n";
  6. edge [
  7.    headport="ne"
  8. ];
  9. "headport/tailport"--"ne";
  10. edge [
  11.    headport="e"
  12. ];
  13. "headport/tailport"--"e";
  14. edge [
  15.    headport="se"
  16. ];
  17. "headport/tailport"--"se";
  18. edge [
  19.    headport="s"
  20. ];
  21. "headport/tailport"--"s";
  22. edge [
  23.    headport="sw"
  24. ];
  25. "headport/tailport"--"sw";
  26. edge [
  27.    headport="w"
  28. ];
  29. "headport/tailport"--"w";
  30. edge [
  31.    headport="nw"
  32. ];
  33. "headport/tailport"--"nw";
  34.  

Die vierte Ebene – Kanten- bzw. Pfeilausrichtung

Die beiden neuen Attribute lauten:

  1. Ausrichtung von Kanten- bzw. Pfeilkopf: headport mit den Werten (n | ne | e | se | s | sw | w | nw)
  2. Ausrichtung von Kanten- bzw. Pfeilende: tailport mit den Werten (n | ne | e | se | s | sw | w | nw)

Die Werte entsprechen dabei den Himmelsrichtungen.

Ich stelle Euch wieder die dazugehörige Textdatei graphviz_tutorial_edge zur Verfügung.

Sollte das Diagramm nicht dargestellt werden, so ist es ratsam, die Kommentare und Leerzeilen zu entfernen.

Weiterführende Informationen sind im PDF-Dokument dot_guide zu finden.

Resümee

Neben dieser Website, auf der die Notation von Hand eingegeben werden muss, existieren darüber hinaus eine Vielzahl von Programmen mit denen über eine grafische Benutzeroberfläche Diagramme schnell und einfach erstellt werden können.

Benutzeroberfläche uDraw(Graph)

Hier möchte ich die Programme uDraw(Graph) der Uni Bremen (siehe Bild) sowie aiSee der AbsInt Angewandte Informatik GmbH erwähnen.

Letzteres verwendet die GDL-Notation, die ähnlich der DOT-Notation aufgebaut ist und ebenfalls einfach zu erlernen ist.

Die Graphen auf der Grundlage einer Auszeichnungssprache wie XHTML bzw. XML zu erstellen, deren Aussehen mittels Stylesheet-Datei zu beeinflussen und im Browser darzustellen, ist derzeit leider noch nicht möglich.

Weiterführende Links:

Artikel verschlagwortet mit: ,

Kommentar absenden

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>