[ home ]

Using Dot-generated graphs as clickable HTML nodes

An image-map is basically a set of coordinates, adding hyperlink-areas to an image.

Using Dot with options -Tcmapx -o MyMapFile.map generates such an image-map in addition to the normal output-image. Both can then be used in an HTML-page to allow for graphs with clickable nodes.

Generating the map

In the dot-file,

  1. name the graph, which will be used as map-name in HTML
  2. use the URL node-attribute to make it clickable.

Example dot-snippet:

    digraph X
        a [ URL = "http://a.com/" ]
        b [ URL = "local.html"    ]
        a -> b

Generating both graphics- and map-file output:

    dot d.dot -Tpng -o d.png -Tcmapx -o d.map

...which would generate d.png and corresponding map d.map.

Using the map in HTML

Map-output looks something like this:

    <map id="X" name="X">
    <area shape="poly" id="node1" href="http://a.com/" title="a" alt="" coords="257,29,256, ...
    <area shape="poly" id="node2" href="local.html" title="b" alt="" coords="221,125,220, ...

...which can be used in an HTML-file alongside the generated pic, like this:

    <img src="d.png" usemap="#X"/>
    <map id="X" name="X">
    <area shape="poly" ...

(Making this 100% HTML-compliant is left as an exercise for the reader.)