dot -Timap -ox.map -Tgif -ox.gif x.gv
</PRE>
and then refer to it in a web page:
-<XMP>
-<A HREF="x.map"><IMG SRC="x.gif" ismap="ismap" /></A>
-</XMP>
+<PRE>
+<A HREF="x.map"><IMG SRC="x.gif" ismap="ismap" /></A>
+</PRE>
For client-side maps, one again generates two output files:
<PRE>
dot -Tcmapx -ox.map -Tgif -ox.gif x.gv
</PRE>
and uses the HTML
-<XMP>
-<IMG SRC="x.gif" USEMAP="#mainmap" />
+<PRE>
+<IMG SRC="x.gif" USEMAP="#mainmap" />
... [content of x.map] ...
-</XMP>
+</PRE>
Note that the name given in the USEMAP attribute must be the same
as the ID attribute of the MAP element. The Graphviz renderer
uses the name of the graph as the ID. Thus, in the example above,
where the graph's name is <CODE>mainmap</CODE>, we have <CODE>USEMAP="#mainmap"</CODE>
in the IMG attribute, and x.map will look like
-<XMP>
-<map id="mainmap" name="mainmap">
+<PRE>
+<map id="mainmap" name="mainmap">
...
-</map>
-</XMP>
+</map>
+</PRE>
<P>
<A HREF=attrs.html#d:URL>URLs</A> can be attached to the root
graph, nodes and edges. If a node has a URL, clicking in the node
<A HREF=attrs.html#d:height><TT>height</TT></A> attributes, and the shape
is used for edge termination, but both the shape and label sizes are used
preventing node overlap. For example, the following graph
-<XMP>
+<PRE>
digraph G {
{
node [margin=0 fontcolor=blue fontsize=32 width=0.5 shape=circle style=filled]
b [fillcolor=yellow fixedsize=true label="a very long label"]
d [fixedsize=shape label="an even longer label"]
}
- a -> {c d}
- b -> {c d}
+ a -> {c d}
+ b -> {c d}
}
-</XMP>
+</PRE>
yields the figure<BR>
<IMG SRC=fixed.gif>
<P>
displayed vertically.
<P>
As an example of a record node, the dot input
-<XMP>
+<PRE>
digraph structs {
node [shape=record];
- struct1 [label="<f0> left|<f1> mid\ dle|<f2> right"];
- struct2 [label="<f0> one|<f1> two"];
- struct3 [label="hello\nworld |{ b |{c|<here> d|e}| f}| g | h"];
- struct1:f1 -> struct2:f0;
- struct1:f2 -> struct3:here;
+ struct1 [label="<f0> left|<f1> mid&#92; dle|<f2> right"];
+ struct2 [label="<f0> one|<f1> two"];
+ struct3 [label="hello&#92;nworld |{ b |{c|<here> d|e}| f}| g | h"];
+ struct1:f1 -> struct2:f0;
+ struct1:f2 -> struct3:here;
}
-</XMP>
+</PRE>
yields the figure<BR>
<IMG SRC=record.gif>
<P>
If we add the line
-<XMP>
+<PRE>
rankdir=LR
-</XMP>
+</PRE>
we get the layout<BR>
<IMG SRC=record2.gif>
<P>
Note that <TT>point</TT> shapes are always filled.
<P>
Thus, the code
-<XMP>
+<PRE>
digraph G {
rankdir=LR
node [shape=box, color=blue]
node1 [style=filled]
node2 [style=filled, fillcolor=red]
- node0 -> node1 -> node2
+ node0 -> node1 -> node2
}
-</XMP>
+</PRE>
yields the figure<BR>
<IMG SRC=fill.gif>
mutually exclusive.
<P>
As an example of rounding, dot uses the graph
-<XMP>
+<PRE>
digraph R {
rankdir=LR
node [style=rounded]
node2 [fillcolor=yellow, style="rounded,filled", shape=diamond]
node3 [shape=record, label="{ a | b | c }"]
- node1 -> node2 -> node3
+ node1 -> node2 -> node3
}
-</XMP>
+</PRE>
to produce the figure<BR>
<IMG SRC=round.gif>
<DT><A NAME=d:dashed></A><TT>dashed</TT>
the border size or the spacing, or turning off the table border.
<P>
As an example of HTML labels, the dot input
-<XMP>
+<PRE>
digraph structs {
node [shape=plaintext]
- struct1 [label=<
-<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
- <TR><TD>left</TD><TD PORT="f1">mid dle</TD><TD PORT="f2">right</TD></TR>
-</TABLE>>];
- struct2 [label=<
-<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
- <TR><TD PORT="f0">one</TD><TD>two</TD></TR>
-</TABLE>>];
- struct3 [label=<
-<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0" CELLPADDING="4">
- <TR>
- <TD ROWSPAN="3">hello<BR/>world</TD>
- <TD COLSPAN="3">b</TD>
- <TD ROWSPAN="3">g</TD>
- <TD ROWSPAN="3">h</TD>
- </TR>
- <TR>
- <TD>c</TD><TD PORT="here">d</TD><TD>e</TD>
- </TR>
- <TR>
- <TD COLSPAN="3">f</TD>
- </TR>
-</TABLE>>];
- struct1:f1 -> struct2:f0;
- struct1:f2 -> struct3:here;
+ struct1 [label=<
+<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
+ <TR><TD>left</TD><TD PORT="f1">mid dle</TD><TD PORT="f2">right</TD></TR>
+</TABLE>>];
+ struct2 [label=<
+<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
+ <TR><TD PORT="f0">one</TD><TD>two</TD></TR>
+</TABLE>>];
+ struct3 [label=<
+<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0" CELLPADDING="4">
+ <TR>
+ <TD ROWSPAN="3">hello<BR/>world</TD>
+ <TD COLSPAN="3">b</TD>
+ <TD ROWSPAN="3">g</TD>
+ <TD ROWSPAN="3">h</TD>
+ </TR>
+ <TR>
+ <TD>c</TD><TD PORT="here">d</TD><TD>e</TD>
+ </TR>
+ <TR>
+ <TD COLSPAN="3">f</TD>
+ </TR>
+</TABLE>>];
+ struct1:f1 -> struct2:f0;
+ struct1:f2 -> struct3:here;
}
-</XMP>
+</PRE>
produces the HTML analogue of the record example above<BR>
<IMG SRC=html1.gif>
<P>
<IMG SRC=tee.gif>
<P>
can be produced using
-<XMP>
+<PRE>
tee [shape=none margin=0 label=
- <<table border="0" cellspacing="0" cellborder="1">
- <tr>
- <td width="9" height="9" fixedsize="true" style="invis"></td>
- <td width="9" height="9" fixedsize="true" sides="ltr"></td>
- <td width="9" height="9" fixedsize="true" style="invis"></td>
- </tr>
- <tr>
- <td width="9" height="9" fixedsize="true" sides="tlb"></td>
- <td width="9" height="9" fixedsize="true" sides="b"></td>
- <td width="9" height="9" fixedsize="true" sides="brt"></td>
- </tr>
- </table>>]
-</XMP>
+ <<table border="0" cellspacing="0" cellborder="1">
+ <tr>
+ <td width="9" height="9" fixedsize="true" style="invis"></td>
+ <td width="9" height="9" fixedsize="true" sides="ltr"></td>
+ <td width="9" height="9" fixedsize="true" style="invis"></td>
+ </tr>
+ <tr>
+ <td width="9" height="9" fixedsize="true" sides="tlb"></td>
+ <td width="9" height="9" fixedsize="true" sides="b"></td>
+ <td width="9" height="9" fixedsize="true" sides="brt"></td>
+ </tr>
+ </table>>]
+</PRE>
<H2><A NAME=epsf>User-defined Nodes</A></H2>
There is a third type of node shape which is specified by the user.