I came across the EHT Graphviz plugin for WordPress and, whilst useful, it has a very clumsy shortcode parser, is not well documented and only supports a subset of the Graphviz functionality. Now Graphviz is not exactly a standard for clear documentation but it is a useful tool for flow or organisational diagramming.
So I wrote my own WordPress plugin, which is demonstrated here.
|
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 |
[graphviz lang="dot" output="png" \ simple="yes" imap="yes" href="self" \ title="TFO Graphviz Demo"] node [style="rounded,filled", color=lightblue2, fontsize=10, shape=box]; edge [arrowhead=vee, arrowsize=0.5]; subgraph cluster_client { node [label="File system", URL="http://en.wikipedia.org/wiki/Xfs"]; fs; node [label="LVM", URL="http://en.wikipedia.org/wiki/Logical_Volume_Manager_(Linux)"]; lvm; node [label="Linux HBA driver", URL="http://www.ibm.com/developerworks/linux/library/l-scsi-subsystem/"]; clienthba; fs -> lvm -> clienthba; bgcolor = lightgrey; label = "Virtual Machine"; URL = "http://www.ubuntu.com/"; } subgraph cluster_esxi { node [label="Virtual HBA hardware"]; virtualhba; node [label="VMDK file"]; vmdk; node [label="vmfs"]; vmfs; node [label="ESXi HBA driver"]; vmhba; virtualhba -> vmdk -> vmfs -> vmhba; bgcolor = white; label = "Hypervisor"; URL = "http://www.vmware.com/products/vsphere-hypervisor/"; } subgraph cluster_hardware { node [label="Physical HBA hardware", URL="http://tinyurl.com/dellpercraid"]; phba; node [label="Physical disks", URL="http://www.amazon.com/gp/product/B002B7EIVC?ie=UTF8&tag=clblog01-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=B002B7EIVC"]; disks; phba -> disks; style = filled; bgcolor = lightgrey; label = "Hardware"; URL = "http://www.dell.com/us/business/p/poweredge-r515/pd"; } style=filled; bgcolor=aquamarine4; fontsize=10; labeljust=l; clienthba -> virtualhba; vmhba -> phba; label = "I/O stack"; [/graphviz] |
This example demonstrates image maps and the anchor that encompasses the entire image (this last the WordPress Shadowbox JS plugin picks up). Note how the image maps work hierarchically and provide tool-tips too.
Generated files are kept around instead of being regenerated using a name based on the MD5 hash of the DOT code. If you are logged in and an Admin user then the output is always regenerated, just in case (since the hash doesn’t incorporate any attributes the shortcode tag, for instance).
I plan to release this plugin next week.