For reasons that are beyond me, I’m currently interested in getting pretty SVG images of UML diagrams to display in web pages. Specifically, in my blog. First, I need a UML editor that doesn’t produce rubbish diagrams at home. I’m currently sans a Windows install, so to add spice to the challenge, I wanted to see if I could get great looking UML diagrams out of Ubuntu (no, every Linux UML editor I’ve tried offends me greatly in terms of asthetics).
UML Editing under Ubuntu
There are only really two UML editors I love and they’re both Windows tools. The cheap (as in free) one is StarUML; abandonware circa 2007. The other is Enterprise Architect which I don’t have a home licence for (very good value for money all the same). Both seem to have good reputations with running under Wine (1.3.28), so long as I respect a few winetricks for StarUML.
I’m happy to report that I can run StarUML under Ubuntu and everything I’ve tried to date seems to be working fine:
Here's StarUML, running under Ubuntu 11.10
Printing a PDF file in Wine
The next step was to get StarUML to print out PDF files. After a bit of screwing around, the easiest approach was to simply add a PDF printer to the Ubuntu print manager via a cups PDF printer (thusly from the command-line):
sudo apt-get install cups-pdf
Once installed, Wine seamlessly offered a PDF printer for me to print to, and StarUML was happy to spit a PDF file of its current drawing out and drop it in a new PDF subdirectory off my home directory.
Converting a PDF file to SVG
I thought at this point that things would be plain sailing given the recent success I’ve had under Windows getting Inkscape to edit EPS files (I figured PDF would be just as hassle-free). I was wrong, the PDF import under inkscape is doing something crazy-funky with the fonts. In looking for answers/alternatives, I found a wonderfull little utility called pdf2svg. I installed it, and from the command-line can do something like:
pdf2svg someVectorFile.pdf someVectorFile.svg
This gave me a perfect SVG equivalent to my PDF file. I did a little cleanup in terms of whitespace with Inkscape, and moved onto how I could render it with my Blog.
Rendering SVG files via WordPress
Firstly, WordPress.com won’t allow me to upload SVG files as a valid form of media. I’m hoping they’ll eventually relax that constraint as browsers start rendering SVG files as a more common activity. As an alternative, I decided I need a web address for the file, so I uploaded it to Dropbox account’s public folder, and retrieved a URL for it.
Secondly, I tried following all these suggestions for getting it to render, because WordPress support told me it’d work. Sadly, none of the listed options gave me gold. As a last ditched effort, I decided to use the WordPress “Add Media from URL” function, using the dropbox URL. Joy of joys, it works.
Here’s the HTML that WordPress wraps the SVG image in, JIC you’re interested in that kind of thing (oh: I modified the width to consume the blog post width, as the image insert dialog doesn’t allow that kind of subtlty):
alt="An SVG image of a UML component diagram. If you're seeing this,
does your Web Browser support SVG images?"
And finally, here it is. A UML diagram that doesn’t suck (alright, maybe I could push the font size up a bit, but that’s my problem), that is a scalar vector graphic, AND being rendered from my blog:
Just for s**ts and giggles at this point, feel free to bash whatever keys you use with your browser to resize fonts (typically <CTRL>+ to embiggen, and <CTRL>- to emshrinken). Your mileage will vary, depending on how well your browser handles SVG files. For chrome, I’m having me a little nerdly squeefest doing it. 🙂
And I’m done for tonight. *yawn*