ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Web上で図を描く際にはCanvasを使うのが一般的です。しかし、Canvasは通常のDOMとはまったく異なるコーディングが求められるので、書くのは好きではないという方もいるでしょう。

そこで簡単な図、ノードを結びつけるようなものを描くならばjointerJSを使ってみましょう。

jointerJSの使い方

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

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

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

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

AICDEV/jointerJS: a simple jQuery plugin to create a visual connection between to html elements

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2