Js-sequence-diagrams: Diagramas UML con JavaScript

Se trata de una herramienta que nos permite crear diagramas UML utilizando para ello JavaScript.

 

 

 

Este proyecto crea de forma dinámica los diagramas, para lograrlo utiliza gráficos vectoriales del tipo SVG. Algo que merece ser destacado es que los diagramas se pueden personalizar mediante el uso de diversos temas, los mismos se pueden asignar de forma estática o dinámica, inclusive se pueden crear.

 

¿Cómo usarlo?

 

Incorporamos las bibliotecas necesarias a nuestro proyecto:

 

<script src="raphael-min.js"></script>

<script src="underscore-min.js"></script>

<script src="sequence-diagram-min.js"></script>

 

 

Ahora tenemos dos opciones:

 

Utilizando solo JavaScript:

 

<div id="diagram"></div>

<script>

  var diagram = Diagram.parse("A->B: Message");

  diagram.drawSVG("diagram", {theme: 'hand'});

</script>

 

 

Utilizando jQuery:

 

<div>A->B: Message</div>

<script>

$(".diagram").sequenceDiagram({theme: 'hand'});

</script>

 

 

Prueba la herramienta: JS

 

 

Fuente: Kabytes