Transcription of Drawing graphs with
1 Drawing graphs withdotEmden R. Gansner and Eleftherios Koutsofios and Stephen NorthJanuary 5, 2015 Abstractdotdraws directed graphs as hierarchies. It runs as a command line pro-gram, web visualization service, or with a compatible graphical features include well-tuned layout algorithms for placing nodes and edgesplines, edge labels, record shapes with ports for Drawing data struc-tures; cluster layouts; and an underlying file language for stream-orientedgraph tools. Below is a reduced module dependency graph of an SML-NJcompiler that took seconds of user time on a 3 GHz Intel s Manual, January 5, 201521 Basic Graph Drawingdotdraws directed graphs . It reads attributed graph text files and writes drawings,either as graph files or in a graphics format such as GIF, PNG, SVG, PDF, graphs in four main phases.
2 Knowing this helps you to understandwhat kind of layoutsdotmakes and how you can control them. The layout proce-dure used bydotrelies on the graph being acyclic. Thus, the first step is to breakany cycles which occur in the input graph by reversing the internal direction ofcertain cyclic edges. The next step assigns nodes to discrete ranks or levels. In atop-to-bottom Drawing , ranks determineYcoordinates. Edges that span more thanone rank are broken into chains of virtual nodes and unit-length edges. The thirdstep orders nodes within ranks to avoid crossings. The fourth step setsXcoordi-nates of nodes to keep edges short, and the final step routes edge splines. This isthe same general approach as most hierarchical graph Drawing programs, based onthe work of Warfield [War77], Carpano [Car80] and Sugiyama [STT81].
3 We referthe reader to [GKNV93] for a thorough explanation ofdot s input in theDOTlanguage (cf. Appendix D). This language de-scribes three main kinds of objects: graphs , nodes, and edges. The main (outer-most) graph can be directed (digraph) or undirectedgraph. Becausedotmakeslayouts of directed graphs , all the following examples usedigraph. (A separatelayout utility,neato, draws undirected graphs [Nor92].) Within a main graph, asubgraphdefines a subset of nodes and 1 is an example graph in theDOTlanguage. Line 1 gives the graphname and type. The lines that follow create nodes, edges, or subgraphs, and setattributes. Names of all these objects may be C identifiers, numbers, or quoted Cstrings.
4 Quotes protect punctuation and white node is created when its name first appears in the file. An edge is createdwhen nodes are joined by the edge operator->. In the example, line 2 makesedges frommaintoparse, and fromparsetoexecute. Runningdoton this file ( )$ dot -Tps -o the Drawing of Figure 2. The command line option-Tpsselects PostScript(EPSF) be printed, displayed by a PostScript viewer, orembedded in another is often useful to adjust the representation or placement of nodes and edgesin the layout. This is done by setting attributes of nodes, edges, or subgraphs inthe input file. Attributes are name-value pairs of character strings. Figures 3 and 4illustrate some layout attributes.
5 In the listing of Figure 3, line 2 sets the graph sdotUser s Manual, January 5, 201531: digraph G {2: main -> parse -> execute;3: main -> init;4: main -> cleanup;5: execute -> make_string;6: execute -> printf7: init -> make_string;8: main -> printf;9: execute -> compare;10: }Figure 1: Small graphmainparseinitcleanupprintfexecutema ke_stringcompareFigure 2: Drawing of small graphdotUser s Manual, January 5, 20154sizeto4,4(in inches). This attribute controls the size of the Drawing ; if thedrawing is too large, it is scaled uniformly as necessary to or edge attributes are set off in square brackets. In line 3, the nodemainis assigned shapebox. The edge in line 4 is straightened by increasing itsweight(the default is1).
6 The edge in line 6 is drawn as a dotted line. Line 8 makes edgesfromexecutetomakestringandprintf. In line 10 the default edge coloris set tored. This affects any edges created after this point in the file. Line 11makes a bold edge labeled100 times. In line 12, nodemake_stringis givena multi-line label. Line 13 changes the default node to be a box filled with a shadeof blue. The nodecompareinherits these Drawing AttributesThe main attributes that affect graph Drawing are summarized in Appendices A, Band C. For more attributes and a more complete description of the attributes, youshould refer to theGraphvizweb site, Node ShapesNodes are drawn, by default, withshape=ellipse,width=.
7 75,height=.5and labeled by the node name. Other common shapes includebox,circle,recordandplaintext. A list of the main node shapes is given in Appendix node shapeplaintextis of particularly interest in that it draws a node with-out any outline, an important convention in some kinds of diagrams. In cases wherethe graph structure is of main concern, and especially when the graph is moderatelylarge, thepointshape reduces nodes to display minimal content. When drawn, anode s actual size is the greater of the requested size and the area needed for its textlabel, unlessfixedsize=true, in which case thewidthandheightvaluesare shapes fall into two broad categories: polygon-based and node shapes exceptrecordandMrecordare considered polygonal, andare modeled by the number of sides (ellipses and circles being special cases), anda few other geometric properties.
8 Some of these properties can be specified ina graph. Ifregular=true, the node is forced to be regular. The parameter1 There is a way to implement custom node shapes, usingshape=epsfand theshapefileattribute, and relying on PostScript output. The details are beyond the scope of this user s contact the authors for further s Manual, January 5, 201551: digraph G {2: size ="4,4";3: main [shape=box]; /*this is a comment*/4: main -> parse [weight=8];5: parse -> execute;6: main -> init [style=dotted];7: main -> cleanup;8: execute -> { make_string; printf}9: init -> make_string;10: edge [color=red]; // so is this11: main -> printf [style=bold,label="100 times"];12: make_string [label="make a\nstring"];13: node [shape=box,style=filled,color=".]}
9 7 .3 "];14: execute -> compare;15: }Figure 3: Fancy graphmainparseinitcleanupprintf100 timesexecutemake astringcompareFigure 4: Drawing of fancy graphdotUser s Manual, January 5, 20156peripheriessets the number of boundary curves drawn. For example, a dou-blecircle hasperipheries=2. Theorientationattribute specifies a clock-wise rotation of the polygon, measured in shapepolygonexposes all the polygonal parameters, and is useful forcreating many shapes that are not predefined. In addition to the parametersregular,peripheriesandorientat ion, mentioned above, polygons are parameter-ized by number of sidessides, a floatingpoint number (usually between ) that distorts the shape by slantingit from top-to-bottom, with positive values moving the top of the polygon to theright.
10 Thus,skewcan be used to turn a box into a the polygon from top-to-bottom, with negative values causing the bottomto be larger than the a box into a trapezoid. A variety ofthese polygonal attributes are illustrated in Figures 6 and nodes form the other class of node shapes. These include theshapesrecordandMrecord. The two are identical except that the latter hasrounded corners. These nodes represent recursive lists of fields, which are drawnas alternating horizontal and vertical rows of boxes. The recursive structure isdetermined by the node slabel, which has the following schema:rlabel field( | field)*field boxLabel| rlabel boxLabel [ < string > ] [string]Literal braces, vertical bars and angle brackets must be escaped.
