Vidar Hokstad

Home Blog Ruby Compiler Sliding Stats

2008-03-31 00:59 UTC Making Graphviz output pretty with XSL

Posted in: , , , , ,
NOTE: See the updated version of this stylesheet HERE

UPDATED: Example of the latest version here

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 (updated to link to a GitHub repository that will be regularly updated)  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



Comments - Newest first

2009-11-20 19:23 UTC
andrew
Update to my "java.net.connectexception: connection timed out: connect" error above. Issue resolved by setting Java proxy settings as per http://old.nabble.com/java.net.ConnectException:-Connection-timed-out:-td3069951.html

2009-05-12 00:45 UTC
Vidar Hokstad
Adi,

I know - the version you're looking at (I presume - the latest from Github, right?) is significantly improved over what was posted here originally. But unfortunately I don't there's any way of making the rounder corners much better. The double circle should be fixable. I plan on posting a follow up article once I've fixed a few more bugs.

2009-05-11 23:30 UTC
Adi
This is really great. I always wanted something to prettify graphviz output.

There is one bug. Curved edges do not come out correctly. For an example, consider the fsm example from graphviz gallary http://www.graphviz.org/Gallery/directed/fsm.gv.txt

In the transformed svg, all the curved edges are worng (filled rather than just stroke). The double circle shape is converted to a single circle.

2009-04-20 22:19 UTC
Vidar Hokstad
Here's an update that should work with Graphviz up to version 2.22.2 (at least):

http://github.com/vidarh/diagram-tools/tree/master

2009-04-06 14:52 UTC
Vidar Hokstad
Derevo,

The most likely problem is that the traceroute output on FreeBSD is different from the output on Linux. I don't have access to a box with FreeBSD, but if you run traceroute manually and send me the output I'll see if I can figure out the problem.

2009-04-03 18:00 UTC
Derevo
Hi, Thanks alot, i have some problemms with script on FreeBSD 7.0, my trace.dot file loocks like that after generation (#ruby traceviz.rb 123.30.120.57 > trace.dot)

digraph G { "123.30.120.57" [style=filled fillcolor=lightblue] "203.162.184.85" [style=filled fillcolor=lightgrey] "192.168.1.1" [style=filled fillcolor=lightgrey] "203.210.227.1" [style=filled fillcolor=lightgrey] "bsd" [style=filled fillcolor=lightblue] }

I dont understend ruby code, im just try to debug it, but dont have resoults, this part of code work until line end.compact, after this line it stop. And i think array @edges is empty.

def process_trace host,trace @targets << host trace = [@this_host] + trace.collect do |line| line=line.split line[0].to_i > 0 && line[1] != "*" ? line[1] : nil end.compact trace << host trace.each {|h| @nodes << h } trace.each_cons(2) {|h1,h2| @edges << [h1,h2] } end

Thanks foe help.

2008-11-30 01:34 UTC
Tim
Works perfectly, thank you Vidar! I started adopting the xsl file to my needs and will use this a lot.
2008-10-02 22:10 UTC
Vidar Hokstad
Viktor,

Most likely the version of Graphviz you're using is outputting different SVG than the one I used. Feel free to e-mail me (vidar@hokstad.com) with the version number, and an example SVG file output from Graphviz, and the result after you ran the XSL processor on it, and I'll see if I can make sense of it.

2008-10-02 13:31 UTC
Viktor
hi,

i'am getting always black shapes. Any idea?

2008-07-10 17:47 UTC
Vidar Hokstad
Tiago, I deleted the duplicate comment. As for the embed/img bit, img used to work at least in firefox, that's why I used it for the example - haven't looked at it since, but I see it's now broken in FF3 too which makes very little sense.. Anyway, I've updated the page, thanks for the pointer.

Regarding hovering, I don't know - I haven't actually seen anyone do that with SVG so I'm not sure if most/any current browsers supports it. So far I'm only using SVG for generating static diagrams so it I haven't really looked into it.

2008-07-08 16:08 UTC
Tiago Rinck Caveden
Hello again!

Sorry for the double post above, I accidentaly refreshed the page.

Would you know how could I add hovering effects over the pollygons and ellipses? I tried chaning the style attribute so it would be like: style="{fill:url(#normalColor);stroke:black} :hover{fill:url(#hoverColor);stroke:black}" But that doesn't work. I tried removing the stroke, with and without brackets, nothing worked, but according to this http://www.w3.org/TR/css-style-attr#examples it's like that it should be...

Thanks, Tiago.

2008-07-07 15:37 UTC
Tiago Rinck Caveden
Hi!

I guess that for the SVG images to work in most browsers you should call it with another tag, like the "embed" one, not img... Take a look: http://www.w3schools.com/svg/svg_inhtml.asp

Best regards, Tiago.

2008-05-29 19:42 UTC
Vidar Hokstad
If you liked this one, take a look at my Ruby script to visualize traceroute to multiple sites as a diagram. I use this XSL to process the output from it.

2008-05-02 09:02 UTC
Vidar Hokstad
I've never used Saxon, but my intial thought is that regardless your best bet would be to try to turn off whatever option makes it try to retrieve the urls - having your parser go out to retrieve the namespace URI's is really completely pointless, as it can't use whatever information it finds there anyway.

2008-05-02 03:50 UTC
Andrew
When I try this using my old reliable Saxon9, I get this:

C:\>type graphviz.DOT.txt | "C:\Program Files\ATT\Graphviz\bin\dot.exe" -Tsvg -o graphviz.svg

C:\>java.exe -jar C:\saxon9.jar -s:C:\graphviz.svg -xsl:C:\notugly.xsl -o:C:\graphviz-notugly.svg Warning: at xsl:stylesheet on line 3 of file:/C:/notugly.xsl: Running an XSLT 1.0 stylesheet with an XSLT 2.0 processor Error java.net.ConnectException: Connection timed out: connect Transformation failed: Run-time errors were reported

My SVG from DOT is fine and displays correctly. I'm also able to manually reach each HTTP url in the .xsl Any ideas?

2008-04-27 17:48 UTC
Michael Kennedy

This is great stuff. In the interest of helping others who find this blog post useful, I've created an updated version of the XSL that contains all of the possible GraphViz colours, and made it available here:

http://s3.digitalfort.com/posts/notugly-full.xsl

Enjoy, and thanks for sharing.

MK

2008-04-18 20:42 UTC
Fred Daoud
Hi Vidar,

Thanks a million for posting this. I find graphviz very useful for generating diagrams instead of drawing them "by hand", and it's great to have a way of prettying up the output.

Thank you !

Cheers, Freddy

2008-04-01 04:56 UTC
Mark Thomas
Nifty! My graphviz output is usually black and white so this is a huge improvement...

About me

E-mail: vidar@hokstad.com Skype: vhokstad
Twitter: vhokstad
View my LinkedIn profile.

I was born April 21st, 1975, in Oslo, Norway. Since 2000 I've been living in London, UK. I'm married and we just had our first child, Tristan Ikemefuna Hokstad.

I'm working for Aardvark Media as Director of Technology. I'm also currently on the board of SpatialQ, a startup in the GIS space, and an advisor to Skoach, a startup doing a time management app for people with ADD.

Twitter Updates

    follow me on Twitter

    Recent posts to my blog

    Tags

    (4) (3) (2) (36) (28) (3) (2) (2) (5) (4) (5) (3) (2) (4) (4) (3) (2) (7) (7) (9) (2) (3) (2) (3) (2) (2) (4) (7) (3) (5) (7) (3) (49) (6) (3) (61) (2) (4) (3) (3) (3) (3) (18) (5) (2) (2) (2) (3) (4) (3)

    StumbleUpon My link page

    (Links I have stumbled and like)