Easy Use Case Diagrams with YUML

[Site Admin]-(Manage content),
(Manage content)>(Delete content),
(Manage content)>(Modify content),
(Manage content)>(Create content),
[Site Admin]-(Manage pages),
(Manage pages)>(Delete a page),
(Manage pages)>(Modify a page),
(Modify a page)>(Add Content to a page),
(Modify a page)>(Remove Content from a page),
(Manage pages)>(Create a page)

I can't remember how I stumbled upon this site but I'm glad I did. YUML allows you to create class and use case diagrams online using a simple text syntax. This blog post from the author of the site demonstrates how to use jquery to render a fairly complicated class diagram. Below is the code I used to generate the use case diagram above.

<pre class="diagram">
[Site Admin]-(Manage content),
(Manage content)>(Delete content),
(Manage content)>(Modify content),
(Manage content)>(Create content),
[Site Admin]-(Manage pages),
(Manage pages)>(Delete a page),
(Manage pages)>(Modify a page),
(Modify a page)>(Add Content to a page),
(Modify a page)>(Remove Content from a page),
(Manage pages)>(Create a page)
</pre>

<script type="text/javascript" charset="utf-8">
$('document').ready(
    function(){
        text = $('.diagram').html().replace('\t','').replace('\n','').replace(/&gt;/g,'>');
        $('.diagram').html('');
        $('.diagram').append('<img width="320" height="240" src="http://yuml.me/diagram/scruffy/usecase/' + text + '" />');
    }
);
</script>

Did it work for you? You are welcome to post your comments/questions or better yet, link to this post, blog about it and tell all your friends who might find this post useful.