Entry point
核心模組
工具層
外部相依
測試
━━ Hot path（最常走的路）
工程師專區 · Playground
你被丟進一個 80 個檔案的 repo、要修一個 bug、但不知從哪檔開始看。
README 只說「跑 npm start」、tree 印出來扁平 200 行也認不出哪個是核心。
這個 demo 把 codebase 畫成 boxes 跟 arrows、hot path 標橘色、entry point 列右邊、點 box 看它的角色 / 進出依賴 / 大小。叫 AI 直接讀你的 repo 給你這張圖、不是給你一堆 markdown 描述。
把你的 repo 結構替換到下面 prompt 的 [括號]、貼進 Claude / ChatGPT / Gemini：
我要你幫我把一個我不熟的 codebase 畫成 HTML 互動模組地圖。 Repo 資訊： - 語言 / 框架：[Node / Python / Go / Rust ...] - 主要目錄結構：[貼 tree 或 ls -R 結果] - 主要 entry point 我猜是：[main.ts / app.py / cmd/server/main.go ...] - 我要修的 bug / 加的 feature 大致跟 [模組 X / Y] 有關 請輸出一個單檔 HTML、必含： - 一張 SVG 模組圖、每個檔案 / 目錄畫成一個 box - box 之間用箭頭表示 import / 呼叫關係 - entry point 用粗外框、核心模組填色、外部 npm / pip 套件虛線、測試另一色 - 「hot path」（最常走的執行路徑）用品牌橘色標出來 - 點 box 跳出右邊 panel 顯示：職責、行數、被誰 import、import 了誰 - 上方 filter button：全部 / 只看 entry / 只看核心 / 只看 hot path - 右側列出所有 entry point 一鍵跳轉 - inline CSS / JS、不用任何 framework / CDN - 一個 .html 檔、繁體中文 UI label - mobile 320px 起跑得起來 直接給我可以右鍵存檔的完整 HTML、box 的位置可以用簡單的 grid 排不用做 force-directed。