codegraph 的非官方繁體中文教學站。把整個 repo（程式碼、文件、MCP 工具、測試、實作案例）做成中英對照的解說內容，並收錄兩條「meta」示範：用 graphify 掃描 codegraph 自己做出的可操作互動知識圖譜，以及實際安裝 codegraph、在它自己源碼上跑的 dogfooding 真實輸出。
免責聲明：本站為第三方社群教學站，與 Colby Mchenry 無關，不代表 codegraph 官方立場。codegraph 與 Colby Mchenry 為其各自權利人所有，本站僅在描述性／教學語境下使用該名稱。
上線網站：https://shumingyang-opencode.github.io/codegraph-zh-tw/
- 中英對照 — 中文口語解說為主文，英文原文與程式碼保留上游原貌。文件頁用「可展開的英文原文」，程式碼頁用「附中文註解的原始碼」。
- TypeScript 逐函數講解 — src/ 的 9 大模組逐函數
<details>收縮塊（signature + 中文用途 + 關鍵邏輯），含 Rust kernel 對照。 - 策展式教學而非鏡像 — 809 檔的 repo 不逐檔翻譯，聚焦運作原理、架構、MCP 工具、CLI、自動同步、框架路由、效能基準、設定。
- 雙 meta 案例 — 用 graphify 掃描 codegraph 源碼的互動知識圖譜（EN/ZH 雙版本）＋ 實際安裝 codegraph v1.5.0 在它自己源碼上的自跑輸出。
- 版本釘選 — 上游對齊
main @ c6aaa20（發行版 v1.5.0）；所有實測數字（570 檔 → 12,733 節點 / 44,903 邊 in 1.7s 等）為本站實際運行取得，可追溯。
純靜態站（HTML + CSS + JS），GitHub Pages 部署於 main 根目錄。
codegraph-zh-tw/
├── index.html 首頁：CodeGraph 是什麼、三大亮點、benchmark 統計、入口卡
├── map.html 概念地圖：知識圖譜/node-edge/SQLite/MCP/explore/impact/Rust kernel/watcher
├── learning-path.html 學習路線 L0→L4：可點卡片
├── install.html 安裝指南：install.sh/ps1/npm、9 agent 平台、init、uninstall、疑難排解
├── about.html 授權、方法、免責聲明
├── docs/
│ ├── index.html 文件教學入口（hub）
│ ├── how-it-works.html 運作原理（抽取→儲存→解析→自動同步四階段）
│ ├── architecture.html 架構總覽（模組職責表）
│ ├── mcp-tools.html codegraph_explore 單一工具 + 7 個隱藏工具 + CODEGRAPH_MCP_TOOLS
│ ├── cli.html CLI 指令參考（含 dogfooding 真實輸出）
│ ├── auto-sync.html 三層新鮮機制（watcher/staleness banner/catch-up）
│ ├── framework-routes.html 17 框架路由
│ ├── ios-rn-bridging.html iOS/RN/Expo 跨語言橋接
│ ├── benchmarks.html 7 repo WITH/WITHOUT + 殘留上下文取捨
│ ├── config.html codegraph.json（exclude/include/extensions）
│ ├── library.html Library 用法（CodeGraph class API）
│ ├── languages.html 30+ 語言支援 + cross-file coverage
│ ├── security.html 100% 本機 / telemetry / verified releases / 疑難排解
│ ├── worked.html 實作案例入口
│ ├── case/codegraph-source.html 案例：graphify 掃描 codegraph 自己 + codegraph 自跑
│ └── code/ 程式碼對照（10 頁，逐函數 <details>）
│ ├── index.html 入口
│ ├── main.html src/index.ts（CodeGraph class）
│ ├── db.html node:sqlite / WAL / FTS5 / schema.sql
│ ├── extraction.html ExtractionOrchestrator + languages/ + Rust kernel
│ ├── resolution.html ReferenceResolver + frameworks/ + rebind
│ ├── graph.html GraphTraverser / GraphQueryManager
│ ├── context.html ContextBuilder（verbatim 原始碼 + ranking）
│ ├── mcp.html MCPServer / tools / server-instructions
│ ├── installer.html 9-agent multi-target installer
│ └── cli.html src/bin/codegraph.ts（commander）
├── worked/codegraph-source/ 案例資產：graph.html + graph-zh.html + GRAPH_REPORT.md + dogfood.md
└── assets/ site.css / favicon.svg
每個案例都是「中文解說 + 互動圖（EN/ZH 界面）+ 本站跑的數字 + 重現步驟」。
| 案例 | 語料 | 來源方式 | 本站數字 | 互動圖 |
|---|---|---|---|---|
| codegraph 自己 | src/ + codegraph-kernel/src/ + __tests__/（501 個程式檔） |
graphify 本站實跑（--code-only，零 LLM）＋ codegraph 自跑（@colbymchenry/codegraph@1.5.0） |
graphify：7,987 節點 / 18,148 邊 / 683 社群；codegraph init：570 檔 → 12,733 節點 / 44,903 邊（1.7s） | ✅ 雙版本 |
所有案例的圖與數字都是真實工具產出，不是示意圖。這是「用知識圖譜工具分析知識圖譜工具」的 meta 示範。
# 0. 安裝（PyPI 套件名是 graphifyy，雙 y）
uv tool install graphifyy
# 1. 準備語料（codegraph 源碼，對齊 c6aaa20）
git clone https://github.com/colbymchenry/codegraph.git
git -C codegraph checkout c6aaa20
mkdir corpus && cp -R codegraph/src corpus/ && cp -R codegraph/codegraph-kernel/src corpus/kernel-src/
cp -R codegraph/__tests__ corpus/tests/
# 2. 跑 pipeline（code-only，純本機 AST、零 API key）
graphify extract ./corpus --code-only
GRAPHIFY_VIZ_NODE_LIMIT=20000 graphify cluster-only ./corpus
# 3. 產出 corpus/graphify-out/：graph.html（互動）、graph.json、GRAPH_REPORT.md
# 4. 中文化互動圖：複製 graph.html → 替換 UI 字串 → graph-zh.htmlnpm i -g @colbymchenry/codegraph@1.5.0
cd codegraph
codegraph init # 570 檔 → 12,733 節點 / 44,903 邊 in 1.7s
codegraph status # 索引統計（Backend: node:sqlite，WAL）
codegraph explore "..." # 結構性問題一次回答- 所有 dogfooding 輸出收錄在
worked/codegraph-source/dogfood.md，並散落各教學頁（docs/cli.html、docs/mcp-tools.html、docs/how-it-works.html等）。
- 本站內容以 MIT License 釋出（與上游相同），並照抄上游的授權檔：
- 商標：codegraph 與 Colby Mchenry 為其各自權利人所有。MIT 授權不含商標授權；本站僅在「描述性／教學」語境使用該名稱，並於全站 footer 標示「與 Colby Mchenry 無關」。
- graphify 產出：
worked/codegraph-source/的互動圖與報告由 graphify（Apache-2.0）產生，案例頁已標註出處。 - 不做二進位散布：本站不含官方二進位，僅引述實際運行輸出。
- 本站對齊上游分支
main，釘選 commitc6aaa20（發行版 v1.5.0）。 .github/workflows/check-upstream.yml每月自動（每月 1 日 00:00 UTC + 手動觸發）檢查上游最新 SHA，並更新首頁的版本徽章。
靜態站，純 HTML + CSS + JS，無框架、無建置步驟。
python3 -m http.server 8000 # 本機預覽assets/site.css— 全站樣式（深色 × 霓虹設計語言，承襲 graphify-zh-tw / codebase-memory-mcp-zh-tw）- 每個 HTML 頁都是自含檔案（head 引入 site.css + Google Fonts）
worked/codegraph-source/— 案例的graph.html（英文）、graph-zh.html（中文界面）、GRAPH_REPORT.md、dogfood.md
- 準備語料：
mkdir corpus && git clone <repo> corpus/<name>（或直接指一個資料夾）。 - graphify 抽取：
graphify extract ./corpus --code-only（純程式碼零 key）；有 LLM key 則可跑完整版。 - 分群 + 產出：
GRAPHIFY_VIZ_NODE_LIMIT=20000 graphify cluster-only ./corpus→ 得到graph.html、GRAPH_REPORT.md、graph.json。 - 中文化：複製
graph.html→ 替換 UI 字串 →graph-zh.html（見 我們怎麼跑的）。 - 收錄：把三樣東西放進
worked/<slug>/。 - 建案例頁：依
docs/case/<slug>.html的模板（中文解說 + iframe 嵌入互動圖 + 本站數字表 + 重現步驟）。 - 更新
docs/worked.html的案例卡。
- graphify 節點數：7,987 超過 5,000 視覺化上限，介面為社群聚合檢視（683 社群）；完整圖資料在
graph.json。 - 社群命名：本機無 LLM key，社群名稱保留程式識別符；節點 label 保留英文（與互動圖中文化原則一致）。
- 語料差異：graphify 掃的是 501 個程式檔（src + kernel + tests），codegraph init 是全 repo 570 檔——兩者數字不可直接比。
- codegraph 活躍開發中：上游 changelog 有大量 Unreleased 項目，本站內容以釘選 commit 為準，逐月更新徽章。
相關連結
- 上游 repo：colbymchenry/codegraph（MIT）
- 官方網站：colbymchenry.github.io/codegraph
- npm：
@colbymchenry/codegraph - 本站 repo：shumingyang-opencode/codegraph-zh-tw
- 本站上線：shumingyang-opencode.github.io/codegraph-zh-tw
- 學習路徑建議服務：learning-path-advisor — 依角色推薦教學網站學習路徑