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:

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?