1. Produkte
  2.   Diagramm
  3.   JavaScript
  4.   JS-Sequence-Diagrams
 
  

Open-Source-JavaScript API für UML-Sequenzdiagramme

Konvertieren Sie einfachen Text in ein UML-Sequenzdiagramm über die kostenlose Open-Source-JavaScript-Bibliothek.

JS-Sequenzdiagramme geben Softwareentwicklern die Möglichkeit, UML-Sequenzdiagramme aus einfachem Text über eine Open-Source-JavaScript-Bibliothek zu generieren. Ein Sequenzdiagramm zeigt die an der Entwicklung beteiligten Objekte und Klassen und die Reihenfolge der zwischen den Objekten ausgetauschten Nachrichten. Die Bibliothek verwendet Jison, um den Text zu analysieren, und Snap.svg, um das Bild zu zeichnen.

Es zeichnet einfache SVG-Sequenzdiagramme aus der Textdarstellung des Diagramms. Die Bibliothek enthält zwei Stile zum Rendern des Diagramms, den "normalen" und den "handgezeichneten". Für die Anpassung von SVG-Diagrammen stehen mehrere CSS-Klassen zur Verfügung.

Previous Next

Erste Schritte mit JS-Sequenzdiagrammen

Die empfohlene Methode zur Installation von JS-Sequenzdiagrammen ist die Ausführung von bower; installiere bramp/js-sequence-diagrams und füge die folgenden Skripte hinzu:

Installieren Sie JS-Sequenzdiagramme über 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" />

Importieren Sie auch das CSS, wenn Sie das handgezeichnete Design verwenden möchten:

Generieren Sie UML-Sequenzdiagramme aus einfachem Text

Die JS Sequence Diagrams-Bibliothek ermöglicht es Softwareentwicklern, UML-Sequenzdiagramme aus einfachem Text zu generieren. Die Bibliothek ermöglicht es Ihnen, Diagrammtitel hinzuzufügen und Notizen über mehrere Teilnehmer zu platzieren. Die neueste Version verwendet Snap.svg zusammen mit Raphaël zum Zeichnen der Diagramme. Snap.svg ist eine reine SVG-Implementierung und erlaubt die Verwendung von CSS-Styling, besserer Schriftunterstützung, Animationen und mehr.

Exportieren Sie das Diagramm über die JavaScript-API nach SVG

JS Sequence Diagrams bietet Funktionen zum Exportieren von Diagrammen in SVG über die Open-Source-JavaScript-API. Sobald das Diagramm erstellt ist, ermöglicht die API den Benutzern, es im SVG-Format an einen Ort ihrer Wahl herunterzuladen. JS Sequence Diagrams enthält mehrere wichtige CSS-Klassen, die bei Verwendung von snap.svg auf das SVG-Diagramm angewendet werden können. Es enthält Sequenzklassen zum Anwenden auf das Haupt-SVG-Tag, Titelklasse für den Titel des Diagramms, Akteursklasse zum Anwenden auf die Schauspieler, Notenklasse für alle Noten und Signalklasse zum Anwenden auf die Signale.

 Deutsch