2011-08-19 20 views
17

Desidero creare un diagramma di flusso (simile a Visio) utilizzando Graphviz. Ecco un esempio di digramma.Creazione di bordi diritti in Graphviz

digraph start_up { 
node [style = rounded]; 
node [shape = rect] start end; 
node [style = ""]; 
node [shape = diamond] "USB\nCommand\nArrived"; 
start -> "Initialize\nCode"; 
"Initialize\nCode" -> "USB\nCommand\nArrived"; 
"USB\nCommand\nArrived" -> "USB\nCommand\nArrived" [label="No" tailport=w headport=n]; 
"USB\nCommand\nArrived" -> "Has USB 3.0\nInterface Been\nSelected" [label = "Yes"]; 
"Has USB 3.0\nInterface Been\nSelected" -> end 
} 

Il problema è quando io rendo questo Graphviz la linea creata da "USB\nCommand\nArrived" -> "USB\nCommand\nArrived" [label="No" tailport=w headport=n]; sembra piuttosto brutto. Non mi dispiacerebbe linee curve, ma questa linea sembra deformata. Si può vedere ciò Graphviz crea qui

C'è un modo per rendere questo un aspetto migliore?

risposta

28

Penso che sia meglio imparare punto con l'esempio. Basta leggere i miei commenti e sarò lieto di rispondere se qualcosa non è chiaro.

Come nodo laterale: Mentre graphviz è grande per generare grafici per dati di grandi dimensioni, è meno impressionante per creare cose come diagrammi ER, portate caratteri e diagrammi di sequenza. È possibile e relativamente semplice, ma la quantità di tempo che devi dedicare a far emergere qualcosa è spesso ingiustificata perché potresti ottenere lo stesso risultato con uno strumento di modellazione Wsywig-GUI in una frazione del tempo. Tuttavia, il tempo che dedichi a farlo ti aiuterà ad apprendere la sintassi e le proprietà del linguaggio che sono davvero utili quando devi visualizzare alcuni problemi complessi o di grandi dimensioni (in cui gli strumenti di modellazione della GUI sarebbero inutili).


digraph start_up { 
    { 
/* fake levels (level0 -> level1) and support nodes 
* 
* graphviz to charts is what latex is to documents, 
* sometimes you'll have to fight it. 
* This is typically done by defining levels and connection points that 
* don't really have anything to do with your graph, but are used to 
* force the graph to appear in a certain way. 
*/ 
     node [shape=none, /*label="."*/]; l1a; l2a; l3a; l4a; l5a; l6a; 
     node [shape=square label="no"]; l20a; 
    } 

    { /* connectiong point for the no arrow above "arrived" */ 
     node [width=0 shape=point label=""]; 
     d1; no; 
    } 

    node [style = rounded]; 
    node [shape = rect] start end; 
    node [style = ""]; 

    node [shape = diamond]; { 
     node [label="USB\nCommand\nArrived"]; arrived; 
     node [label="Has USB 3.0\nInterface Been\nSelected"]; selected; 
     node [label="Initialize\nCode"]; init; 
    } 

    start -> init; 
    /*init -> arrived; */ 
    init -> d1 [arrowhead=none]; 
      d1 -> arrived; 

/* 
* tricky part: 
* since nodes in a digrap go either from top to bottom or left to right, we 
* can usually not connect (->) two nodes and have them appear on the same 
* level unless the connection is specified within a block that has the 
* parameter `rank' set to `same' 
*/ 
      l20a->no [arrowhead=none]; 

    { rank=same; no -> arrived [dir=back arrowtail=none]; } 
    { rank=same; l20a -> d1; } 

    /*arrived  -> arrived;*/ /* [label="No" tailport=w headport=n]; */ 
    arrived  -> selected [label = "Yes"]; 
    selected -> end 


    /* just to demonstrate */ 
    l1a-> l2a-> l3a-> l4a-> l5a-> l6a; 
} 

Solution proposal

+0

proposito, [PlantUml] (http://plantuml.com/) è più che impressionante per la creazione di diagrammi relativi al codice e si basa su graphviz. –

Problemi correlati