jsPlumbはWeb上でオブジェクト同士のつながりを表現できるJavaScriptライブラリです。

情報は有機的に結びついています。マインドマップやネットワーク図などを描く際には必ずオブジェクト同士が何らかの連結しあっているでしょう。そんな図をWeb上で描くのに使えるライブラリとしてjsPlumbを紹介します。


Yahoo! Pipesに似た連結です。


アニメーションもできます。


マウスでドラッグして接続もできます。


複雑に結びつけました。


一つのオブジェクトから複数のオブジェクトに派生するデモ。

jsPlumbはレンダリング先としてSVG、Canvas、VMLが選択できます。また、ライブラリとしてjQuery/MooTools/YUI3が切り替えられます。オブジェクトはマウスで自由に場所を変更でき、コネクトしているラインは自動で再描画されます。

jsPlumbはJavaScript製、MIT/GPLのオープンソース・ソフトウェアです。

MOONGIFTはこう見る

情報を可視化する際にはこういったライブラリが必ず必要になります。特に自分で全体を書く場合もそうですが、議事録や報告書を自動でマップ化してくれたりする際に便利です。システムからオブジェクトとそのつながりを提供すれば、後は見栄えのいい図にしてくれるのがベストでしょう。

jsPlumbの利点としてjQuery/MooTools/YUI3といった有名なフレームワークに対応してくれていることが挙げられます。ライブラリに依存してしまうソフトウェアは多いですが、利用場所が制限されてしまうのは勿体ないでしょう。開発工数は何倍にもなってしまうかも知れませんが、使い分けできれば利用できるケースが格段に増えるはずです。

jsPlumb 1.3.12 demo - jQuery

jsplumb - jQuery/MooTools/YUI3 library providing visual plumbing for elements on a web page - Google Project Hosting

sporritt/jsPlumb