js-sequence-diagrams by bramp (original) (raw)
| 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 Snap.svg 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 |
|---|
| # Example of a comment. 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 Note over A,B: Note over both A and B 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.
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:
and now you have two options. You can manually parse the text:
or use jQuery to do all the work:
A->B: Message
More documentation is in the official README.md