1. Products
  2.   Diagram
  3.   JavaScript
  4.   JS-Sequence-Diagrams
 
  

Open Source JavaScript API for UML Sequence Diagrams

Convert Simple Text to UML Sequence Diagram via Open Source Free JavaScript Library.

JS-Sequence-Diagrams give software developers the capability to generate UML sequence diagrams from simple text via open source JavaScript library. A sequence diagram shows the objects and classes involved in the development and the order of messages exchanged between the objects. The library uses Jison to parse the text, and Snap.svg to draw the image.

It draws simple SVG sequence diagrams from the textual representation of the diagram. The library includes two styles to render the diagram, the "normal" and the "hand-drawn". There are several CSS classes provided for SVG diagram customization.

Previous Next

Getting Started with JS Sequence Diagrams

The recommended way to install JS Sequence Diagrams is to run bower; install bramp/js-sequence-diagrams and include the scripts below:

Install JS Sequence Diagrams via bower

 <script src="/{{ bower directory }}/bower-webfontloader/webfont.js" />

<script src="/{{ bower directory }}/snap.svg/dist/snap.svg-min.js" />

<script src="/{{ bower directory }}/underscore/underscore-min.js" />

<script src="/{{ bower directory }}/js-sequence-diagrams/build/sequence-diagram-min.js" />

also, import the CSS if you plan to use the hand-drawn theme:

Generate UML Sequence Diagrams from Simple Text

JS Sequence Diagrams library enables software developers to generate UML sequence diagrams from simple text. The library allows you to add diagram title and place notes over multiple participants. The latest release uses Snap.svg along with Raphaël for drawing the diagrams. Snap.svg is a pure SVG implementation and permits the usage of CSS styling, better font support, animations, and more.

Export Diagram to SVG via JavaScript API

JS Sequence Diagrams provides features for exporting diagrams to SVG via open source JavaScript API. Once the diagram is created, the API allows users to download it in the SVG format into the location of their choice. JS Sequence Diagrams has included several important CSS classes that can be applied to the SVG diagram when using snap.svg. It has included sequence classes for applying to the main SVG tag, title class for the title of the diagram, actor class for applying to the actors, note class for all notes, and signal class for applying to the signals.

 English