graphviz embedded url

Question

I'm trying to figure out how to generate a graph with hyperlinks you can click to access more detailed information on each node / edge in the graph. I found that graphviz has this ability using the URL node property. Using my test file...

graph G {
    node [label="\N"];
    graph [bb="0,0,218,108"];
    king [pos="31,90", width="0.86", height="0.50"];
    lord [pos="31,18", width="0.81", height="0.50"];
    "boot-master" [URL="google.com"];
    king -- lord [pos="31,72 31,61 31,47 31,36"];
}

... I was able to generate a cmapx file that seems to contain some useful info:

<map id="G" name="G">
<area shape="poly" href="google.com" title="boot&#45;master" alt="" coords="297,29 292,22 279,15 258,10 233,7 204,5 175,7 150,10 129,15 116,22 111,29 116,37 129,43 150,49 175,52 204,53 233,52 258,49 279,43 292,37"/>
</map>

Here was the command I used to generate this:

dot -Tcmapx example1_graph.dot -o test.cmapx

However I'm not sure how to use this file? The documentation for graphviz also mentions the ps2 format should work for URL links but I didn't have any luck.

Answer 1

The map created by graphviz can typically be used in a HTML page.

The idea is to run graphviz twice: once to create the map, and once to create the image.

dot -Tcmapx example1_graph.dot -o test.cmapx
dot -Tpng example1_graph.dot -o test.png

Then the image is served in a HTML page together with the map. The syntax would be something like this:

<img src="/test.png" usemap="#G" alt="graphviz graph" />
<!-- graphviz generated map -->
<map id="G" name="G">
    <area shape="poly" href="google.com" title="boot&#45;master" alt="" coords="297,29 292,22 279,15 258,10 233,7 204,5 175,7 150,10 129,15 116,22 111,29 116,37 129,43 150,49 175,52 204,53 233,52 258,49 279,43 292,37"/>
</map>

The important part being usemap="#G" which links the image to the map.

See also this page for an example of a html page serving image and map together.

---

An other format making use of the Url is SVG:

dot -Tsvg example1_graph.dot -o test.svg

If you open test.svg in a browser, nodes containing URLs are clickable.

(Btw, depending on your use, you may want to prefix URLs with http://)