A simple javascript library to turn text into vector UML sequence diagrams . Heavily inspired by websequencediagrams.com , who offer a serverside solution. We use Jison to parse the text, and Snap.svg to draw the image.

participant C participant B participant A Note right of A: By listing the participants

you can change their order

# Example of a comment. Note left of A: Note to the

left of A Note right of A: Note to the

right of A Note over A: Note over A Note over A,B: Note over both A and B

The following diagram shows the syntax for the diagrams. The exact grammar can be found here in bison format.

Usage

js-sequence-diagrams depends on Snap.svg and Underscore.js (or lodash). You can download all these files manually, or use "bower install bramp/js-sequence-diagrams".

Then include the following HTML:

<div id="diagram"></div> <script> var diagram = Diagram.parse("A->B: Message"); diagram.drawSVG("diagram", {theme: 'hand'}); </script>

<div class="diagram">A->B: Message</div> <script> $(".diagram").sequenceDiagram({theme: 'hand'}); </script>

and now you have two options. You can manually parse the text:or use jQuery to do all the work:

More documentation is in the official README.md