1. 製品
  2.   ダイアグラム
  3.   JavaScript
  4.   JS-Sequence-Diagrams
 
  

UML シーケンス図用のオープンソース JavaScript API

オープンソースの無料 JavaScript ライブラリを介して、単純なテキストを UML シーケンス図に変換します。

JS-Sequence-Diagrams は、オープン ソースの JavaScript ライブラリを介して、単純なテキストから UML シーケンス図を生成する機能をソフトウェア開発者に提供します。シーケンス図は、開発に関係するオブジェクトとクラス、およびオブジェクト間で交換されるメッセージの順序を示しています。ライブラリは Jison を使用してテキストを解析し、Snap.svg を使用して画像を描画します。

図のテキスト表現から単純な SVG シーケンス図を描画します。ライブラリには、ダイアグラムをレンダリングするための 2 つのスタイル、「通常」と「手描き」が含まれています。 SVG ダイアグラムのカスタマイズ用にいくつかの CSS クラスが提供されています。

Previous Next

JS シーケンス図入門

JS シーケンス図をインストールするための推奨される方法は、bower を実行することです。 bramp/js-sequence-diagrams をインストールし、以下のスクリプトを含めます。

bower を介して JS シーケンス図をインストールする

 <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" />

また、手描きのテーマを使用する予定がある場合は、CSS をインポートします。

単純なテキストから UML シーケンス図を生成する

JS シーケンス図ライブラリを使用すると、ソフトウェア開発者は単純なテキストから UML シーケンス図を生成できます。ライブラリを使用すると、図のタイトルを追加したり、複数の参加者にメモを配置したりできます。最新のリリースでは、図を描画するために、Raphaël と共に Snap.svg を使用しています。 Snap.svg は純粋な SVG 実装であり、CSS スタイルの使用、より優れたフォント サポート、アニメーションなどを許可します。

JavaScript API 経由でダイアグラムを SVG にエクスポート

JS シーケンス図は、オープン ソースの JavaScript API を介して図を SVG にエクスポートする機能を提供します。ダイアグラムが作成されると、API を使用して、ユーザーはそれを SVG 形式で選択した場所にダウンロードできます。 JS シーケンス図には、snap.svg を使用するときに SVG 図に適用できるいくつかの重要な CSS クラスが含まれています。メインの SVG タグに適用するシーケンス クラス、図のタイトルのタイトル クラス、アクターに適用するアクター クラス、すべてのノートのノート クラス、シグナルに適用するシグナル クラスが含まれています。

 日本