TreeViewMD
Markdownファイルでノードベースのメモ管理を実現するVSCode拡張機能です。リスト形式でノードを定義し、ノード間の関係性を視覚化・管理できます。
特徴
ノードの視覚化
- 複数回出現ノード: 同じノード名が複数箇所に出現すると水色で表示
- 無効なファイル名: ファイル名に使えない文字を含むノードは赤色で警告
- 非リンクノード:
+ マーカーのノードとその子孫はグレーアウト（ファイルチェックなし）
- 未使用タグ: ノードとして存在しないタグは灰色で表示
- ファイル不存在: ファイルが存在しないノードに装飾を表示（設定可能）
ノードを開く機能
- 複数のキーバインド でノードの開き方を選択可能
- 絞り込みビュー: ノードの全出現箇所とサブツリーを一覧表示（読み取り専用）
- ノードファイル: ノード専用のMarkdownファイルを自動生成・開く
リンク形式
- ツリーノード:
- で始まる行のノード名
- タグ:
#tag 形式（ノードとして存在する場合のみ開ける）
- Wikiリンク:
[[ノード名]] 形式でどこでもリンク可能
- 階層タグ:
#親/子/孫 形式でスラッシュ区切りの階層表現
ノード編集機能
- ノードタイプ切り替え (
Ctrl+T): - ⇔ + マーカーを切り替え
- ノード名変更 (
F2): ノード名とファイル名を一括変更
- 親階層パス挿入 (
Ctrl+Shift+I): ノードの親階層パスをタグとして挿入
使い方
1. 初期設定
ワークスペースを開いてから、VSCodeの設定（.vscode/settings.json またはユーザー設定）に以下を追加：
{
"treeviewmd.sourceFile": "notes/main.md",
"treeviewmd.nodeFilesDirectory": "notes/nodes"
}
または、ワークスペース直下を使う場合は設定を空に：
{
"treeviewmd.sourceFile": "main.md",
"treeviewmd.nodeFilesDirectory": "" // 空の場合はワークスペースルート
}
重要:
- パスはワークスペースルートからの相対パスで指定してください
- 設定が空の場合はワークスペースルートが使われます
- セキュリティのため、ワークスペース外へのアクセスはブロックされます
設定UIでも設定できます：
TreeViewMD: Source File - メインのMarkdownファイルパス（相対）TreeViewMD: Node Files Directory - ノードファイルを保存するディレクトリ（相対）
2. Markdownファイルの書き方
# プロジェクト管理
- 開発 #技術
- フロントエンド
- React
- Vue
- バックエンド
- Node.js #JavaScript
- Python
- React #UI
- Hooks
- コンポーネント
+ メモ #個人的
- 買い物リスト
- GET #開発/フロントエンド/HTTP
[[React]] を参照してください。
ルール:
- マーカー: 通常のノード（リンク可能）+ マーカー: 非リンクノード（グレーアウト、リンク不可、子も非リンク扱い）#tag: タグ（ノードとして存在すれば開ける）#親/子: スラッシュ区切りタグ（各パーツを個別に開ける）[[ノード名]]: Wikiリンク（どこでも使用可能）
3. ノードを開く
メインファイルでの操作
- ノード行やタグにカーソルを置く（例:
React の行、または #技術）
- キーバインドを選択：
- Ctrl+Enter: ノードファイルのみ（右ペイン）
- Ctrl+Shift+Enter: ノードファイルのみ（左ペイン）
- Ctrl+Alt+Enter: 絞り込みビューのみ（左ペイン）
- Ctrl+Shift+Alt+Enter: 絞り込みビュー（左）+ ノードファイル（右）
ノードファイルでの操作
- ノードファイル内でノード名やタグにカーソルを置く
- キーバインドを選択：
- Ctrl+Enter: 現在のタブを置き換え
- Ctrl+Shift+Enter: 新規タブで開く
スラッシュ区切りタグ
#開発/フロントエンド/React のようなタグでは、カーソル位置に応じて開くノードが変わります：
開発 の部分 → 開発 ノードを開くフロントエンド の部分 → フロントエンド ノードを開くReact の部分 → React ノードを開く
4. 絞り込みビューの例
# ====== Filtered ======
## 出現箇所
- 開発 > フロントエンド > React
- React
## 断片
■開発 > フロントエンド > React
- Hooks
- コンポーネント
■React
- Hooks
- コンポーネント
設定項目
treeviewmd.sourceFile
- 型:
string
- 説明: ノード管理対象のMarkdownファイルパス（ワークスペース相対）
- 例:
"notes/main.md" または "main.md"
- デフォルト:
"" （ワークスペースルート）
treeviewmd.nodeFilesDirectory
- 型:
string
- 説明: ノードファイルを保存するディレクトリパス（ワークスペース相対）
- 例:
"notes/nodes" または "nodes"
- デフォルト:
"" （ワークスペースルート）
色のカスタマイズ
{
"treeviewmd.colors.existingNode": "#4FC3F7",
"treeviewmd.colors.unusedTag": "#9E9E9E",
"treeviewmd.colors.nonLinkNode": "#9E9E9E",
"treeviewmd.colors.invalidFileName": "#FF5722",
"treeviewmd.colors.missingFile": ""
}
装飾のカスタマイズ
{
"treeviewmd.decorations.missingFile": "underline dotted"
}
- 空文字列（
""）で装飾を無効化できます
- 例:
"underline dotted", "underline dashed", "underline wavy"
コマンド
ノード操作
- TreeViewMD: Open Node (
Ctrl+Enter) - ノードファイルを開く
- TreeViewMD: Open in Left Pane / New Tab (
Ctrl+Shift+Enter) - 左ペイン/新規タブで開く
- TreeViewMD: Open Filtered View Only (
Ctrl+Alt+Enter) - 絞り込みビューのみ
- TreeViewMD: Open Both Views (
Ctrl+Shift+Alt+Enter) - 両方開く
ノード編集
- TreeViewMD: Toggle Node Type (
Ctrl+T) - - ⇔ + 切り替え
- TreeViewMD: Rename Node and File (
F2) - ノード名変更
- TreeViewMD: Insert Parent Hierarchy Paths (
Ctrl+Shift+I) - 親階層パス挿入
ファイル管理
- TreeViewMD: Activate Main File (
Ctrl+Shift+M) - メインファイルをアクティブ化
- TreeViewMD: Close All Temporary Files (
Ctrl+Shift+W) - 一時ファイルを全て閉じる
- TreeViewMD: Close All Except Main (
Ctrl+Shift+Alt+W) - メインファイル以外を閉じる
その他
- TreeViewMD: Jump to Next Occurrence (
Ctrl+Shift+N) - 次の出現箇所へジャンプ
- TreeViewMD: Detect Node at Cursor - ノード検出（デバッグ用）
- TreeViewMD: Show Performance Log - パフォーマンスログ表示
制限事項
注意点
- 非リンクノード（
+）とその子孫は開けません
- ファイル名チェックや警告も表示されません（意図的な動作）
- 無効なファイル名文字を含むノードは開けません
- タグはノードとして存在する場合のみ開けます
- Wikiリンクでは絞り込みビューは開けません（ノードファイルのみ）
ライセンス
MIT
