在graphviz中创建可点击的图形

1.创建一个dot文件，在节点属性中使用URL关键字：

target关键字指定链接打开的方式

//test.dot
digraph Arch {
    A;
    B [URL="http://docs.qq.com/", target="_blank"];
    C;
    A -> B -> C;
}

2. 生成图形：

dot -Tpng test.dot -o test.png

3. 生成HTML文件：

dot -Tcmapx test.dot -o test.html

生成的HTML如下：

<map id="Arch" name="Arch">
<area shape="poly" id="node2" href="http://docs.qq.com/" target="_blank" title="B" alt="" coords="77,125,76,118,70,111,62,106,52,103,41,101,30,103,20,106,12,111,7,118,5,125,7,133,12,139,20,145,30,148,41,149,52,148,62,145,70,139,76,133"/>
</map>

4.在HTML代码里加入一行：

<img src="test.png" usemap="#Arch"/>
<map id="Arch" name="Arch">
<area shape="poly" id="node2" href="http://docs.qq.com/" target="_blank" title="B" alt="" coords="77,125,76,118,70,111,62,106,52,103,41,101,30,103,20,106,12,111,7,118,5,125,7,133,12,139,20,145,30,148,41,149,52,148,62,145,70,139,76,133"/>
</map>

保存，打开这个HTML，就会发现B节点可点击，点击后新窗口打开了链接 docs.qq.com

Have fun!