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:

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

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

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.

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

Graphviz cannot generate graph Command: /usr/bin/dot '-Kdot' '-Tcmapx' '-o/data/blog.flirble.org/wp-content/tfo-graphviz/1fc66ba263edb7a011f8b6e14bd272b6.map' '-Tsvg' '-o/data/blog.flirble.org/wp-content/tfo-graphviz/1fc66ba263edb7a011f8b6e14bd272b6.svg' Output: Warning: <stdin>: syntax error in line 45 near '|' 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"; ||a typo 46 47 } 48

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

Graphviz cannot generate graph Command: /usr/bin/dot '-Kdot' '-Tcmapx' '-o/data/blog.flirble.org/wp-content/tfo-graphviz/1fc66ba263edb7a011f8b6e14bd272b6.map' '-Tsvg' '-o/data/blog.flirble.org/wp-content/tfo-graphviz/1fc66ba263edb7a011f8b6e14bd272b6.svg' Output: Warning: <stdin>: syntax error in line 45 near '|'   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"; ||a typo    46    47 }    48

This will be version 1.13.