-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcodegraph-source.html
More file actions
138 lines (121 loc) · 7.78 KB
/
Copy pathcodegraph-source.html
File metadata and controls
138 lines (121 loc) · 7.78 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml">
<title>案例 · codegraph 源碼 · codegraph 繁中教學站</title>
<meta name="description" content="實作案例：用 graphify 掃描 codegraph 源碼的互動知識圖譜 + codegraph 自跑 dogfooding 真實輸出。">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Noto+Sans+TC:wght@400;500;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../../assets/site.css">
</head>
<body>
<div class="container">
<nav class="topnav">
<a href="../../index.html">首頁</a>
<a href="../../map.html">概念地圖</a>
<a href="../../learning-path.html">學習路線</a>
<a href="../../install.html">安裝指南</a>
<a href="../index.html">文件教學</a>
<a href="../code/index.html">程式碼對照</a>
<a href="../worked.html">實作案例</a>
<a href="../../about.html">關於</a>
</nav>
<div class="back-link"><a href="../worked.html">← 實作案例</a></div>
<header>
<h1>案例：codegraph 源碼</h1>
<div class="subtitle">用知識圖譜工具分析知識圖譜工具——graphify 互動圖 + codegraph 自跑</div>
<div class="badge-line">上游對齊 <code>c6aaa20</code> · graphify 0.9.36 · @colbymchenry/codegraph v1.5.0 · 分析日期 2026-08-10</div>
</header>
<div class="guide">
<h2>案例亮點</h2>
<ul>
<li><strong>graphify 掃描</strong>：對 codegraph 的 <code>src/</code> + <code>codegraph-kernel/src/</code> + <code>__tests__/</code>（501 個程式檔）做 <code>--code-only</code> 抽取（純本機 AST、零 LLM、零 API key）。</li>
<li><strong>codegraph dogfooding</strong>：實際安裝 <code>@colbymchenry/codegraph@1.5.0</code>，在 codegraph 自己的源碼上跑 <code>init</code> / <code>status</code> / <code>query</code> / <code>explore</code> / <code>impact</code>，真實輸出進教學頁。</li>
<li><strong>雙工具對照</strong>：同一個 repo，兩個知識圖譜工具各自的數字與視角——graphify 的互動社群圖 vs codegraph 的 SQLite 索引查詢。</li>
</ul>
<h2>本站數字</h2>
<table>
<tr><th>工具</th><th>語料</th><th>節點</th><th>邊</th><th>社群 / 種類</th></tr>
<tr><td><strong>graphify 0.9.36</strong>（<code>--code-only</code>）</td><td>501 個程式檔（src/ + kernel-src/ + tests/）</td><td>7,987</td><td>18,148</td><td>683 社群（介面顯示 208 個，475 個細碎省略）</td></tr>
<tr><td><strong>codegraph v1.5.0</strong>（<code>codegraph init</code>）</td><td>570 檔（全 repo）</td><td>12,733</td><td>44,903</td><td>function 2,706 · import 2,304 · method 1,850 · class 206 · route 16 …</td></tr>
</table>
<p class="hint">兩者不可直接比——graphify 用 Leiden 分群、codegraph 用自家 resolver；但同語料下的結構對照很有參考價值（graphify 有 683 個社群 hub，codegraph 索引時間僅 1.7s）。</p>
<h2>互動知識圖譜（graphify 產出）</h2>
<div class="graph-embed">
<div class="graph-embed-bar">
<span class="g-title">codegraph 源碼 · 互動知識圖譜（中文界面）</span>
<span class="g-links"><a href="../../worked/codegraph-source/graph-zh.html" target="_blank">新開視窗</a><a href="../../worked/codegraph-source/graph.html" target="_blank">English</a></span>
</div>
<iframe src="../../worked/codegraph-source/graph-zh.html" title="codegraph 源碼知識圖譜（中文界面）"></iframe>
</div>
<p class="hint">超過 graphify 5,000 節點視覺化上限，自動聚合為社群檢視（683 個社群）；想看單節點細節可用 <code>graph.json</code>。報告見 <a href="../../worked/codegraph-source/GRAPH_REPORT.md">GRAPH_REPORT.md</a>。</p>
<h2>codegraph 自跑（dogfooding）</h2>
<h3>init — 570 檔全量索引 1.7s</h3>
<div class="term">
<div class="term-head"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><span class="term-title">codegraph init（v1.5.0）</span></div>
<pre><code>$ codegraph init
┌ Initializing CodeGraph
◆ Initialized in <span class="dim"><repo-root></span>
Scanning files...
Parsing code...
Resolving refs...
Linking dynamic dispatch...
◆ Indexed 570 files
● <span class="ok">12,733 nodes, 44,903 edges in 1.7s</span>
└ Done</code></pre>
</div>
<h3>explore — 結構性問題一次回答</h3>
<div class="term">
<div class="term-head"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><span class="term-title">codegraph explore 實測（節錄）</span></div>
<pre><code>$ codegraph explore "how does codegraph_explore build its answer"
**Exploration: how does codegraph_explore build its answer**
Found 35 symbols across 2 files.
**Blast radius — what depends on these ...**
- `CodeGraph` (src/index.ts:139) — 136 callers in ... +96
**Relationships**
instantiates:
- init → CodeGraph · initSync → CodeGraph
- open → CodeGraph · recreate → CodeGraph · openSync → CodeGraph
calls:
- constructor → wireLayers · sync → sync · watch → sync
- open → sync · init → indexAll · ... and 3 more</code></pre>
</div>
<p>更多真實輸出（status / query / callers / impact / files / sync）見 <a href="../../worked/codegraph-source/dogfood.md">worked/codegraph-source/dogfood.md</a>，也都散落在各教學頁。</p>
<h2>重現步驟</h2>
<pre><code># 0. 準備：graphify 0.9.36（PyPI 套件名 graphifyy，雙 y）、Node ≥20
uv tool install graphifyy
npm i -g @colbymchenry/codegraph@1.5.0
# 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. graphify 掃描（code-only，零 key）
graphify extract ./corpus --code-only
GRAPHIFY_VIZ_NODE_LIMIT=20000 graphify cluster-only ./corpus
# → corpus/graphify-out/：graph.html（互動）、graph.json、GRAPH_REPORT.md
# 3. 中文化互動圖：複製 graph.html → 替換 UI 字串 → graph-zh.html
# 4. codegraph 自跑（dogfooding）
cd codegraph
codegraph init # 570 檔 → 12,733 節點 / 44,903 邊 in 1.7s
codegraph status
codegraph explore "how does codegraph_explore build its answer"</code></pre>
<h2>已知限制</h2>
<ul>
<li><strong>graphify 節點數</strong>：7,987 超過 5,000 視覺化上限，介面為社群聚合檢視；完整圖資料在 <code>graph.json</code>。</li>
<li><strong>社群命名</strong>：本機無 LLM key，社群名稱保留程式識別符（如 <code>preceding_docstring</code>、<code>CodeGraph</code>）；這正好符合「節點 label 保留英文」的教學原則。</li>
<li><strong>codegraph 數字</strong>：570 檔 = 全 repo（含 site/、scripts/、telemetry-*），與 graphify 的 501 檔語料不同，對照時注意語料差異。</li>
<li><strong>活躍開發中</strong>：上游 changelog 有大量 Unreleased 項目，內容以釘選 commit 為準。</li>
</ul>
<div class="callout"><strong>看完這頁你應該能說出</strong>：這個案例兩條產出線各自的工具與數字、社群聚合檢視的原因、以及如何照步驟重現並做出自己的「分析 X 用 X」案例。</div>
</div>
<footer>
<div>這是 <a href="https://github.com/colbymchenry/codegraph">colbymchenry/codegraph</a> 的非官方繁體中文教學站。</div>
<div>內容 © <a href="https://github.com/colbymchenry/codegraph">Colby Mchenry</a>（MIT）· 本站與 Colby Mchenry 無關 · 對齊上游 main @ c6aaa20</div>
</footer>
</div>
</body>
</html>