[JS]手書き風のシーケンス図をウェブページに簡単に設置できるスクリプト -JS Sequence Diagrams

テキストからSVGのUMLシーケンス図にするシンプルなJavaScriptのライブラリを紹介します。

シーケンス図は手書き風のゆる〜い感じのから、かちっとしたのも描けます。

JS Sequence Diagrams
JS Sequence Diagrams -GitHub

• JS Sequence Diagramsのデモ
• JS Sequence Diagramsの使い方

JS Sequence Diagramsのデモ

デモではさまざまなUMLシーケンス図があります。

元となるテキストはこんな感じです。

テキスト

上記のテキストデータを元にシーケンス図に変更します。
シーケンス図はSVGでダウンロードが可能です。

手書き風のゆる〜い感じのシーケンス図

かちっとしたのも描けます。

かちっとしたシーケンス図

デモのテキストは変更できるので、日本語で試してみました。

日本語での表示

手書き風はフォントがないとダメみたいです。

デモでは他にもいろいろあります。

Demo 1

Demo 2

Demo 3

JS Sequence Diagramsの使い方

Step 1: 外部ファイル

JS Sequence Diagramsの実装には、「Underscore.js」と「Raphaël」が必要です。

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

Step 2: HTML

シーケンス図を描画するエリアを確保します。

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

Step 3: JavaScript

スクリプトでテキストを書き、実行します。

<script>
  var diagram = Diagram.parse("A->B: Message");
  diagram.drawSVG("diagram", {theme: 'hand'});
</script>

jQueryを使用すると、下記のようになります。

<div class="diagram">A->B: Message</div>
<script>
$(".diagram").sequenceDiagram({theme: 'hand'});
</script>