js-sequence-diagrams

Turns text into UML sequence diagrams

Fork me on GitHub

Demo. Try editing me below

Andrew->China: Says Hello Note right of China: China thinks\nabout it China-->Andrew: How are you? Andrew->>China: I am good thanks!
Theme: | Download as SVG
This should be a diagram! If you don't see it you need Javascript enabled

Intro

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 Raphaël to draw the image.

Examples

Title: Here is a title A->B: Normal line B-->C: Dashed line C->>D: Open arrow D-->>A: Dashed open arrow
Theme: | Download as SVG
Note left of A: Note to the\n left of A Note right of A: Note to the\n right of A Note over A: Note over A
Theme: | Download as SVG
participant C participant B participant A Note right of A: By listing the participants\n you can change their order
Theme: | Download as SVG

Syntax

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

title:messageparticipantactornoteleft ofright ofoveractor:messageactor--->>>actor:message
generated by Railroad Diagram Generator RR

Usage

js-sequence-diagrams depends on Raphaël and Underscore.js (we are lodash compatible). To use include the following:

<script src="raphael-min.js"></script>
<script src="underscore-min.js"></script>
<script src="sequence-diagram-min.js"></script>
and now you have two options. You can manually parse the text:
<div id="diagram"></div>
<script>
  var diagram = Diagram.parse("A->B: Message");
  diagram.drawSVG("diagram", {theme: 'hand'});
</script>
or use jQuery to do all the work:
<div class="diagram">A->B: Message</div>
<script>
$(".diagram").sequenceDiagram({theme: 'hand'});
</script>