一つのノードから枝葉を伸ばしていく、いわゆるツリービューは様々な場面で使えます。有名なところではマインドマップがありますが、階層構造を表すのにぴったりな仕組みです。 そんなツリービューを自由に組み込めるようにしたのがTreedです。React製なのも見逃せないポイントです。

Treedの使い方

デモです。左側は編集ができ、その結果が右側のツリービューに反映されます。

左側を開くと右にノードが追加されます。

ノードの追加や変更も可能です。

こんな感じにドリルダウンしていけます。

実際に操作しているところです。ノードの開閉、追加などを行っています。

Treedはマウス操作のほか、キーボードショートカットを使った操作にも対応しています。フォルダとファイル同士の表示やネットワーク図、階層構造をもったデータの表示など様々な用途に利用できそうです。

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

Treed | Powerful Tree Editor jaredly/treed