🔮 Code Grimoire

プロジェクトの依存関係を「魔方陣」のような図で見える化する VS Code 拡張機能。

Code into Magic, Logic into Art.

これは何？

コードを書いていると、「このファイルはどれを使っていて、どれから使われているのか」がだんだん見えなくなってきます。特に AI と一緒に開発していると、ファイルが増えて全体像を見失いがちです。

Code Grimoire は、TypeScript / JavaScript プロジェクトの 依存関係（ファイル同士の import のつながり）を 1 枚の図にして、構造を直感的に掴めるようにする VS Code 拡張です。グラフが「魔方陣」のように広がって見えるのが特色です。

機能	説明
依存グラフの可視化	ファイル間の import 関係をグラフ表示
5 つの解析モード	標準 / 構造（循環参照）/ セキュリティ / 最適化 / データフロー → 詳しく
3 つのレイアウト	力学配置 / 同心円 / 入れ子円 → 詳しく
ファイル検索	ファイル名 + 中身の全文検索（`Ctrl+F`）
詳細パネル	クリックしたファイルの依存・被依存・Git 履歴などを表示

各モード・レイアウトの「どんなときに使うか」は、専用ガイドにまとめています：

git clone https://github.com/otonasi-muonn/Code-Grimoire.git
cd Code-Grimoire
npm install
npm run compile

初回起動時にかんたんな操作ツアーが表示されます。? キーでいつでもヘルプを開けます。

ノードをクリックすると、そのファイルが中心に来て依存先が周りに再配置され、詳細パネルが開きます。

解析: TypeScript Compiler API（AST）で、正規表現に頼らず依存を正確に解決します。循環参照は Tarjan's SCC アルゴリズムで検出します。
描画: PixiJS（WebGL）でレンダリング。ズームアウト時はノードを簡略表示する LOD（詳細度）で描画負荷を抑えます。
計算の分離: d3-force の物理シミュレーションを Web Worker にオフロードし、UI スレッドをブロックしません。
3 コンテキスト構成: Extension Host（解析）/ Webview（描画）/ Web Worker（レイアウト計算）。詳細は CLAUDE.md を参照してください。

npm run compile    # 本番ビルド
npm run watch      # 変更監視ビルド
npm run lint       # ESLint チェック
npm run test       # テスト

esbuild で Extension Host（CJS）/ Webview（IIFE）/ Web Worker（IIFE）の 3 つを別々にバンドルしています。