Adding SVG support to TFO-Graphviz

A TFO-Graphviz plugin user recently posted some issues he was having with the plugin. One of his requests was to add the SVG output format which I had hitherto omitted because of the previous lack of browser support. Time has passed, it is time to fix that omission.

For maximum effect this also meant the introduction of the width and height attributes. This an example of the SVG output scaled to 100% of the width of its container on the page:

Error generating Graphviz image: 

Graphviz cannot generate graph
Command: /usr/bin/dot '-Kdot' '-Tsvg' '-o/data/blog.flirble.org/wp-content/tfo-graphviz/f9fc0b4fd3dbc1d56043b157a8440b7a.svg'
Output: 
There is no layout engine support for "dot"
Perhaps "dot -c" needs to be run (with installer's privileges) to register the plugins?

Original DOT:
    1 digraph hierarchy {
    2 size="5,5"
    3 
    4 graph [bgcolor="transparent"]
    5 node[shape=record,style=filled,fillcolor=gray95]
    6 edge[dir=back, arrowtail=empty]
    7 
    8 2[label = "{AbstractSuffixTree|+ text\n+ root|...}"]
    9 3[label = "{SimpleSuffixTree|...| + constructTree()\l...}"]
   10 4[label = "{CompactSuffixTree|...| + compactNodes()\l...}"]
   11 5[label = "{SuffixTreeNode|...|+ addSuffix(...)\l...}"]
   12 6[label = "{SuffixTreeEdge|...|+ compactLabel(...)\l...}"]
   13 
   14 2->3;
   15 2->4;
   16 
   17 5->5[constraint=false, arrowtail=odiamond]
   18 4->3[constraint=false, arrowtail=odiamond]
   19 2->5[constraint=false, arrowtail=odiamond]
   20 5->6[arrowtail=odiamond]
   21 }

And here’s the same graph again, but with the width constrained to a specific pixel count:

Error generating Graphviz image: 

Graphviz cannot generate graph
Command: /usr/bin/dot '-Kdot' '-Tsvg' '-o/data/blog.flirble.org/wp-content/tfo-graphviz/f9fc0b4fd3dbc1d56043b157a8440b7a.svg'
Output: 
There is no layout engine support for "dot"
Perhaps "dot -c" needs to be run (with installer's privileges) to register the plugins?

Original DOT:
    1 digraph hierarchy {
    2 size="5,5"
    3 
    4 graph [bgcolor="transparent"]
    5 node[shape=record,style=filled,fillcolor=gray95]
    6 edge[dir=back, arrowtail=empty]
    7 
    8 2[label = "{AbstractSuffixTree|+ text\n+ root|...}"]
    9 3[label = "{SimpleSuffixTree|...| + constructTree()\l...}"]
   10 4[label = "{CompactSuffixTree|...| + compactNodes()\l...}"]
   11 5[label = "{SuffixTreeNode|...|+ addSuffix(...)\l...}"]
   12 6[label = "{SuffixTreeEdge|...|+ compactLabel(...)\l...}"]
   13 
   14 2->3;
   15 2->4;
   16 
   17 5->5[constraint=false, arrowtail=odiamond]
   18 4->3[constraint=false, arrowtail=odiamond]
   19 2->5[constraint=false, arrowtail=odiamond]
   20 5->6[arrowtail=odiamond]
   21 }



And here’s one of my previous Graphs as an SVG:

Error generating Graphviz image: 

Graphviz cannot generate graph
Command: /usr/bin/dot '-Kdot' '-Tcmapx' '-o/data/blog.flirble.org/wp-content/tfo-graphviz/1cbf0a4a9bbc99cc3ca953db0b4b81f3.map' '-Tsvg' '-o/data/blog.flirble.org/wp-content/tfo-graphviz/1cbf0a4a9bbc99cc3ca953db0b4b81f3.svg'
Output: 
There is no layout engine support for "dot"
Perhaps "dot -c" needs to be run (with installer's privileges) to register the plugins?

Original DOT:
    1 digraph tfo_graphviz_3 {
    2 
    3 
    4 node [style="rounded,filled", color=lightblue2,
    5 fontsize=10, shape=box];
    6 edge [arrowhead=vee, arrowsize=0.5];
    7 
    8 subgraph cluster_client {
    9 node [label="File system", URL="http://en.wikipedia.org/wiki/Xfs"]; fs;
   10 node [label="LVM", URL="http://en.wikipedia.org/wiki/Logical_Volume_Manager_(Linux)"]; lvm;
   11 node [label="Linux HBA driver", URL="http://www.ibm.com/developerworks/linux/library/l-scsi-subsystem/"]; clienthba;
   12 fs -> lvm -> clienthba;
   13 bgcolor = lightgrey;
   14 label = "Virtual Machine";
   15 URL = "http://www.ubuntu.com/";
   16 }
   17 
   18 subgraph cluster_esxi {
   19 node [label="Virtual HBA hardware"]; virtualhba;
   20 node [label="VMDK file"]; vmdk;
   21 node [label="vmfs"]; vmfs;
   22 node [label="ESXi HBA driver"]; vmhba;
   23 virtualhba -> vmdk -> vmfs -> vmhba;
   24 bgcolor = white;
   25 label = "Hypervisor";
   26 URL = "http://www.vmware.com/products/vsphere-hypervisor/";
   27 }
   28 
   29 subgraph cluster_hardware {
   30 node [label="Physical HBA hardware", URL="http://tinyurl.com/dellpercraid"]; phba;
   31 node [label="Physical disks", URL="http://www.amazon.com/exec/obidos/ASIN/B002B7EIVC/cl-blog-20/"]; disks;
   32 phba -> disks;
   33 style = filled; bgcolor = lightgrey;
   34 label = "Hardware";
   35 URL = "http://www.dell.com/us/business/p/poweredge-r515/pd";
   36 }
   37 
   38 style=filled;
   39 bgcolor=aquamarine4;
   40 fontsize=10;
   41 labeljust=l;
   42 
   43 clienthba -> virtualhba;
   44 vmhba -> phba;
   45 label = "I/O stack";
   46 
   47 }
   48

The image map works great with the SVG format, but unfortunately if the browser scales the image at all (such as in a responsive design) it doesn’t seem to scale the image map with it. It seems the current best option is to include some JavaScript whenever have both an image map and use of the height or width attributes. I’m not keen on this but see no other alternative at the moment.

Error generating Graphviz image: 

Graphviz cannot generate graph
Command: /usr/bin/dot '-Kdot' '-Tcmapx' '-o/data/blog.flirble.org/wp-content/tfo-graphviz/320e381fe8cf3850ec9ac25c0e8752b7.map' '-Tsvg' '-o/data/blog.flirble.org/wp-content/tfo-graphviz/320e381fe8cf3850ec9ac25c0e8752b7.svg'
Output: 
There is no layout engine support for "dot"
Perhaps "dot -c" needs to be run (with installer's privileges) to register the plugins?

Original DOT:
    1 digraph tfo_graphviz_4 {
    2 
    3 
    4 node [style="rounded,filled", color=lightblue2,
    5 fontsize=10, shape=box];
    6 edge [arrowhead=vee, arrowsize=0.5];
    7 
    8 subgraph cluster_client {
    9 node [label="File system", URL="http://en.wikipedia.org/wiki/Xfs"]; fs;
   10 node [label="LVM", URL="http://en.wikipedia.org/wiki/Logical_Volume_Manager_(Linux)"]; lvm;
   11 node [label="Linux HBA driver", URL="http://www.ibm.com/developerworks/linux/library/l-scsi-subsystem/"]; clienthba;
   12 fs -> lvm -> clienthba;
   13 bgcolor = lightgrey;
   14 label = "Virtual Machine";
   15 URL = "http://www.ubuntu.com/";
   16 }
   17 
   18 subgraph cluster_esxi {
   19 node [label="Virtual HBA hardware"]; virtualhba;
   20 node [label="VMDK file"]; vmdk;
   21 node [label="vmfs"]; vmfs;
   22 node [label="ESXi HBA driver"]; vmhba;
   23 virtualhba -> vmdk -> vmfs -> vmhba;
   24 bgcolor = white;
   25 label = "Hypervisor";
   26 URL = "http://www.vmware.com/products/vsphere-hypervisor/";
   27 }
   28 
   29 subgraph cluster_hardware {
   30 node [label="Physical HBA hardware", URL="http://tinyurl.com/dellpercraid"]; phba;
   31 node [label="Physical disks", URL="http://www.amazon.com/exec/obidos/ASIN/B002B7EIVC/cl-blog-20/"]; disks;
   32 phba -> disks;
   33 style = filled; bgcolor = lightgrey;
   34 label = "Hardware";
   35 URL = "http://www.dell.com/us/business/p/poweredge-r515/pd";
   36 }
   37 
   38 style=filled;
   39 bgcolor=aquamarine4;
   40 fontsize=10;
   41 labeljust=l;
   42 
   43 clienthba -> virtualhba;
   44 vmhba -> phba;
   45 label = "I/O stack";
   46 
   47 }
   48

And the DOT for that is:

The other small enhancement added is slightly better error output. This currently only works if you call the Graphviz program; it doesn’t work for PHP bindings. But a typo in the above DOT would produce this output (noting the style will vary with whatever theme and plugins you have):

Error generating Graphviz image

This will be version 1.13.

One thought on “Adding SVG support to TFO-Graphviz”

  1. Pingback: Chris Luke on "[Plugin: TFO Graphviz] Doesn't work, no idea why" * Best Wordpress Themes - Reviews

Comments are closed.