Mercurial > hg > camir-aes2014
comparison toolboxes/graph_visualisation/share/graphviz/doc/html/info/shapes.html @ 0:e9a9cd732c1e tip
first hg version after svn
author | wolffd |
---|---|
date | Tue, 10 Feb 2015 15:05:51 +0000 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:e9a9cd732c1e |
---|---|
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> | |
2 <!-- | |
3 This is a generated document. Do not edit. | |
4 --> | |
5 <HTML VERSION="2.0"> | |
6 <HEAD> | |
7 <TITLE>Node Shapes</TITLE> | |
8 </HEAD> | |
9 <BODY BGCOLOR=white> | |
10 <A NAME="top"></A> | |
11 <H1 align=CENTER>Node Shapes</H1> | |
12 <HR> | |
13 The geometries of all node shapes are affected by | |
14 the node attributes | |
15 <A HREF=attrs.html#d:fixedsize><TT>fixedsize</TT></A>, | |
16 <A HREF=attrs.html#d:fontname><TT>fontname</TT></A>, | |
17 <A HREF=attrs.html#d:fontsize><TT>fontsize</TT></A>, | |
18 <A HREF=attrs.html#d:height><TT>height</TT></A>, | |
19 <A HREF=attrs.html#d:label><TT>label</TT></A>, | |
20 <A HREF=#d:style><TT>style</TT></A> and | |
21 <A HREF=attrs.html#d:width><TT>width</TT></A>. | |
22 | |
23 <H2><A NAME=polygon>Polygon-based Nodes</A></H2> | |
24 The possible polygon-based shapes are displayed below. | |
25 <TABLE ALIGN=CENTER> | |
26 <TR ALIGN=CENTER> | |
27 <TD><IMG SRC=box.gif> | |
28 <TD><IMG SRC=polygon.gif> | |
29 <TD><IMG SRC=ellipse.gif> | |
30 <TD><IMG SRC=circle.gif> | |
31 </TR> | |
32 <TR ALIGN=CENTER> | |
33 <TD><A NAME=d:box>box</A> | |
34 <TD><A NAME=d:polygon>polygon</A> | |
35 <TD><A NAME=d:ellipse>ellipse</A> | |
36 <TD><A NAME=d:circle>circle</A> | |
37 </TR> | |
38 <TR ALIGN=CENTER> | |
39 <TD><IMG SRC=point.gif> | |
40 <TD><IMG SRC=egg.gif> | |
41 <TD><IMG SRC=triangle.gif> | |
42 <TD><IMG SRC=plaintext.gif> | |
43 </TR> | |
44 <TR ALIGN=CENTER> | |
45 <TD><A NAME=d:point>point</A> | |
46 <TD><A NAME=d:egg>egg</A> | |
47 <TD><A NAME=d:triangle>triangle</A> | |
48 <TD><A NAME=d:plaintext>plaintext</A> | |
49 </TR> | |
50 <TR ALIGN=CENTER> | |
51 <TD><IMG SRC=diamond.gif> | |
52 <TD><IMG SRC=trapezium.gif> | |
53 <TD><IMG SRC=parallelogram.gif> | |
54 <TD><IMG SRC=house.gif> | |
55 </TR> | |
56 <TR ALIGN=CENTER> | |
57 <TD><A NAME=d:diamond>diamond</A> | |
58 <TD><A NAME=d:trapezium>trapezium</A> | |
59 <TD><A NAME=d:parallelogram>parallelogram</A> | |
60 <TD><A NAME=d:house>house</A> | |
61 </TR> | |
62 <TR ALIGN=CENTER> | |
63 <TD><IMG SRC=pentagon.gif> | |
64 <TD><IMG SRC=hexagon.gif> | |
65 <TD><IMG SRC=septagon.gif> | |
66 <TD><IMG SRC=octagon.gif> | |
67 </TR> | |
68 <TR ALIGN=CENTER> | |
69 <TD><A NAME=d:pentagon>pentagon</A> | |
70 <TD><A NAME=d:hexagon>hexagon</A> | |
71 <TD><A NAME=d:septagon>septagon</A> | |
72 <TD><A NAME=d:octagon>octagon</A> | |
73 </TR> | |
74 <TR ALIGN=CENTER> | |
75 <TD><IMG SRC=doublecircle.gif> | |
76 <TD><IMG SRC=doubleoctagon.gif> | |
77 <TD><IMG SRC=tripleoctagon.gif> | |
78 <TD><IMG SRC=invtriangle.gif> | |
79 </TR> | |
80 <TR ALIGN=CENTER> | |
81 <TD><A NAME=d:doublecircle>doublecircle</A> | |
82 <TD><A NAME=d:doubleoctagon>doubleoctagon</A> | |
83 <TD><A NAME=d:tripleoctagon>tripleoctagon</A> | |
84 <TD><A NAME=d:invtriangle>invtriangle</A> | |
85 </TR> | |
86 <TR ALIGN=CENTER> | |
87 <TD><IMG SRC=invtrapezium.gif> | |
88 <TD><IMG SRC=invhouse.gif> | |
89 <TD><IMG SRC=Mdiamond.gif> | |
90 <TD><IMG SRC=Msquare.gif> | |
91 </TR> | |
92 <TR ALIGN=CENTER> | |
93 <TD><A NAME=d:invtrapezium>invtrapezium</A> | |
94 <TD><A NAME=d:invhouse>invhouse</A> | |
95 <TD><A NAME=d:Mdiamond>Mdiamond</A> | |
96 <TD><A NAME=d:Msquare>Msquare</A> | |
97 </TR> | |
98 <TR ALIGN=CENTER> | |
99 <TD><IMG SRC=Mcircle.gif> | |
100 <TD><IMG SRC=rect.gif> | |
101 <TD><IMG SRC=rectangle.gif> | |
102 <TD><IMG SRC=none.gif> | |
103 </TR> | |
104 <TR ALIGN=CENTER> | |
105 <TD><A NAME=d:Mcircle>Mcircle</A> | |
106 <TD><A NAME=d:rect>rect</A> | |
107 <TD><A NAME=d:rectangle>rectangle</A> | |
108 <TD><A NAME=d:none>none</A> | |
109 </TR> | |
110 <TR ALIGN=CENTER> | |
111 <TD><IMG SRC=note.gif> | |
112 <TD><IMG SRC=tab.gif> | |
113 <TD><IMG SRC=folder.gif> | |
114 <TD><IMG SRC=box3d.gif> | |
115 </TR> | |
116 <TR ALIGN=CENTER> | |
117 <TD><A NAME=d:note>note</A> | |
118 <TD><A NAME=d:tab>tab</A> | |
119 <TD><A NAME=d:folder>folder</A> | |
120 <TD><A NAME=d:box3d>box3d</A> | |
121 </TR> | |
122 <TR ALIGN=CENTER> | |
123 <TD><IMG SRC=component.gif> | |
124 </TR> | |
125 <TR ALIGN=CENTER> | |
126 <TD><A NAME=d:component>component</A> | |
127 </TR> | |
128 </TABLE> | |
129 As the figures suggest, the shapes <TT>rect</TT> and <TT>rectangle</TT> are synonyms for <TT>box</TT>, and <TT>none</TT> is a synonym for <TT>plaintext</TT>. | |
130 Also, unlike the rest, we have shown these last two | |
131 without <TT>style=filled</TT> | |
132 to indicate the normal use. If fill were turned on, the label text would | |
133 appear in a filled rectangle. | |
134 <P> | |
135 The geometries of polygon-based shapes are also affected | |
136 by the node attributes | |
137 <A HREF=attrs.html#d:regular><TT>regular</TT></A>, | |
138 <A HREF=attrs.html#d:peripheries><TT>peripheries</TT></A> and | |
139 <A HREF=attrs.html#d:orientation><TT>orientation</TT></A>. | |
140 If <TT>shape="polygon"</TT>, the attributes | |
141 <A HREF=attrs.html#d:sides><TT>sides</TT></A>, | |
142 <A HREF=attrs.html#d:skew><TT>skew</TT></A> and | |
143 <A HREF=attrs.html#d:distortion><TT>distortion</TT></A> are also used. | |
144 If unset, they default to 4, 0.0 and 0.0, respectively. | |
145 In addition, the 3 M* shapes support auxiliary labels using | |
146 the <A HREF=attrs.html#d:toplabel><TT>toplabel</TT></A> and | |
147 <A HREF=attrs.html#d:bottomlabel><TT>bottomlabel</TT></A> attributes. | |
148 On the other hand, the point shape is special in that it is | |
149 only affected by the <A HREF=attrs.html#d:peripheries><TT>peripheries</TT></A>, | |
150 <A HREF=attrs.html#d:width><TT>width</TT></A> and | |
151 <A HREF=attrs.html#d:height><TT>height</TT></A> attributes. | |
152 | |
153 <H2><A NAME=record>Record-based Nodes</A></H2> | |
154 These are specified by shape values of "record" and "Mrecord". | |
155 The structure of a record-based node is determined by | |
156 its <A HREF=attrs.html#d:label><TT>label</TT></A>, | |
157 which has the following schema: | |
158 <TABLE> | |
159 <TR><TD ALIGN=right><I>rlabel</I><TD>=<TD><I>field</I> ( '|' <I>field</I> )*</TR> | |
160 <TR><TD ALIGN=right>where <I>field</I><TD>=<TD>fieldId</I> or '{' <I>rlabel</I> '}'</TR> | |
161 <TR><TD ALIGN=right>and <I>fieldId</I><TD>=<TD> [ '<' <I>string</I> '>'] [ <I>string</I> ]</TR> | |
162 </TABLE> | |
163 Literal braces, vertical bars and angle brackets must be escaped. | |
164 Spaces are interpreted as separators between tokens, | |
165 so they must be escaped if you want spaces in the text. | |
166 <P> | |
167 The first string in <I>fieldId</I> assigns a portname to the field and can | |
168 be combined with the node name to indicate where to attach an edge | |
169 to the node. (See <A HREF=attrs.html#k:portPos>portPos</A>.) | |
170 The second string is used as the text for the field; it supports the usual | |
171 <A HREF=attrs.html#k:escString>escape sequences</A> \n, \l and \r. | |
172 <P> | |
173 Visually, a record is a box, with fields represented by alternating | |
174 rows of horizontal or vertical subboxes. The Mrecord shape is identical | |
175 to a record shape, except that the outermost box has rounded corners. | |
176 Flipping between horizontal and vertical layouts is done by nesting | |
177 fields in braces "{...}". The top-level orientation in a record is | |
178 horizontal. Thus, a record with label "A | B | C | D" will have 4 fields | |
179 oriented left to right, while "{A | B | C | D}" will have them | |
180 from top to bottom and "A | { B | C } | D" will have "B" over "C", with | |
181 "A" to the left and "D" to the right of "B" and "C". | |
182 <P> | |
183 The initial orientation of a record node depends on the | |
184 <A HREF="attrs.html#d:rankdir">rankdir</A> attribute. If this attribute | |
185 is <TT>TB</TT> (the default) or <TT>TB</TT>, corresponding to vertical | |
186 layouts, the top-level fields in a record are displayed horizontally. | |
187 If, however, this attribute is <TT>LR</TT> or <TT>RL</TT>, | |
188 corresponding to horizontal layouts, the top-level fields are | |
189 displayed vertically. | |
190 <P> | |
191 As an example of a record node, the dot input | |
192 <XMP> | |
193 digraph structs { | |
194 node [shape=record]; | |
195 struct1 [label="<f0> left|<f1> mid\ dle|<f2> right"]; | |
196 struct2 [label="<f0> one|<f1> two"]; | |
197 struct3 [label="hello\nworld |{ b |{c|<here> d|e}| f}| g | h"]; | |
198 struct1:f1 -> struct2:f0; | |
199 struct1:f2 -> struct3:here; | |
200 } | |
201 </XMP> | |
202 | |
203 yields the figure<BR> | |
204 <IMG SRC=record.gif> | |
205 <P> | |
206 If we add the line | |
207 <XMP> | |
208 rankdir=LR | |
209 </XMP> | |
210 we get the layout<BR> | |
211 <IMG SRC=record2.gif> | |
212 <P> | |
213 If we change node <TT>struct1</TT> to have shape <TT>Mrecord</TT>, | |
214 it then looks like:<BR> | |
215 <IMG SRC=mrecord.gif> | |
216 | |
217 <H2><A NAME="d:style">Styles for Nodes</A></H2> | |
218 The <A HREF=attrs.html#d:style><TT>style</TT></A> | |
219 attribute can be used to modify the appearance of a node. | |
220 At present, there are 8 style values recognized: | |
221 <TT>filled</TT>, <TT>invisible</TT>, <TT>diagonals</TT>, <TT>rounded</TT>. | |
222 <TT>dashed</TT>, <TT>dotted</TT>, <TT>solid</TT> and <TT>bold</TT>. | |
223 As usual, the value of the <A HREF=attrs.html#d:style><TT>style</TT></A> | |
224 attribute can be a comma-separated list of any of these. If the | |
225 style contains conflicts (e.g, <TT>style="dotted, solid"</TT>), the last | |
226 attribute wins. | |
227 <DL> | |
228 <DT><A NAME=d:filled><TT>filled</TT> | |
229 <DD>This value indicates that the node's interior should be filled. | |
230 The color used is the node's <TT>fillcolor</TT> or, if that's not defined, its | |
231 <TT>color</TT>. For unfilled nodes, the interior of the node is transparent to | |
232 whatever color is the current graph or cluster background color. | |
233 Note that <TT>point</TT> shapes are always filled. | |
234 <P> | |
235 Thus, the code | |
236 <XMP> | |
237 digraph G { | |
238 rankdir=LR | |
239 node [shape=box, color=blue] | |
240 node1 [style=filled] | |
241 node2 [style=filled, fillcolor=red] | |
242 node0 -> node1 -> node2 | |
243 } | |
244 </XMP> | |
245 yields the figure<BR> | |
246 <IMG SRC=fill.gif> | |
247 | |
248 <DT><A NAME=d:invisible><TT>invisible</TT> | |
249 <DD>Setting this style causes the node not to be displayed at all. | |
250 Note that the node is still used in laying out the graph. | |
251 | |
252 <DT><A NAME=d:diagonals><TT>diagonals</TT> | |
253 <DD>The diagonals style causes small chords to be drawn near the vertices | |
254 of the node's polygon or, in case of circles and ellipses, two chords near | |
255 the top and the bottom of the shape. The special node shapes | |
256 <A HREF=#d:Msquare><TT>Msquare</TT></A>, | |
257 <A HREF=#d:Mcircle><TT>Mcircle</TT></A>, and | |
258 <A HREF=#d:Mdiamond><TT>Mdiamond</TT></A> | |
259 are simply an ordinary square, circle and | |
260 diamond with the diagonals style set. | |
261 | |
262 <DT><A NAME=d:rounded><TT>rounded</TT> | |
263 <DD>The rounded style causes the polygonal corners to be smoothed. | |
264 Note that this style also applies to record-based nodes. Indeed, | |
265 the <TT>Mrecord</TT> shape is simply shorthand for setting this style. | |
266 Also, prior to 26 April 2005, the rounded and filled styles were | |
267 mutually exclusive. | |
268 <P> | |
269 As an example of rounding, dot uses the graph | |
270 <XMP> | |
271 digraph R { | |
272 rankdir=LR | |
273 node [style=rounded] | |
274 node1 [shape=box] | |
275 node2 [fillcolor=yellow, style="rounded,filled", shape=diamond] | |
276 node3 [shape=record, label="{ a | b | c }"] | |
277 | |
278 node1 -> node2 -> node3 | |
279 } | |
280 </XMP> | |
281 to produce the figure<BR> | |
282 <IMG SRC=round.gif> | |
283 <DT><A NAME=d:dashed><TT>dashed</TT> | |
284 <DD>This style causes the node's border to be drawn as a dashed line. | |
285 <DT><A NAME=d:dotted><TT>dotted</TT> | |
286 <DD>This style causes the node's border to be drawn as a dotted line. | |
287 <DT><A NAME=d:solid><TT>solid</TT> | |
288 <DD>This style causes the node's border to be drawn as a solid line, | |
289 which is the default. | |
290 <DT><A NAME=d:bold><TT>bold</TT> | |
291 <DD>This style causes the node's border to be drawn as a bold line. | |
292 See also <A HREF=attrs.html#d:setlinewidth>setlinewidth</A>. | |
293 | |
294 </DL> | |
295 | |
296 <P> | |
297 Additional styles may be available with a specific code generator. | |
298 <H2><A NAME=html>HTML-Like Labels</A></H2> | |
299 | |
300 <B>NOTE:</B><EM>This feature is only available on versions of Graphviz | |
301 that are newer than mid-November 2003. In particular, it is not part | |
302 of release 1.10.</EM> | |
303 <P> | |
304 If the value of a label attribute | |
305 (<A HREF=attrs.html#d:label><TT>label</TT></A> for nodes, edges, clusters, and | |
306 graphs, and the | |
307 <A HREF=attrs.html#d:headlabel><TT>headlabel</TT></A> and | |
308 <A HREF=attrs.html#d:taillabel><TT>taillabel</TT></A> | |
309 attributes of an edge) is given as an | |
310 <A HREF=lang.html#html>HTML string</A>, | |
311 that is, delimited by <TT><...></TT> | |
312 rather than <TT>"..."</TT>, | |
313 the label is interpreted as | |
314 an HTML description. At their simplest, such labels | |
315 can describe multiple lines of variously aligned text as provided by ordinary | |
316 <A HREF=attrs.html#k:escString>string labels</A>. More generally, the | |
317 label can specify a table similar to those provided by HTML, | |
318 with different graphical attributes at each level. | |
319 <P> | |
320 <B>NOTE:</B> The features and syntax supported by these labels are | |
321 modeled on HTML. However, there are many aspects that are relevant | |
322 to Graphviz labels that are not in HTML and, conversely, HTML allows | |
323 various constructs which are meaningless in Graphviz. We will generally | |
324 refer to these labels as "HTML labels" rather than the cumbersome | |
325 "HTML-like labels" but the reader is warned that these are not really | |
326 HTML. The grammar below describes precisely what Graphviz will accept. | |
327 <P> | |
328 Although HTML labels are not, strictly speaking, a shape, they can be | |
329 viewed as a generalization of the record shapes described above. | |
330 In particular, if a node has set its | |
331 <A HREF=attrs.html#k:shape><TT>shape</TT></A> | |
332 attribute to <TT>plaintext</TT>, the HTML label will be the node's | |
333 shape. On the other hand, if the node has any other shape (except | |
334 <TT>point</TT>), the HTML label will be embedded within the node the | |
335 same way an ordinary label would be. | |
336 <P> | |
337 The following is an abstract grammar for HTML labels. | |
338 Terminals, corresponding to elements, are shown in bold font, | |
339 and nonterminals in italics. | |
340 Square brackets [ and ] enclose optional items. | |
341 Vertical bars | separate alternatives. | |
342 Note that, as in HTML, element and attribute names are case-insensitive. | |
343 (cf. sections 3.2.1 and 3.2.2 of the | |
344 <A HREF="http://www.w3.org/TR/html401">HTML 4.01 specification</A>). | |
345 <TABLE> | |
346 <TR> | |
347 <TD ALIGN=RIGHT><I>label</I></TD> | |
348 <TD ALIGN=LEFT>:</TD> | |
349 <TD ALIGN=LEFT><I>text</I></TD> | |
350 </TR> | |
351 <TR> | |
352 <TD ALIGN=RIGHT></TD> | |
353 <TD ALIGN=LEFT>|</TD> | |
354 <TD ALIGN=LEFT><I>table</I></TD> | |
355 </TR> | |
356 <TR> | |
357 <TD ALIGN=RIGHT><I>text</I></TD> | |
358 <TD ALIGN=LEFT>:</TD> | |
359 <TD ALIGN=LEFT><I>textitem</I></TD> | |
360 </TR> | |
361 <TR> | |
362 <TD ALIGN=RIGHT></TD> | |
363 <TD ALIGN=LEFT>|</TD> | |
364 <TD ALIGN=LEFT><I>text</I> <I>textitem</I></TD> | |
365 </TR> | |
366 <TR> | |
367 <TD ALIGN=RIGHT><I>textitem</I></TD> | |
368 <TD ALIGN=LEFT>:</TD> | |
369 <TD ALIGN=LEFT><I>string</I></TD> | |
370 </TR> | |
371 <TR> | |
372 <TD ALIGN=RIGHT></TD> | |
373 <TD ALIGN=LEFT>|</TD> | |
374 <TD ALIGN=LEFT><B><BR/></B></TD> | |
375 </TR> | |
376 <TR> | |
377 <TD ALIGN=RIGHT></TD> | |
378 <TD ALIGN=LEFT>|</TD> | |
379 <TD ALIGN=LEFT><B><FONT></B> <I>text</I> <B></FONT></B></TD> | |
380 </TR> | |
381 <TR> | |
382 <TD ALIGN=RIGHT><I>table</I></TD> | |
383 <TD ALIGN=LEFT>:</TD> | |
384 <TD ALIGN=LEFT>[ <B><FONT></B> ] <B><TABLE></B> <I>rows</I> <B></TABLE></B> [ <B></FONT></B> ]</TD> | |
385 </TR> | |
386 <TR> | |
387 <TD ALIGN=RIGHT><I>rows</I></TD> | |
388 <TD ALIGN=LEFT>:</TD> | |
389 <TD ALIGN=LEFT><I>row</I></TD> | |
390 </TR> | |
391 <TR> | |
392 <TD ALIGN=RIGHT></TD> | |
393 <TD ALIGN=LEFT>|</TD> | |
394 <TD ALIGN=LEFT><I>rows</I> <I>row</I></TD> | |
395 </TR> | |
396 <TR> | |
397 <TD ALIGN=RIGHT><I>row</I></TD> | |
398 <TD ALIGN=LEFT>:</TD> | |
399 <TD ALIGN=LEFT><B><TR></B> <I>cells</I> <B></TR></B></TD> | |
400 </TR> | |
401 <TR> | |
402 <TD ALIGN=RIGHT><I>cells</I></TD> | |
403 <TD ALIGN=LEFT>:</TD> | |
404 <TD ALIGN=LEFT><I>cell</I></TD> | |
405 </TR> | |
406 <TR> | |
407 <TD ALIGN=RIGHT></TD> | |
408 <TD ALIGN=LEFT>|</TD> | |
409 <TD ALIGN=LEFT><I>cells</I> <I>cell</I></TD> | |
410 </TR> | |
411 <TR> | |
412 <TD ALIGN=RIGHT><I>cell</I></TD> | |
413 <TD ALIGN=LEFT>:</TD> | |
414 <TD ALIGN=LEFT><B><TD></B> <I>label</I> <B></TD></B></TD> | |
415 </TR> | |
416 <TR> | |
417 <TD ALIGN=RIGHT></TD> | |
418 <TD ALIGN=LEFT>|</TD> | |
419 <TD ALIGN=LEFT><B><TD></B> <B><IMG/></B> <B></TD></B></TD> | |
420 </TR> | |
421 </TABLE> | |
422 <P> | |
423 Above, a <I>string</I> is any collection of printable characters, including | |
424 all spaces. Note that outside of the body of a <TD> element, | |
425 whitespace characters are ignored; within a <TD> element, spaces | |
426 are preserved but all other white space characters are discarded. | |
427 HTML comments are allowed within an HTML string. They can occur anywhere | |
428 provided that, if they contain part of an HTML element, they must contain | |
429 the entire element. | |
430 <P> | |
431 As is obvious from the above description, the interpretation of white space | |
432 characters is one place where HTML-like labels is very different from | |
433 standard HTML. In HTML, any sequence of white space characters is | |
434 collapsed to a single space, If the user does not want this to happen, the | |
435 input must use non-breaking spaces "&nbsp;". This makes sense in | |
436 HTML, where text layout depends dynamically on the space available. In | |
437 Graphviz, the layout is statically determined by the input, so it is | |
438 reasonable to treat ordinary space characters as non-breaking. In addition, | |
439 ignoring tabs and newlines allows the input text to be formatted for | |
440 easier reading. | |
441 <P> | |
442 Each of the HTML elements has a set of optional attributes. | |
443 Attribute values must appear in double quotes. | |
444 <PRE><TABLE | |
445 ALIGN="CENTER|LEFT|RIGHT" | |
446 BGCOLOR="<I>color</I>" | |
447 BORDER="<I>value</I>" | |
448 CELLBORDER="<I>value</I>" | |
449 CELLPADDING="<I>value</I>" | |
450 CELLSPACING="<I>value</I>" | |
451 COLOR="<I>color</I>" | |
452 FIXEDSIZE="FALSE|TRUE" | |
453 HEIGHT="<I>value</I>" | |
454 HREF="<I>value</I>" | |
455 PORT="<I>portName</I>" | |
456 TARGET="<I>value</I>" | |
457 TITLE="<I>value</I>" | |
458 TOOLTIP="<I>value</I>" | |
459 VALIGN="MIDDLE|BOTTOM|TOP" | |
460 WIDTH="<I>value</I>" | |
461 > | |
462 </PRE> | |
463 <P> | |
464 <PRE><TR | |
465 <!-- No attributes --> | |
466 > | |
467 </PRE> | |
468 <P> | |
469 <PRE><TD | |
470 ALIGN="CENTER|LEFT|RIGHT|TEXT" | |
471 BALIGN="CENTER|LEFT|RIGHT" | |
472 BGCOLOR="<I>color</I>" | |
473 BORDER="<I>value</I>" | |
474 CELLPADDING="<I>value</I>" | |
475 CELLSPACING="<I>value</I>" | |
476 COLOR="<I>color</I>" | |
477 COLSPAN="<I>value</I>" | |
478 FIXEDSIZE="FALSE|TRUE" | |
479 HEIGHT="<I>value</I>" | |
480 HREF="<I>value</I>" | |
481 PORT="<I>portName</I>" | |
482 ROWSPAN="<I>value</I>" | |
483 TARGET="<I>value</I>" | |
484 TITLE="<I>value</I>" | |
485 TOOLTIP="<I>value</I>" | |
486 VALIGN="MIDDLE|BOTTOM|TOP" | |
487 WIDTH="<I>value</I>" | |
488 > | |
489 </PRE> | |
490 | |
491 <P> | |
492 <PRE><FONT | |
493 COLOR="<I>color</I>" | |
494 FACE="<I>fontname</I>" | |
495 POINT-SIZE="<I>value</I>" | |
496 > | |
497 </PRE> | |
498 | |
499 <P> | |
500 <PRE><BR | |
501 ALIGN="CENTER|LEFT|RIGHT" | |
502 > | |
503 </PRE> | |
504 | |
505 <P> | |
506 <PRE><IMG | |
507 SCALE="FALSE|TRUE|WIDTH|HEIGHT|BOTH" | |
508 SRC="<I>value</I>" | |
509 > | |
510 </PRE> | |
511 | |
512 <P> | |
513 <B><I><FONT SIZE=-1>ALIGN</FONT> </I></B> | |
514 <BLOCKQUOTE> | |
515 specifies horizontal placement. When an object is allocated | |
516 more space than required, this value determines where the extra space | |
517 is placed left and right of the object. | |
518 <P> | |
519 <ul> | |
520 <LI>CENTER aligns the object in the center. (Default) </LI> | |
521 <LI>LEFT aligns the object on the left.</LI> | |
522 <LI>RIGHT aligns the object on the right. </LI> | |
523 <LI>(<T><TD></T> only) TEXT aligns lines of text using the full | |
524 cell width. The alignment of a line is determined by its (possibly | |
525 implicit) associated <T><BR></T> element.</LI> | |
526 </ul> | |
527 <P> | |
528 The contents of a cell are normally aligned as a block. In particular, | |
529 lines of text are first aligned as a text block based on the width of | |
530 the widest line and the corresponding <T><BR></T> elements. Then, | |
531 the entire text block is aligned within a cell. If, however, the | |
532 cell's <B><I>ALIGN</I></B> value is <T>"TEXT"</T>, and the cell contains | |
533 lines of text, then the lines are justified using the entire available | |
534 width of the cell. If the cell does not contain text, then the contained | |
535 image or table is centered. | |
536 </BLOCKQUOTE> | |
537 | |
538 <B><I><FONT SIZE=-1>BALIGN</FONT> </I></B> | |
539 <BLOCKQUOTE> | |
540 specifies the default alignment of <T><BR></T> elements contained | |
541 in the cell. That is, if a <T><BR></T> element has no | |
542 explicit <B><I>ALIGN</I></B> attribute, the attribute value is specified | |
543 by the value of <B><I>BALIGN</I></B>. | |
544 </BLOCKQUOTE> | |
545 | |
546 <B><I><FONT SIZE=-1>BGCOLOR="color"</FONT></I></B> | |
547 <BLOCKQUOTE> | |
548 sets the color of the background. This color can be | |
549 overridden by a <B><I>BGCOLOR</I></B> attribute in descendents. | |
550 </BLOCKQUOTE> | |
551 | |
552 <B><I><FONT SIZE=-1>BORDER="value"</FONT></I></B> | |
553 <BLOCKQUOTE> | |
554 specifies the width of the border around the object in points. | |
555 A value of zero indicates no border. The default is 1. | |
556 The maximum value is 255. | |
557 If set in a table, and <B><I>CELLBORDER</I></B> is not set, | |
558 this value is also used for all cells in the table. | |
559 It can be overridden by a <B><I>BORDER</I></B> tag in a cell. | |
560 </BLOCKQUOTE> | |
561 | |
562 <B><I><FONT SIZE=-1>CELLBORDER="value"</FONT></I></B> | |
563 <BLOCKQUOTE> | |
564 specifies the width of the border for all cells in a table. | |
565 It can be overridden by a <B><I>BORDER</I></B> tag in a cell. | |
566 The maximum value is 255. | |
567 </BLOCKQUOTE> | |
568 | |
569 <B><I><FONT SIZE=-1>CELLPADDING="value"</FONT></I></B> | |
570 <BLOCKQUOTE> | |
571 specifies the space, in points, between a cell's border and its content. | |
572 The default is 2. | |
573 The maximum value is 255. | |
574 </BLOCKQUOTE> | |
575 | |
576 <B><I><FONT SIZE=-1>CELLSPACING="value"</FONT></I></B> | |
577 <BLOCKQUOTE> | |
578 specifies the space, in points, between cells in a table and between | |
579 a cell and the table's border. The default is 2. | |
580 The maximum value is 127. | |
581 </BLOCKQUOTE> | |
582 | |
583 <B><I><FONT SIZE=-1>COLOR="color"</FONT></I></B> | |
584 <BLOCKQUOTE> | |
585 sets the color of the font within the scope of | |
586 <FONT>...</FONT>, or the border color | |
587 of the table or cell within the scope of | |
588 <TABLE>...</TABLE>, | |
589 or <TD>...</TD>. | |
590 This color can be | |
591 overridden by a <B><I>COLOR</I></B> attribute in descendents. | |
592 By default, the font color is determined by the | |
593 <A HREF="attrs.html#:fontcolor">fontcolor</A> attribute of | |
594 the corresponding node, edge or graph, and the border color | |
595 is determined by the | |
596 <A HREF="attrs.html#:color">color</A> attribute of | |
597 the corresponding node, edge or graph. | |
598 </BLOCKQUOTE> | |
599 | |
600 <B><I><FONT SIZE=-1>COLSPAN="value"</FONT></I></B> | |
601 <BLOCKQUOTE> | |
602 specifies the number of columns spanned by the cell. The default is 1. | |
603 The maximum value is 65535. | |
604 </BLOCKQUOTE> | |
605 | |
606 <B><I><FONT SIZE=-1>FACE="fontname"</FONT></I></B> | |
607 <BLOCKQUOTE> | |
608 specifies the font to use within the scope of | |
609 <FONT>...</FONT>. | |
610 This can be | |
611 overridden by a <B><I>FACE</I></B> attribute in descendents. | |
612 By default, the font name is determined by the | |
613 <A HREF="attrs.html#:fontname">fontname</A> attribute of the corresponding | |
614 node, edge or graph. | |
615 </BLOCKQUOTE> | |
616 | |
617 <B><I><FONT SIZE=-1>FIXEDSIZE</FONT> </I></B> | |
618 <BLOCKQUOTE> | |
619 specifies whether the values given by the <B><I>WIDTH</I></B> | |
620 and <B><I>HEIGHT</I></B> attributes are enforced. | |
621 <P> | |
622 <ul> | |
623 <LI>FALSE allows the object to grow so that all its contents will fit. (Default) </LI> | |
624 <LI>TRUE fixes the object size to its given <B><I>WIDTH</I></B> | |
625 and <B><I>HEIGHT</I></B>. | |
626 Both of these attributes must be supplied.</LI> | |
627 </ul> | |
628 </BLOCKQUOTE> | |
629 | |
630 <B><I><FONT SIZE=-1>HEIGHT="value"</FONT></I></B> | |
631 <BLOCKQUOTE> | |
632 specifies the mininum height, in points, of the object. The height | |
633 includes the contents, any spacing and the border. Unless | |
634 <B><I>FIXEDSIZE</I></B> is true, the height will be expanded to allow | |
635 the contents to fit. | |
636 The maximum value is 65535. | |
637 </BLOCKQUOTE> | |
638 | |
639 <B><I><FONT SIZE=-1>HREF="value"</FONT></I></B> | |
640 <BLOCKQUOTE> | |
641 attaches a URL to the object. | |
642 </BLOCKQUOTE> | |
643 | |
644 <B><I><FONT SIZE=-1>POINT-SIZE="value"</FONT></I></B> | |
645 <BLOCKQUOTE> | |
646 sets the size of the font, in points, used within the scope of | |
647 <FONT>...</FONT>. | |
648 This can be | |
649 overridden by a <B><I>POINT-SIZE</I></B> attribute in descendents. | |
650 By default, the font size is determined by the | |
651 <A HREF="attrs.html#:fontsize">fontsize</A> attribute of the corresponding | |
652 node, edge or graph. | |
653 </BLOCKQUOTE> | |
654 | |
655 <B><I><FONT SIZE=-1>PORT="value"</FONT></I></B> | |
656 <BLOCKQUOTE> | |
657 attaches a portname to the object. | |
658 (See <A HREF=attrs.html#k:portPos>portPos</A>.) | |
659 This can be used to modify the head | |
660 or tail of an edge, so that the end attaches directly to the object. | |
661 </BLOCKQUOTE> | |
662 | |
663 <B><I><FONT SIZE=-1>ROWSPAN="value"</FONT></I></B> | |
664 <BLOCKQUOTE> | |
665 specifies the number of rows spanned by the cell. The default is 1. | |
666 The maximum value is 65535. | |
667 </BLOCKQUOTE> | |
668 | |
669 <B><I><FONT SIZE=-1>SCALE</FONT></I></B> | |
670 <BLOCKQUOTE> | |
671 specifies how an image will use any extra space available in its cell. | |
672 Allowed values are | |
673 <ul> | |
674 <LI>FALSE : keep image its natural size. (Default) </LI> | |
675 <LI>TRUE : scale image uniformly to fit.</LI> | |
676 <LI>WIDTH : expand image width to fill </LI> | |
677 <LI>HEIGHT : expand image height to fill </LI> | |
678 <LI>BOTH : expand both image width height to fill </LI> | |
679 </ul> | |
680 If this attribute is undefined, | |
681 the image inherits the <A HREF="attrs.html#d:imagescale">imagescale</A> | |
682 attribute of the graph object being drawn. | |
683 As with the <A HREF="attrs.html#d:imagescale">imagescale</A> | |
684 attribute, if the cell has a fixed size and the image is too large, | |
685 any offending dimension will be shrunk to fit the space, the | |
686 scaling being uniform in width and height if <I>SCALE=<TT>"true"</TT></I>. | |
687 </BLOCKQUOTE> | |
688 | |
689 <B><I><FONT SIZE=-1>SRC="value"</FONT></I></B> | |
690 <BLOCKQUOTE> | |
691 specifies the image file to be displayed in the cell. | |
692 Note that if the software is used as a web server, file system access | |
693 to images is more restricted. See <A HREF="#d:GV_FILE_PATH">GV_FILE_PATH</A> | |
694 and <A HREF="#d:SERVER_NAME">SERVER_NAME</A>. | |
695 </BLOCKQUOTE> | |
696 | |
697 <B><I><FONT SIZE=-1>TARGET="value"</FONT></I></B> | |
698 <BLOCKQUOTE> | |
699 determines which window of the browser is used for the URL if the object | |
700 has one. | |
701 See <A HREF="http://www.w3.org/TR/html401/present/frames.html#adef-target">W3C documentation</A>. | |
702 </BLOCKQUOTE> | |
703 | |
704 <B><I><FONT SIZE=-1>TITLE="value"</FONT></I></B> | |
705 <BLOCKQUOTE> | |
706 sets the tooltip annotation attached to the element. | |
707 This is used only if the element has a HREF attribute. | |
708 </BLOCKQUOTE> | |
709 | |
710 <B><I><FONT SIZE=-1>TOOLTIP="value"</FONT></I></B> | |
711 <BLOCKQUOTE> | |
712 is an alias for <B><I><FONT SIZE=-1>TITLE</FONT></I></B>. | |
713 </BLOCKQUOTE> | |
714 | |
715 <P> | |
716 <B><I><FONT SIZE=-1>VALIGN</FONT> </I></B> | |
717 <BLOCKQUOTE> | |
718 specifies vertical placement. When an object is allocated | |
719 more space than required, this value determines where the extra space | |
720 is placed above and below the object. | |
721 <P> | |
722 <ul> | |
723 <LI>MIDDLE aligns the object in the center. (Default) </LI> | |
724 <LI>LEFT aligns the object on the left.</LI> | |
725 <LI>RIGHT aligns the object on the right. </LI> | |
726 </ul> | |
727 </BLOCKQUOTE> | |
728 | |
729 <B><I><FONT SIZE=-1>WIDTH="value"</FONT></I></B> | |
730 <BLOCKQUOTE> | |
731 specifies the mininum width, in points, of the object. The width | |
732 includes the contents, any spacing and the border. Unless | |
733 <B><I>FIXEDSIZE</I></B> is true, the width will be expanded to allow | |
734 the contents to fit. | |
735 The maximum value is 65535. | |
736 </BLOCKQUOTE> | |
737 | |
738 <P> | |
739 There is some inheritance among the attributes. If a table specifies | |
740 a <I><B>CELLPADDING</B></I>, <I><B>CELLBORDER</B></I> or <I><B>BORDER</B></I> | |
741 value, this value is used by the table's | |
742 cells unless overridden. If a cell or table specifies a <I><B>BGCOLOR</B></I>, | |
743 this will be the background color for all of its descendents. | |
744 Of course, if a background or fill color is specified for the | |
745 graph object owning the label, this will be the original | |
746 background for the label. | |
747 The object's fontname, fontcolor and fontsize attributes | |
748 are the default for drawing text. These can be overridden by using | |
749 <I><B>FONT</B></I> to set new values. The new font values will hold | |
750 until overridden by an enclosed <I><B>FONT</B></I> element. | |
751 Finally, the pencolor or color of the graph object will be used as | |
752 the border color. | |
753 <P> | |
754 Because of certain limitations in handling tables in a device-independent | |
755 manner, when <I><B>BORDER</B></I> is 1 and both table and cell borders | |
756 are on and <I><B>CELLSPACING</B></I> is less than 2, anomalies can arise | |
757 in the output, such as gaps between sides of borders which should be | |
758 abutting or even collinear. The user can usual get around this by increasing | |
759 the border size or the spacing, or turning off the table border. | |
760 <P> | |
761 As an example of HTML labels, the dot input | |
762 <XMP> | |
763 digraph structs { | |
764 node [shape=plaintext] | |
765 struct1 [label=< | |
766 <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0"> | |
767 <TR><TD>left</TD><TD PORT="f1">mid dle</TD><TD PORT="f2">right</TD></TR> | |
768 </TABLE>>]; | |
769 struct2 [label=< | |
770 <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0"> | |
771 <TR><TD PORT="f0">one</TD><TD>two</TD></TR> | |
772 </TABLE>>]; | |
773 struct3 [label=< | |
774 <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0" CELLPADDING="4"> | |
775 <TR> | |
776 <TD ROWSPAN="3">hello<BR/>world</TD> | |
777 <TD COLSPAN="3">b</TD> | |
778 <TD ROWSPAN="3">g</TD> | |
779 <TD ROWSPAN="3">h</TD> | |
780 </TR> | |
781 <TR> | |
782 <TD>c</TD><TD PORT="here">d</TD><TD>e</TD> | |
783 </TR> | |
784 <TR> | |
785 <TD COLSPAN="3">f</TD> | |
786 </TR> | |
787 </TABLE>>]; | |
788 struct1:f1 -> struct2:f0; | |
789 struct1:f2 -> struct3:here; | |
790 } | |
791 </XMP> | |
792 produces the HTML analogue of the record example above<BR> | |
793 <IMG SRC=html1.gif> | |
794 <P> | |
795 As usual, an HTML specification is more verbose. On the other hand, | |
796 HTML labels are much more general, as the following example shows: | |
797 <P> | |
798 <IMG SRC=html2.gif> | |
799 <P> | |
800 The source for this graph can be found <A HREF=html2.dot>here</A>. | |
801 <P> | |
802 Here is an example using <FONT> elements | |
803 <P> | |
804 <IMG SRC=html3.gif> | |
805 <P> | |
806 with the <A HREF=html3.dot>input graph</A>. | |
807 <P> | |
808 Here is an example using an <IMG> element | |
809 <P> | |
810 <IMG SRC=html4.gif> | |
811 <P> | |
812 with the <A HREF=html4.dot>input graph</A>. | |
813 | |
814 <H2><A NAME=epsf>User-defined Nodes</A></H2> | |
815 | |
816 There is a third type of node shape which is specified by the user. | |
817 Typically, these shapes rely on the details of a concrete graphics | |
818 format. At present, shapes can be described using PostScript, via a | |
819 file or add-on library, for use in PostScript output, or shapes can | |
820 be specified by a bitmap-image file for use with SVG or bitmap (jpeg, | |
821 gif, etc.) output. More information can be found on the page | |
822 <A HREF="http://www.graphviz.org/Documentation/html/shapehowto.html"> | |
823 How to create custom shapes</A>. | |
824 | |
825 <H2><A NAME=sdlshapes>SDL Shapes for PostScript</A></H2> | |
826 One example of user-defined node shapes is provided by Mark Rison of CSR. | |
827 These are the <A HREF=http://www.sdl-forum.org/SDL/index.htm>SDL</A> shapes. | |
828 These are available as PostScript functions whose use is described in | |
829 <A HREF="http://www.graphviz.org/Documentation/html/shapehowto.html#psprocs"> External PostScript procedures</A>. | |
830 The necessary PostScript library file and sample use can be found in the | |
831 <tt>contrib/sdlshapes</tt> directory in the release. Please note the | |
832 COPYRIGHT AND PERMISSION NOTICE contained in the library file <tt>sdl.ps</tt>. | |
833 <P> | |
834 The table below | |
835 gives the shape names and the corresponding node shapes. | |
836 <IMG SRC=sdlshapes.jpg> | |
837 </BODY> | |
838 </HTML> |