jointerJS - HTMLエレメントを線で結ぶ // MOONGIFT Archived

Web上で図を描く際にはCanvasを使うのが一般的です。しかし、Canvasは通常のDOMとはまったく異なるコーディングが求められるので、書くのは好きではないという方もいるでしょう。そこで簡単な図、ノードを結びつけるようなものを描くならばjointerJSを使ってみましょう。

jointerJSの使い方

例です。5つのHTMLエレメントが線で結ばれています。

クリックで線を切ることもできます。

jointerJSはHTMLエレメント同士を直線で結ぶというごく簡単な作りです。しかし、これで十分というケースも多いのではないでしょうか。Canvasで描くまでもない、簡単な図であればjointerJSを使うと良さそうです。

jointerJSはjQuery/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。