Embedding a UML SVG Image in my blog

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):

<img src="http://dl.dropbox.com/u/23814580/StarUML.svg"
 alt="An SVG image of a UML component diagram.  If you're seeing this,
does your Web Browser support SVG images?"
 width="100%" />

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:

An SVG image of a UML component diagram.  If you're seeing this, does your Web Browser support SVG images?

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*


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s