Web上での表現力を向上させるためのライブラリが多数存在します。多くはグラフを描くものであったり、より複雑なチャートを描くものです。さらにWebGLを使ったり、Canvasに複雑な描画を行うものもあります。 今回紹介するJointJSはCanvas上に図形を描くのですが、JavaScriptと連携したインタラクティブな図を描けます。

JointJSの使い方

デモです。まずは回転する図形。

こんな図形も描けます。なお、緑と赤のポイントはドラッグでラインを接続できます。

各オブジェクトはマウスでドラッグできます。

図はグルーピングされていたり、コネクトされている場合は線も一緒に動きます。

デモです。赤いポイントがアニメーションしています。

パイチャートともちょっと違う図形です。

各要素にエフェクトを適用したものです。

グラデーション。

こんな複雑な図形も。

線や図形をカスタマイズしたもの。

クリックするとボールが移動します。

線をジャンプしています。

ドラッグ&ドロップで自分でラインを引けます。

オブジェクト同士が繋がっている例。

変わった接続の仕方です。

ネストしたオブジェクト。

ラインがパイプになっています。

循環している例。

線の描き方も多数用意されています。

手書き風。

太陽と地球。楕円も描けます。これはマウスでドラッグして移動できます。

テキストを囲むような矢印。

JointJSはオブジェクトが繋がるような描画が得意なようです。Visioのようなドローを実現したり、ビジュアルプログラミング環境のベースに使うこともできそうです。

JointJSはJavaScript製のオープンソース・ソフトウェア（Mozilla Public License）です。

Rappid Diagramming Framework clientIO/joint: JavaScript diagramming library