JS Sequence DiagramsはJavaScriptを使ってUMLのシーケンス図を描画するライブラリです。

システムの仕様書を書くためのモデリング言語として知られているのがUMLです。思ったよりも普及しませんでしたが、仕様書の冗長的な文章よりも図の方が分かりやすいケースも多いです。今回はJavaScriptを使って描くシーケンス図ライブラリ、JS Sequence Diagramsを紹介します。

[![](http://images.moongift.jp/2013/03/Screenshot 2013-03-25 11.02.14_thumb.1364216196.png)](http://images.moongift.jp/2013/03/Screenshot 2013-03-25 11.02.14.1364216196.png)
この手書きの乱雑さがいい感じです。

[![](http://images.moongift.jp/2013/03/Screenshot 2013-03-25 11.02.19_thumb.1364216203.png)](http://images.moongift.jp/2013/03/Screenshot 2013-03-25 11.02.19.1364216203.png)
正確な描画もできます。

[![](http://images.moongift.jp/2013/03/Screenshot 2013-03-25 11.02.23_thumb.1364216210.png)](http://images.moongift.jp/2013/03/Screenshot 2013-03-25 11.02.23.1364216210.png)
まさにシーケンス図です。

[![](http://images.moongift.jp/2013/03/Screenshot 2013-03-25 11.02.40_thumb.1364216214.png)](http://images.moongift.jp/2013/03/Screenshot 2013-03-25 11.02.40.1364216214.png)
ノートをつけたり、全く関連し合わない図も書けます。

秀逸なのはやはり手書き風の乱雑な描画ができることではないでしょうか。正確に書くと分かりやすくなる反面、ちょっとしたミスも許されない感じになりますので、ちょっとくらいラフな方が開発もしやすいのではないでしょうか。シンプルな記法からシーケンス図が作れるのはとても面白いです。

JS Sequence DiagramsはJavaScript製、2-clause BSD lisenceオープンソース・ソフトウェアです。

MOONGIFTはこう見る

UMLの失敗はシステム開発者と顧客とが同じ言語(UML)を使って対話するという無茶を実現しようとしたためにあったと思います。また、UMLをコードジェネレータにしようとしたことでコードを記述するレベルでの設計を要求するようになったために設計コストが増大してしまったのも問題です。

そうではなく、システム全体像を把握するためにモデリングしたり、各種あるダイアグラムから必要なものだけをピックアップして使ってみるのはどうでしょう。クラス図、シーケンス図などは取っ付きやすく、まとまっているとシステム概要として役立つはずです。

js-sequence-diagrams by bramp

bramp/js-sequence-diagrams · GitHub