Björn Klippstein

Graphviz-Optimierung

Klippstein IT Service

Aus 4webmaster.de

Wechseln zu: Navigation, Suche

Hilfe, mein Diagramm ist zu groß!

Es gibt verschiedene Möglichkeiten, dafür zu sorgen, dass ein Diagramm nur soviel Raum einnimmt, wie es soll. Leider: Am Schönsten wäre es ja, wenn das alles automatisch funktionieren würde. Aber wenn Sie die kritischen Parameter kennen, an denen Sie drehen müssen, ist es ganz einfach. Ich beschreibe diese Parameter jetzt im Detail. Die abschließende Übersicht der Layout-Parameter fasst noch einmal tabellarisch zusammen, welchen Parameter Sie in welchem Renderer zur Optimierung der Diagrammgröße verwenden können.

size

Zuallererst können Sie den Platz beschränken, den ein Diagramm einnehmen kann. Dazu dient der Parameter size. size ein Attribut des Graphen und legt die maximale Größe des Diagrammes fest. Die kleinen quadratischen Diagramme im Abschnitt Graphviz-Renderer sind z.B. mit folgender Einstellung entstanden:

graph [size="3, 3"]

Die maximale Größe wird in Inches angegeben, erst die Breite und dann die Höhe. Die meisten größeren Diagramme auf dieser Seite haben folgende size-Einstellung:

graph [size="10.3, 5.3"] 

Diese Größe würde einen 1024er-Bildschirm komplett ausnutzen. Der Parameter hat aber überhaupt erst dann eine Wirkung, wenn das Diagramm die maximale Größe zu überschreiten droht. In diesem Fall wird das Diagramm einfach so weit verkleinert, bis es passt. Optisch bedeutet das: Alle Nodes werden kleiner, alle Schriften werden kleiner. Das ist besser, als wenn der Betrachter das Diagramm nicht mehr in einem Stück sehen kann, aber gut ist das auch nicht.

ranksep

Beispiel für Graphviz-Attribut ranksep
ranksep=0.5 (Default)

Beispiel für Graphviz-Attribut ranksep
ranksep=0.25

Wenn Sie dot als Renderer verwenden, können Sie die Abstände zwischen den hierarchischen Rängen verkleinern. Dazu verwenden Sie den Parameter ranksep. ranksep ist ein Attribut des Graphen und wird in Inches angegeben. Die beiden Beispieldiagramme illustrieren die Wirkung von ranksep.

ranksep funktioniert ähnlich auch beim Renderer twopi. Wenn Sie diesen Renderer verwenden sollten, müssen Sie ranksep fast immer explizit angeben, da der Standardwert von twopi (ranksep=1.0) oft zu groß ist.


nodesep

Graphviz-Diagramm Attribut nodesep
Mit Angabe von nodesep=0.05

Graphviz-Diagramm Attribut nodesep
Ohne Angabe von nodesep

Wenn Sie dot als Renderer verwenden, können Sie auch die Abstände zwischen hierarchisch gleichgestellten Nodes verändern. Hierzu setzen Sie das Attribut nodesep des Graphen. In neato oder einem anderen Renderer funktioniert dies aber nicht.

Betrachten Sie das Beispiel links. Auch hier wurde die Größe ist mit size="3,3" festgelegt, und dot hat das Diagramm übermäßig verkleinert. Durch die Angabe von nodesep=0.05 müssen die Nodes nicht mehr verkleinert werden und das Diagramm passt in die angegebene Maximalgröße. Vergleichen Sie die horizontalen Abstände zwischen den Nodes bzw. ihr Verhältnis zur Größe der Nodes.


len

Graphviz-Attribut len
Mit Angabe von len=0.5

Graphviz-Attribut len
Ohne Angabe von len

Der Parameter len hat für neato und fdp eine ähnliche Wirkung wie ranksep und nodesep für dot oder twopi, wenn Sie ihn global für alle Edges festlegen. Beachten Sie bitte, dass dieses Attribut anders als die anderen Attribute ein Edge-Attribut ist. Sie können den Standardwert wie folgt festlegen:

edge [len=0.5]

Wenn Sie mit neato rendern, müssen Sie len fast immer explizit angeben, da der Standardwert von neato (1 Inch) meist zu groß ist.


mindist

mindist-Attribut (Graphviz)
Mit Angabe von mindist=0.01

mindist-Attribut (Graphviz)
Ohne Angabe von mindist: Nicht zu erkennen

Falls Sie auch mit circo rendern wollen, stellen Sie den Parameter mindist ein. Circo geht standardmäßig sehr verschwenderisch mit dem verfügbaren Platz um.

Oft enthalten Circo-Diagramme so viel freien Raum, dass man die Nodes und Edges darin kaum sehen kann. Ein Beispiel ist das Diagramm links. Nur wenn Sie genau hinschauen, können Sie einige blaue Punkte erkennen.

Mit dem Graph-Attribut mindist können Sie das Diagramm etwas verbessern. Der Wert muss recht feinfühlig eingestellt werden, auf Werte zwischen 0.5 und 0.01. Je mehr Nodes Ihr Diagramm enthält, desto kleiner muss mindist sein.

Der Defaultwert ist 1.0. Das Diagramm links, auf dem nur ein wenig blauer Dreck zu sehen ist, verwendet übrigens schon mindist=0.5, damit Sie überhaupt etwas sehen. Andernfalls wäre das Diagramm komplett weiß bis auf einen einzigen Pixel.


ratio

ratio-Attribut (Graphviz)
Mit Angabe von ratio=1.5

ratio-Attribut (Graphviz)
Ohne Angabe von ratio

Wollen Sie ein Diagramm horizontal verbreitern oder vertikal verlängern, dann funktioniert das am einfachsten und mit allen Renderern über die Angabe von ratio. Mit diesem Parameter teilen Sie dem Renderer das gewünschte Seitenverhältnis mit. Die Beispieldiagramme links und rechts sollen dies illustrieren. Im linken Diagramm ist nodesep extrem klein gewählt, so dass das Ergebnis etwas schlapp aussieht. Man könnte das mit einem größeren Wert von nodesep korrigieren, aber dann ist das Seitenverhältnis abhängig von der Diagrammstruktur. Im rechten Diagramm wird daher mit ratio=1.5 das gewünschte Seitenverhältnis angegeben und ein besseres Ergebnis erzielt.

Bei einer Angabe von ratio=2 erhalten Sie ein Diagramm mit dem Seitenverhältnis 1:2 im Hochformat. Wünschen Sie ein Seitenverhältnis von 2:1 im Querformat, dann geben Sie ratio=0.5 an. Die Angabe von ratio erzwingt das gewünschte Seitenverhältnis. Notfalls werden auch die Nodes inkl. ihrer Beschriftungen verkleinert um das gewünschte Seitenverhältnis zu erzielen.


start

Graphviz start-Attribut
start=7

Graphviz start-Attribut
start=2

Für neato und fdp gibt es ein Graph-Attribut namens start. Wenn Ihnen das Layout eines Diagrammes nicht gefällt, setzen Sie einfach dieses Attribut. Für unterschiedliche Werte von start erhalten Sie unterschiedliche Diagramme. Vor allem bei fdp sind die Ergebnisse höchst unterschiedlich. Manchmal muss man einige Werte durchprobieren, bis man ein schönes Layout erzielt.


Übersicht Layout-Parameter

Die folgende Übersicht zeigt, welchen Parameter Sie in welchem Renderer zur Optimierung der Diagrammgröße verwenden können. Sie können die Spalten mit zwei Klicks auf den gewünschten Renderer sortieren. Je mehr Kreuzchen (xxx), desto wichtiger ist der Parameter.

Parameter Bedeutung dot neato fdp circo twopi Default-Wert Beispiel-Werte
size Maximale Größe des Diagrammes.
Breite, Höhe in Inches.
xx xx xx xx xx -- "3,3" (klein)
"10.3,5.3" (passt auf 1024er Bildschirm)
ranksep Abstand zwischen den hierarchischen Rängen x xxx 0.5 (dot)
1.0 (twopi)
0.1 (winzig)
0.6 (groß)
nodesep Minimaler Abstand zwischen zwei hierarchisch gleichgestellten Nodes x 0.25 nodesep=0.05 (winzig)
len Bevorzugte Edge-Länge
Dies ist ein Edge-Attribut! Siehe Parameter len
xxx x 1.0 (neato)
0.3 (fdp)
0.5
mindist Beeinflusst den Platzbedarf von Circos Diagrammen xxx 0.5 (wenige Nodes)
0.01 (viele Nodes)
ratio Gewünschtes Seitenverhältnis x x x x x -- 2 (Hochformat)
start Beeinflusst die zufällige Verteilung der Nodes x xxx 2
overlap Sind Überlappungen erlaubt? x xx true false (sonst fallen manchmal Edges zusammen)

Kopiervorlage

Damit man die wichtigsten Parameter nicht jedesmal wieder neu nachschlagen muss, kann man sich eine Kopiervorlage erstellen, die man bei der Erstellung neuer Diagramme verwendet. Deaktivierte Bereiche sind auskommentiert.
Dies ist meine Kopiervorlage (für Mediawiki):

<graphviz renderer='dot' caption='Titel des Diagrammes' alt='Titel des Diagrammes' position='none'>
digraph G {
    graph [size="10.3,5.3", ranksep=0.5, nodesep=0.1, overlap=false, start=1]
 /* graph [rankdir=LR] */
    node  [shape=Mrecord, color="#BBBBBB"]
 /* node  [shape="ellipse", style=filled, fillcolor="#EEEEEE", color="#EEEEEE"] */
    node  [fontname=Verdana, fontsize=12, height=0.02, width=0.02]
    edge  [color="#31CEF0", len=0.5]
    edge  [fontname=Arial, fontsize=11, fontcolor="#31CEF0"]
 
}
</graphviz>



Dieser Artikel ist ein Originalartikel von 4webmaster.de. Copyright: Björn Klippstein; CC-Lizensierung in Kürze