マインドマップはツリー型の表示を行います。あるポイントが開始ポイントになって、そこから派生する形で子ノードがつながります。それを繰り返して全体のツリーが大きくなっていきます。 あんな感じのインターフェースを作ってみたいと思ったらお勧めしたいのがTreedです。リストとツリー表示を同時に行うライブラリです。

Treedの使い方

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

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

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

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

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

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

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

jaredly.github.io/treed/ jaredly/treed