Draw UML Sequence Diagrams with Javascript

I’m happy to announce one of my projects, js-sequence-diagrams. This uses Javascript to draw UML sequence diagrams in SVG format. Here is an example:

js-sequence-diagram example

You can alter the diagram in real time, and I even have a simple jQuery plugin to make this easy to use on your own sites.

<script src="sequence-diagram-min.js"></script>
<div class="diagram">A->B: Message</div>
<script>
$(".diagram").sequenceDiagram({theme: 'hand'});
</script>
Be Sociable, Share!
  • Matthew Faulkner

    That’s awesome. I’m totally going to use this.

  • http://monkeysintown.com Aleks

    Wonderful! Thanks for sharing.

  • http://scott.sauyet.com/thoughts/ Scott Sauyet

    I’ve loved these tools since Alex Moffat published a Java one many years ago. This is a great addition, and already looking ot be in great shape.

    A nice addition would be hooking together with a file-saver when it’s available, something like http://updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side.

    Also nice would be to use PNG’s extension mechanism to store the diagram text inside a generated PNG file so that it could be loaded back up for editing later. I made that extension to Alex Moffat’s version many years ago, but don’t really remember the details now of how it was done.