<< back to blog

yUML and jQuery for Large Diagrams

yuml ~ uml

02 May, 2009

yUML is for creating back of napkin style UML drawings, in a fast and hassle-free way. I much prefer small UML diagrams backed up with text, and yUML reflects this mind-set. If you do want to create larger diagrams, then this post might help you.

Inspired by Eelco Vissers blog post, I thought of fairly neat way to make it easier to construct larger diagrams.

First, create a DIV, and write your yUML DSL text in it.

<div class="diagram" style="">
    [Account]++-1>[Company],
    [Company]++-1>[Settings],
    [Company]+-*>[Completion],
    [Completion]-1>[Candidate],
    [Completion]^[WebBasedCompletion],
    [Completion]^[PaperBasedCompletion],
    [Completion]-1>[Questionnaire],
    [Questionnaire]->[ScoreSet],
</div>

The benefit of having the DSL text in a div as opposed to an img tag is that it's is quite easy to read and edit. Next, use this little jQuery script to take the DIV contents and construct a regular yUML image tag. My jQuery skillz are a bit naff, I'm sure someone could improve on this :)

<script type="text/javascript" charset="utf-8">
    $('document').ready(function(){
        text = $('.diagram').html().substring(1,$('.diagram').html().length-1).replace('\t','').replace('\n','');
        $('.diagram').html(''); //clear DSL
        $('.diagram').append('<img src="http://yuml.me/diagram/class/' + text + '"/>');     
    });
</script>

The script builds the image tag using the text in the div, and appends the tag to the DOM. The example in this post generates this image:

Large UML diagram

I appreciate that It's not as convenient as embedding the DSL straight in an image tag. Personally, I'll probably stick to creating small diagrams that way. For those that want to build larger UML diagrams, this approach might do the trick?

You may also like...
yUML from the command line
JSON definition for your yUML Diagrams
Generate yUML Diagrams in 10 Lines of Ruby
yUML Loses Adverts and Gains Forum, Twitter, and New Pricing
Want to be involved with yUML?
Blowing Bubbles With Twitter (And Bursting Them!)
PDF Output With yUML, And Other Things...
yUML Direction Control and Scaling
yUML Diagrams Look Cool On GitHub
yUML Scruffy Hand Drawn Look

kick it on DotNetKicks.com
blog comments powered by Disqus