Quick Mindmap

Quick Mindmap is a visually editable mind map editor for VS Code. It is designed so that you can edit quickly using only the keyboard, without relying on mouse operations.

How To Use

1. Run Quick Mindmap: Open with Ctrl+Shift+P
2. Edit nodes in the viewer
3. Save with Ctrl+S or Save YAML in the YAML panel

If a Quick Mindmap YAML file is open in VS Code, you can open that file directly as MindmapViewer.

The built-in sample is not autosaved. When you first press Save YAML or Ctrl+S, Quick Mindmap asks where to save the file. After that, changes are saved to that YAML file.

Shortcuts

• Ctrl+?: Show / hide the shortcut list
• Enter: Edit the selected node
• Tab: Add a child node
• Shift+Tab: Move to the parent node
• Arrow keys: Move between nodes
• Home: Move focus to the root node
• End: Move focus to the last descendant under the current node
• M: Enter or cancel move mode for the selected subtree
• Arrow keys in move mode: Move by parent, nearest child, or previous/next node on the same depth. At the edge, sibling direction can attach under an upper-level sibling parent
• Enter in move mode: Insert the subtree after the selected target
• Esc in move mode: Cancel the move
• Ctrl+Up / Ctrl+Down (Right layout): Move focus to the first / last node under the current parent, and if already at the edge, move into another parent branch at the same depth
• Ctrl+Left (Right layout): Move focus to the nearest branching ancestor
• Ctrl+Right (Right layout): Move focus to the last descendant leaf under the current node, or the nearest sibling branch if needed
• Ctrl+Left / Ctrl+Right (Down layout): Move focus to the first / last node under the current parent, and if already at the edge, move into another parent branch at the same depth
• Ctrl+Up (Down layout): Move focus to the nearest branching ancestor
• Ctrl+Down (Down layout): Move focus to the last descendant leaf under the current node, or the nearest sibling branch if needed
• Delete: Delete the selected subtree
• Ctrl+Z: Undo
• Ctrl+Shift+Z / Ctrl+Y: Redo
• Ctrl+S: Save YAML

Testing

The default E2E runner uses Playwright's own headless browser, so no visible Chrome tab is opened.

• Default headless run: npm run e2e
• Show the browser only when needed: npm run e2e:headed
• Filter to specific tests: set TEST_FILTER=move mode && npm run e2e

If Codex needs to run E2E through your local Chrome, start Chrome first with:

& 'C:\Program Files\Google\Chrome\Application\chrome.exe' --remote-debugging-port=9222 --user-data-dir="$env:TEMP\quick-mindmap-cdp"

If you specifically want to connect to an existing Chrome instance over CDP, use:

1. Start Chrome with remote debugging: chrome.exe --remote-debugging-port=9222 --user-data-dir=%TEMP%\\quick-mindmap-cdp
2. Run E2E with: set CHROME_CDP_URL=http://127.0.0.1:9222 && npm run e2e:cdp

If you want CDP but still do not want any visible Chrome window, use: npm run e2e:cdp:headless

Quick Mindmap

Quick Mindmap は、VS Code 上で視覚的に編集できるマインドマップエディターです。 マウスを使わなくても、キーボードだけで素早く編集できるように作っています。

使い方

1. Ctrl+Shift+P で Quick Mindmap: Open を実行します
2. Viewer 上でノードを編集します
3. Ctrl+S または YAML パネルの Save YAML で保存します

Quick Mindmap 形式の YAML を VS Code で開いているときは、そのファイルをそのまま MindmapViewer として開けます。

組み込みサンプルは autosave されません。 最初に Save YAML か Ctrl+S を押して保存先を決めると、その後はその YAML に保存されます。

ショートカット

• Ctrl+?: ショートカット一覧を表示 / 非表示
• Enter: 選択中ノードを編集
• Tab: 子ノードを追加
• Shift+Tab: 親ノードへ移動
• Arrow keys: ノード間を移動
• Home: root へ移動
• End: 同一ノードの子方向の末尾へ移動
• M: 選択中の部分木の移動モード開始 / キャンセル
• 移動モード中 Arrow keys: 親、近い子、同じ深さの前後ノードで部分木の差し込み先を選ぶ。端では今いる階層の1つ上にある sibling 親の子にも入れる
• 移動モード中 Enter: 選択中ターゲットの直後に移動を確定
• 移動モード中 Esc: 移動をキャンセル
• Ctrl+Up / Ctrl+Down（Right レイアウト）: 今の親配下の先頭 / 末尾ノードへ移動。端にいた場合は、離れていても同階層の子がある兄弟ブランチへ移動
• Ctrl+Left（Right レイアウト）: 最も近い分岐祖先へ移動
• Ctrl+Right（Right レイアウト）: 今のノード配下の最後の小要素へ移動。無ければ近い兄弟ブランチの小要素へ移動
• Ctrl+Left / Ctrl+Right（Down レイアウト）: 今の親配下の先頭 / 末尾ノードへ移動。端にいた場合は、離れていても同階層の子がある兄弟ブランチへ移動
• Ctrl+Up（Down レイアウト）: 最も近い分岐祖先へ移動
• Ctrl+Down（Down レイアウト）: 今のノード配下の最後の小要素へ移動。無ければ近い兄弟ブランチの小要素へ移動
• Delete: 選択中の部分木を削除
• Ctrl+Z: Undo
• Ctrl+Shift+Z / Ctrl+Y: Redo
• Ctrl+S: YAML を保存

テスト

デフォルトの E2E は Playwright の headless ブラウザで動きます。画面に Chrome のタブは出ません。

• 通常実行: npm run e2e
• 画面を見ながら実行したい時だけ: npm run e2e:headed
• 特定テストだけ実行したい時: set TEST_FILTER=move mode && npm run e2e

Codex から E2E を回したい時は、先にローカルで Chrome を次のコマンドで起動してください。

& 'C:\Program Files\Google\Chrome\Application\chrome.exe' --remote-debugging-port=9222 --user-data-dir="$env:TEMP\quick-mindmap-cdp"

既存 Chrome に CDP 接続して実行したい場合だけ、次を使います。

1. リモートデバッグ付きで Chrome を起動: chrome.exe --remote-debugging-port=9222 --user-data-dir=%TEMP%\\quick-mindmap-cdp
2. 次で E2E 実行: set CHROME_CDP_URL=http://127.0.0.1:9222 && npm run e2e:cdp

CDP 経由でも headless にしたい場合は: npm run e2e:cdp:headless