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

マインドマップはツリー型の表示を行います。あるポイントが開始ポイントになって、そこから派生する形で子ノードがつながります。それを繰り返して全体のツリーが大きくなっていきます。

あんな感じのインターフェースを作ってみたいと思ったらお勧めしたいのがTreedです。リストとツリー表示を同時に行うライブラリです。

Treedの使い方

Treedの表示。左側にリスト、右側にツリービューでの表示となっています。
Treedの表示。左側にリスト、右側にツリービューでの表示となっています。

リスト/ツリー側での選択は同期しています。
リスト/ツリー側での選択は同期しています。

日本語のノード追加もできます。キーバインドはVim風となっています。
日本語のノード追加もできます。キーバインドはVim風となっています。

ノードの移動もサポートされています。
ノードの移動もサポートされています。

ノードの移動は矢印キーまたはhjklキー、インデントはタブキーと鳴っています。さらにiキーで編集モードになったり、EscキーでノーマルモードになったりとVimを踏襲したキーバインドになっています。

自作のマインドマップのベースにしたり、アウトラインエディタに組み込んだりすると面白そうです。

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

jaredly.github.io/treed/

jaredly/treed

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2