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

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

Web上で図を表示したいと思うことは多々あります。そんな時に画像を使うのは最も知られた方法ですが、再利用性や修正コストが大きくなります。図にもよりますが、JointJSがカバーできる範囲は大きいのではないでしょうか。


こんな複雑な図の描画も行えます。


マウスオーバーで線の削除ができます。


線のポイントを変更して曲がり方を変えることもできます。


組織図。こちらも移動ができます。


ER図。リレーションの関係も表せています。


DEVSの図とのこと。


チェス。オブジェクトの動きはチェス盤上に固定されます。


アニメーション付きの図です。


リンクの表現も多様です。


UMLのクラス図。


ステートチャート図。

JointJSでは多様な図を描くことができます。図はドラッグして動かすことができたり、ラインを消すこともできます。開発系の図を描く際に役立ちそうです。


MOONGIFTはこう見る

画像で作成する場合、元データを編集できるソフトウェアが必要であったり(少なくともレイヤーで分けていないと編集が大変でしょう)、担当者でないと編集が行えなかったりもします。最初の作成時はもちろん、編集時のコストも考えるべきです。

また、こういった図を共有するWebサービスを考えてみるのも良いかも知れません。JavaScriptで作るようにすれば他のユーザとの共有も容易になります。色々な使い方が考えられるのではないでしょうか。

JointJS - JavaScript diagramming library.

DavidDurman/joint

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2