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>
$(".diagram").sequenceDiagram({theme: 'hand'});
Be Sociable, Share!


  1. Matthew Faulkner

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

  2. Wonderful! Thanks for sharing.

  3. 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.

Leave Your Comment

Your email will not be published or shared. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>