A couple of years back I posted some about an XSL transformation I used to clean up Graphviz output to make my diagrams prettier. These days I use Omni Graffle for most of my diagramming needs, and making diagrams look nice with it is trivial, but Graphviz is still my tool of choice whenever I need to generate diagrams from code automatically, because its automated layout is reasonably good.

Last year I got an e-mail from Ryan Shea who asked about the stylesheet I'd used, and we went back and forth and fixed various problems and made it a lot cleaner. Just the other day I wanted to generate a Graphviz graph and looked up the stylesheet again, and figured it was about time I actually posted it so others can benefit.

Here's a "hello world" Graphviz diagram:

digraph G {
        Hello->World
        Hello [style=filled fillcolor=lightblue]
        World [style=filled fillcolor=lightgrey]
}

Here's how Graphviz renders it (with "dot -Tsvg"). The image on the left (if it shows up for you) is the SVG file. The image on the right is a screenshot in case your browser doesn't support SVG:

Fair enough, but we can do a lot better:

The XSL is pretty simple and can be found here. NOTE: The Graphviz SVG output has changed quite a few times - if the XSL linked here doesn't work for you, I'd very much appreciate if you post what version of Graphviz you've tested it with in the comments, and/or a sample of the SVG, so I can fix the XSL

The one caveat is that for any color you want turned into a gradient, you need to add an extra "linearGradient" tag to the XSL file like the ones that are already there.

You will need an XSL processor to convert the files. Personally I use "xsltproc" on my Linux box, which is from libxslt RPM if you're on Fedora Core or Redhat EL - chances are it's already installed if you use Linux. If so, you convert your Graphviz files like this (assuming your dot file is names "hello.dot" and you've saved the XSL file as notugly.xsl):

dot -Tsvg hello.dot >hello.svg
xsltproc notugly.xsl hello.svg >hello-notugly.svg