情報は単独で存在するのではなく、それぞれが紐付いています。ある一つの処理の出力は別な処理の入力になります。最終的な成果物にたどり着くまで、複数の処理がつながっていくのです。 今回紹介するGraphEditorはそうした情報の紐付きを表現するためのエディタになります。

GraphEditorの使い方

上がプレビュー、下がエディタになります。

ノードを選ぶと、該当ノードとその線がハイライトされます。

追加もできます。

ノードを追加した例。

GraphEditorでは表示方法をチェイン(鎖)型とスター型から選べます。この手の表示にありがちな、揺れ動きながら表示場所を確定します。ノードの形状などは変更できないようです。データフォーマットはシンプルなので、別なシステムと連携させるのも難しくなさそうです。

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

デモ lodqa/grapheditor