Web上でインタラクティブな図を描く「JointJS」
JointJSはJavaScript製のオープンソース・ソフトウェア（Mozilla Public License）です。
Web上で図を表示したいと思うことは多々あります。そんな時に画像を使うのは最も知られた方法ですが、再利用性や修正コストが大きくなります。図にもよりますが、JointJSがカバーできる範囲は大きいのではないでしょうか。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-12 12.32.51.1376309477.png)
こんな複雑な図の描画も行えます。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-12 12.32.58.1376309480.png)
マウスオーバーで線の削除ができます。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-12 12.33.09.1376309483.png)
線のポイントを変更して曲がり方を変えることもできます。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-12 12.33.21.1376309487.png)
組織図。こちらも移動ができます。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-12 12.33.33.1376309490.png)
ER図。リレーションの関係も表せています。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-12 12.33.49.1376309494.png)
DEVSの図とのこと。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-12 12.34.10.1376309497.png)
チェス。オブジェクトの動きはチェス盤上に固定されます。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-12 12.34.18.1376309500.png)
アニメーション付きの図です。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-12 12.34.30.1376309503.png)
リンクの表現も多様です。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-12 12.34.36.1376309506.png)
UMLのクラス図。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-12 12.34.42.1376309509.png)
ステートチャート図。
JointJSでは多様な図を描くことができます。図はドラッグして動かすことができたり、ラインを消すこともできます。開発系の図を描く際に役立ちそうです。
MOONGIFTはこう見る
画像で作成する場合、元データを編集できるソフトウェアが必要であったり（少なくともレイヤーで分けていないと編集が大変でしょう）、担当者でないと編集が行えなかったりもします。最初の作成時はもちろん、編集時のコストも考えるべきです。
また、こういった図を共有するWebサービスを考えてみるのも良いかも知れません。JavaScriptで作るようにすれば他のユーザとの共有も容易になります。色々な使い方が考えられるのではないでしょうか。