実験くん（jsPlumbでAWSの構成を可視化）

jsPlumbという、HTMLのエレメント同士をコネクタで接続できるライブラリがあります。

このライブラリはjQueryのプラグインとしてもリリースしているので、これを使用してEC2とセキュリティグループの関係を接続図としてHTMLレンダリングするように実験してみました。 


EC2とセキュリティグループの情報をjsonで出力するPHPを以下のように用意します。


jsPlumbはGoogleCodeでホストされているので、以下からダウンロードします。

jsPlumb
http://code.google.com/p/jsplumb/downloads/list

次に、htmlページを用意し、phpからjsonを取得し、jsplumbに適用させます。

これだけで終わりです。

さっそく実行してみます。

おおー！
うまく表示されました！

はぐれセキュリティグループが一目でわかりますね。


jsplumbはjQueryUI.Draggableをサポートしているので、コネクタで接続されたエンドポイント(ノード)はドラッグで移動することも出来ます。

ELBの接続状況など、いろいろなことが可視化できそうです。

以上です。