数据截至 (上游 commit 149589ae7e6b)
记忆图可视化:力导向布局 + 版本链 + 增量渲染
30 秒导读:
@supermemory/memory-graph是 Supermemory 里少见的、自带非平凡算法的一章——仓库其余部分多是 API 编排,这里却要在 canvas 上把上万个「文档 / 记忆 / 版本」节点排布成一张会呼吸的力导向图。它解决三件难事:用物理引力自动摆节点、把同一事实的历次版本串成一条时间线、以及在几万节点下仍不掉帧。
1. 这是什么(零基础也能懂)
-
一句话定义: 一个纯 canvas 的力导向图组件,把 Supermemory 的记忆数据画成一张可缩放、可拖拽、可点选的「知识星系」。
-
它画的是什么数据: 上游返回的是「文档」和挂在文档下的「记忆」,以及记忆之间的关系(见 01-data-model.md 里的
GraphApiDocument/GraphApiMemory)。本章把这些数据字段视为已知,只讲怎么画、怎么排、怎么导航。 -
给谁用:
- Supermemory 的 web 控制台(
apps/web)直接import { MemoryGraph } from "@supermemory/memory-graph"。 - MCP 服务器把它包成一个 App UI 工具,让任意 AI 助手弹出这张图(见 §7,回指 02-mcp-server.md)。
- Supermemory 的 web 控制台(
-
用起来什么样: 一个 React 组件,喂一份
documents就能跑——
// 示意,非源码:最小用法
import { MemoryGraph } from "@supermemory/memory-graph"
<MemoryGraph
documents={documents} // GraphApiDocument[],见 01 章
variant="console" // 控制台样式(另有 consumer)
onOpenDocument={(id) => openModal(id)}
/>
- 一句话直觉/类比: 把它想成太阳系:每个文档是一颗恒星,它抽出的记忆是绕它转的行星;引力(力导向)让恒星彼此推开、行星各就各位;而「记忆被更新」这件事,画成一条从旧行星指向新行星的箭头——一整条箭头链就是这条事实的「进化史」。
本节到此不碰代码。下面开始拆内部。
2. 顶层全景(它大概怎么转)
2.1 一条数据从「文档数组」到「屏幕像素」
图默认从左读到右,命中即进入下一环:
documents: GraphApiDocument[]
│
▼
① 装配 useGraphData ──► nodes[] + edges[]
· 螺旋铺初始坐标、记忆绕文档做轨道
· BFS 连通分量 → 聚类上色
· 增量:复用上一帧已在的节点坐标
│
▼
② 布局 ForceSimulation ──► 每帧微调 node.x / node.y
· d3-force:只喂「结构边」产生引力
· 节点 >6000 → 静态布局(算一次就停)
│
▼
③ 渲染 GraphCanvas(单条 rAF 循环)
· viewport 世界→屏幕变换
· renderFrame:按颜色批处理 + LOD 采样
· 无变化就跳帧
│
▼
④ 交互 InputHandler + SpatialIndex
· 网格空间命中 → hover / click / drag
· 拖拽给节点钉住 fx/fy,反哺 ①②
2.2 部件一句话职责
| 部件 | 干什么 | 文件 |
|---|---|---|
useGraphData | 把 documents 装配成 nodes[]/edges[],含初始布局与聚类 | hooks/use-graph-data.ts |
ForceSimulation | d3-force 力导向布局引擎 | canvas/simulation.ts |
VersionChainIndex | 按 parentMemoryId 把版本串成链 | canvas/version-chain.ts |
ViewportState | 平移 / 缩放 / 惯性 / 世界↔屏幕坐标 | canvas/viewport.ts |
SpatialIndex | 网格空间索引,做鼠标命中 | canvas/hit-test.ts |
InputHandler | 鼠标 / 触摸 / 滚轮事件 → 回调 | canvas/input-handler.ts |
renderFrame | 逐帧把节点 / 边画到 canvas | canvas/renderer.ts |
drawDocIcon | canvas 原生矢量文档图标 | canvas/document-icons.ts |
GraphCanvas | React 壳:持有引擎实例 + rAF 循环 | components/graph-canvas.tsx |
MemoryGraph | 顶层 React 壳:编排数据 / 布局 / 交互 / 弹窗 | components/memory-graph.tsx |
关键分工原则(整章的暗线): React 只管会影响 DOM 的状态(hover、选中、缩放数字);节点坐标这类每帧都变的东西全走 useRef + rAF,绝不进 React state,否则每帧一次 setState 会把浏览器拖垮(graph-canvas.tsx:58-70 把所有可变渲染态塞进一个 ref)。
3. 核心原理之一:力导向布局(ForceSimulation)
3.1 它要解决的小问题
给你一堆节点和「谁连谁」的边,没有人告诉你每个节点该放哪。力导向布局的思路:把它当物理系统——节点互相排斥(像同极磁铁),边像弹簧把两端拉近,再加一点向心力别让它们飘走。迭代若干轮,系统自然「松弛」到一个好看又不重叠的布局。这里直接用 d3 的 d3-force。
3.2 精华一:只有「结构边」参与引力,extends 边纯视觉
这是全章最关键的一个设计决策。图里有三类边(边的语义见 01-data-model.md):
| 边类型 | 含义 | 是否产生引力 |
|---|---|---|
derives | 文档 → 它抽出的记忆(结构) | 是 |
updates | 旧记忆 → 新版本记忆(结构) | 是 |
extends | 同一 spaceId 下文档互相关联 | 否,纯视觉 |
为什么要把 extends 排除?因为 extends 往往把一大票文档两两相连,若让它也产生引力,会把整片文档吸成一坨,图就糊了。所以布局初始化时直接过滤掉:
// simulation.ts:17 —— 只用结构边参与力布局
const structuralEdges = edges.filter((e) => e.edgeType !== "extends")
ForceSimulation.init(canvas/simulation.ts:10-81)在 structuralEdges 上装配四种力,参数集中在 FORCE_CONFIG(constants.ts:10-31):
| 力 | 作用 | 关键参数 |
|---|---|---|
forceLink | 边=弹簧,按边类型给不同距离/强度 | updates 强度 0.6、derives 0.35、其它 0.05 |
forceManyBody | 节点互相排斥 | chargeStrength: -2400 |
forceCollide | 防重叠的硬碰撞半径 | 文档 80 / 记忆 48 |
forceX / forceY | 轻微向心,别飘出画面 | centeringStrength: 0.06 |
derives 边的弹簧长度还会随文档下记忆数量变长(记忆多的文档需要更大轨道),用 sqrt(memoryCount) 缩放并封顶(getDocMemoryDistance,simulation.ts:115-130)。
3.3 精华二:DENSE_GRAPH_STATIC_THRESHOLD —— 上万节点就「算一次就停」
力导向每帧都要 O(n log n) 迭代,节点一多就必然掉帧。这里有个直白的性能开关:节点数超过 6000 就放弃「持续物理 动画」,改成静态布局——同步预跑几帧、算出坐标、然后彻底停住。
// simulation.ts:5
export const DENSE_GRAPH_STATIC_THRESHOLD = 6000
init 里的分支(simulation.ts:64-76):先 stop() 再手动 tick 若干次(密集图只跑 densePreSettleTicks = 12,普通图跑 preSettleTicks = 150),然后——
预跑 preSettleTicks 帧(同步 tick)
│
节点数 > 6000 ?
┌────────────┴────────────┐
是 否
this.stop() alphaTarget(0).restart()
(坐标定死,不再动) (交给 rAF 继续松弛,自然冷却)
再往上一层,React 壳里节点超阈值时根本不创建 simulation 实例(memory-graph.tsx:147-153):直接用 useGraphData 算出的螺旋初始坐标当最终坐标,连一次力都不跑。渲染层也配套降级——renderer.ts:439-441 的 densePointMode 在节点 >25000 且缩得很小时,把记忆退化成纯色小圆点批量画。
3.4 精华三:增量热更新,不重排已有节点
分页加载「再来一页文档」时,如果每次都 init 重跑力导向,已经摆好的节点会整体乱抖,体验极差。所以区分三种情形(memory-graph.tsx:155-178):
| 情形 | 判定 | 动作 |
|---|---|---|
| 首次加载 / 节点集大改 | 无历史,或旧 id 不再是新集子集 | sim.init() 全量 重排 |
| 纯追加(append-only) | 旧 id 全部仍在,只是多了新 id | sim.update() 热插入 + stop(),老坐标不动 |
| 数据同引用 | id 没变 | sim.update() 走个过场 |
ForceSimulation.update(simulation.ts:83-89)只是 sim.nodes(...) + 换掉 link 力的边集(同样过滤 extends),不重置 alpha,所以老节点不会被重新加热甩飞。新节点的落点由 useGraphData 的 getAppendPosition 在已有节点外围找空位(use-graph-data.ts:297-343,金角螺旋 + 网格避让)。
坑: 拖拽时
InputHandler会给节点钉上fx/fy(固定坐标),松手才置回null(input-handler.ts:135-139、177-184)。d3-force 见到fx/fy就把该节点当锚点——这正是「拖一个节点、其它节点让位」效果的来源。
4. 核心原理之二:版本链索引(VersionChainIndex)
4.1 它要解决的小问题
Supermemory 会自动遗忘、矛盾更新记忆:同一个事实(「我住在北京」→「我搬到上海了」)会产生多条记忆,新的用 parentMemoryId 指向旧的。UI 要能把这一整条进化史摆出来,让用户点一个节点就看到「它是 v3,前面还有 v1、v2」。这就是 VersionChainIndex 干的活——它是「自动遗忘 / 矛盾更新」在界面上的呈现。
4.2 数据结构:三张表 + 增量重建
VersionChainIndex(canvas/version-chain.ts:11-106)维护三张表:
| 表 | 类型 | 用途 |
|---|---|---|
memoryMap | Map<id, GraphApiMemory> | id → 记忆本体 |
childrenMap | Map<parentId, childId[]> | 反向索引:谁的孩子是谁 |
cache | Map<id, ChainEntry[]> | 已算好的链,链上每个 id 都指向同一份 |
增量精华:引用相等短路。 rebuild 第一行就是——
// version-chain.ts:18 —— documents 引用没变就直接返回,零开销
if (documents === this.lastDocs) return
这让上层可以在每次 render 里无脑调用 chainIndex.current.rebuild(limitedDocuments)(memory-graph.tsx:132),数据没变时它就是个 no-op——省去了放进 useEffect 的时序麻烦(注释见 memory-graph.tsx:128-131)。
4.3 算法:先回溯到根,再前探到最新
getChain(memoryId)(version-chain.ts:39-105)分两步走,产出一条从 v1 到最新的有序链:
选中节点 mem
│
① 向后回溯到根(沿 parentMemoryId)
mem → parent → parent ... → root
收集后 reverse ⇒ [root .. selected]
│
② 向前前探到最新(沿 childrenMap 第一个孩子)
selected → child → child ... → latest
│
拼接 [root..selected] + [selected+1..latest]
│
长度 ≤ 1 ⇒ 返回 null(孤立 v1 不算链)
两处细节值得记:
-
前探只走「第一个孩子」(
version-chain.ts:63-75):版本链设计上是线性的(一父一子);万一数据分叉,只取文档顺序里的第一支。visited集合同时防成环(version-chain.ts:50、71)。 -
版本号会兜底修复(
version-chain.ts:83-98):后端有时把整条链的version都写成 1。这里用「单调递增」规则重算显示版本号——只在后端值不可信(不递增)时才覆盖,合法值原样保留。测试version-chain.test.ts明确验证了这两种情况:「后端整条 v1」被修成[1,2],而「合法的 v1/v5/v5」只修坏的那一格。
产出的每条 ChainEntry(version-chain.ts:3-9)带 { version, isForgotten, isLatest },直接喂给弹窗里的版本时间线渲染(node-hover-popover.tsx:230-306 的 VersionTimeline,遗忘的版本号标红、当前项高亮)。方向键上下浏览版本链也走它(memory-graph.tsx:476-517 的 navigateUp/navigateDown)。
4.4 版本状态如何画出来
链里的状态在 canvas 上有专门的视觉语言(renderer.ts:763-858 的 drawMemoryNode):
| 记忆状态 | 判定字段 | 画法 |
|---|---|---|
| 已被取代(非最新) | isLatest === false | 半透明 + 虚线边 + 一道斜划线(strikethrough) |
| 已遗忘 | isForgotten | 红色 X 图标 |
| 在更新链里 | parentMemoryId 或关系含 updates | 右上角一个紫色「更新」小徽标(drawUpdateMarker) |
isMemoryInUpdateChain(renderer.ts:860-866)判定一个记忆是否属于更新链——这让「更新链成员」即使没被选中也带上视觉标记。
5. 深入实现:渲染与交互引擎
这一节是给要读源码的人的密集走读。核心是:一条 rAF 循环 + 全 ref 驱动 + 能跳帧就跳帧。
5.1 单条渲染循环 + 跳帧
GraphCanvas 挂载时启动唯一一条 requestAnimationFrame 循环,跑完组件生命周期(graph-canvas.tsx:203-318)。每帧顺序:
tick():
1. viewport.tick() —— 惯性平移 / 弹簧缩放 / lerp 平移,返回是否在动
2. dim 动画缓动 —— 选中时非选中节点渐暗
3. simulation.isActive() —— 力导向还在跑吗
4. 位置变了才重建空间索引
── 若以上全 false 且无 renderNeeded ⇒ return(跳过整帧)
5. renderFrame(...)
跳帧是最关键的省 电优化(graph-canvas.tsx:242-251):静止状态下(没在平移、力已停、没在渐暗、空间索引没变、没有外部请求重绘),tick 直接 return,一根手指没动就一帧都不画。renderNeeded 这个 ref 由 hover / 选中 / resize / 数据变更等各处置 true。
高 DPI 处理:canvas 物理像素按 devicePixelRatio 放大,但封顶 16384 防超大屏爆显存(graph-canvas.tsx:181-199)。
5.2 视口:世界坐标 ↔ 屏幕坐标
ViewportState(canvas/viewport.ts)是一层仿射变换 + 一堆动画状态。核心两个函数就是简单的缩放平移:
// viewport.ts:31-43 —— 世界↔屏幕互转
worldToScreen(wx, wy) { return { x: wx*zoom + panX, y: wy*zoom + panY } }
screenToWorld(sx, sy) { return { x: (sx-panX)/zoom, y: (sy-panY)/zoom } }
tick()(viewport.ts:120-159)每帧推进三种动画,任一在动就返回 true驱动重绘:
- 惯性平移:松手后按
friction = 0.92衰减速度(甩一下会滑行)。 - 弹簧缩放:
zoom朝targetZoom以zoomSpring = 0.15逼近,并保持鼠标锚点不动(zoomImmediate/tick都在缩放后重算 pan 以锚定screenToWorld(anchor))。 - lerp 平移:
centerOn/fitToNodes设的目标位,按panLerp = 0.12平滑靠近。
fitToNodes(viewport.ts:71-86)算出所有节点包围盒,反解出「刚好铺满 + 10% 边距」的缩放与居中;setMinZoomForNodes 据此把最小缩放放宽到能看全整图。
5.3 空间命中:网格哈希 + 3×3 邻域
鼠标落在哪个节点上?逐个节点算距离是 O(n),这里用固定网格空间索引(SpatialIndex,canvas/hit-test.ts)。世界被切成 cellSize = 200 的格子,节点按坐标丢进格子。查询时只看当前格 + 周围 8 格(hit-test.ts:26-42):
// hit-test.ts:30-40 —— 只扫 3×3 邻域,倒序让上层节点先命中
for (let dx = -1; dx <= 1; dx++)
for (let dy = -1; dy <= 1; dy++) {
const cell = this.grid.get(`${cx+dx},${cy+dy}`)
for (let i = cell.length-1; i >= 0; i--) // 后画的在上,倒序优先
if (hitTest(node, wx, wy)) return node
}
命中形状按节点类型区分:文档是方块(切比雪夫距离),记忆是圆(欧氏距离平方,免开方)。rebuild 也有哈希短路(hit-test.ts:8-24):把节点数、id、坐标(×10 提精度)揉成一个哈希,和上次相同就不重建——所以静止帧里空间索引零开销。
5.4 边渲染:按颜色批处理 + LOD 采样
一次 beginPath 里画尽可能多同色线,是 canvas 批量绘制的关键。drawEdges(renderer.ts:203-404)把边按 颜色|宽度|透明度|类型 分桶(edgeBatches,模块级复用、每帧 clear 不重新分配,renderer.ts:20、334),每桶一次 path 一次 stroke。
LOD(细节层级)采样是密集图的救命稻草:缩得很小、边又多时,按边 id 的哈希取模抽样只画一部分(renderer.ts:117-128):
// renderer.ts:126-128 —— 用确定性哈希抽样,stride 越大画得越少
function shouldDrawSampledEdge(edgeId, stride) {
return stride <= 1 || hashString(edgeId) % stride === 0
}
stride 由边数和缩放共同决定(getRelationEdgeStride / getDerivesEdgeStride):关系边超 260、derives 边超 3200 且缩得够小才开始抽稀(renderer.ts:22-25)。抽样用哈希而非随机,保证同一条边每帧要么一直画要么一直不画,不会闪烁。选中 / hover 相关的 updates 边则强制画出(renderer.ts:236-237),保证交互焦点永远可见。
5.5 节点渲染:文档方块 / 记忆六边形
- 文档:圆角方块 + 渐变填充 + 内框 + 中央矢量图标(
drawDocumentNode,renderer.ts:700-761)。图标由drawDocIcon(canvas/document-icons.ts:37-122)按文档类型switch出——网页画地球、PDF 画文字标签、Notion / Google Doc / 推特 / 视频各有手绘矢量,全部用 canvas 路径实时画,不依赖任何图片资源。 - 记忆:六边形(
drawHexagon,renderer.ts:944-958),颜色由聚类色 + 语义边框色混合。小到 8px 以下就退化成批量圆点(renderer.ts:485-509),几万个点也能一次 path 画完。
节点边框色带语义(use-graph-data.ts:43-55 的 getMemoryBorderColor):已遗忘=红,7 天内将遗忘=橙,24 小时内新建=绿,否则用聚类色。
5.6 聚类上色:BFS 连通分量
同一簇相关记忆应该同色。computeClusterAssignments(use-graph-data.ts:114-191)建一张无向邻接图(同文档的记忆互连、有关系的记忆互连),再用 BFS 求连通分量,每个分量分一个稳定颜色(按 key 哈希取色,getClusterColor,use-graph-data.ts:110-112)。文档节点则取「它旗下记忆里占多数的那个簇色」(getDocumentClusterAssignment)。
5.7 主题:读 CSS 变量 + 监听切换
useGraphTheme(hooks/use-graph-theme.ts)从 document.documentElement 上读一串 --graph-* CSS 变量(读不到就回退 DEFAULT_COLORS,constants.ts:42-69),并用 MutationObserver 监听 class 变化、matchMedia 监听系统深浅色——所以宿主一切换主题,图立刻跟着变色。调用方还能用 colors prop 覆盖任意字段。
6. 巧妙之处(可带走的技术)
-
物理语义的取舍:把
extends边踢出引力(simulation.ts:17)。「哪些关系该影响布局、哪些只是装饰」是力导向图最容易翻车的地方;这里明确区分结构边与视觉边,一行 filter 避免了稠密图糊成一团。 -
一个阈值管三层降级:
6000。同一个DENSE_GRAPH_STATIC_THRESHOLD同时决定「跑不跑物理动画」(simulation.ts:66-76)和「建不建 simulation 实例」(memory-graph.tsx:137-143),渲染层再叠加25000的纯点模式——分级降级而非一刀切。 -
引用相等短路 + render 里直接调用(
version-chain.ts:18)。把「幂等 + 引用相等早退」做进rebuild,上层就能在 render body 里放心调,绕开useEffect的时序坑。这是个很值得抄的模式。 -
确定性哈希抽样做 LOD(
renderer.ts:126-128)。用hashString(id) % stride而非Math.random()决定画不画一条边,天然消除帧间闪烁——随机抽样在动画里是大忌。 -
全 ref + 单 rAF + 跳帧(
graph-canvas.tsx:58-70、242-251)。渲染态一律不进 React state,静止帧直接不画。这是「canvas 高性能可视化」在 React 里的标准姿势。 -
增量追加不抖动(
memory-graph.tsx:155-178)。分页加载区分「全量重排 / 纯追加 / 无变化」,纯追加时老坐标定死、只在外围塞新节点——分页体验平滑的关键。
7. 该包如何被 MCP 当 App UI 复用
MCP 服务器把这张图暴露成一个可弹出的可视化工具(细节见 02-mcp-server.md,这里只讲连接点)。工具注册已从旧版 server.ts 内联的大类拆成 apps/mcp/src/server/server.ts:67 的 createSupermemoryServer(经 registerAllTools 装配各工具),三件事分别落在:
- 注册工具
memory-graph(server/tools/memory-graph.ts:13):调用后端拉一页文档,把文档/记忆总数等塞进structuredContent(ViewMessage),并在_meta挂上appResultMeta(viewId)的 widget 会话键与appToolMeta()的 UI 资源地址。 - 注册分页工具
fetch-graph-data(server/tools/fetch-graph-data.ts:9,visibility: ["app"]):供 UI 内部翻页取更多文档。 - 注册 HTML 资源
registerWidgetResource(...)(server/resources/widget.ts:19):把打包好的 widget App UI HTML 作为 MCP 资源返回。
一个要说明的架构变化: 旧版本的 MCP App UI(apps/mcp/src/ui/mcp-app.ts)是一份独立的 force-graph + d3-force-3d 重新实现,只沿用同一套数据模型、靠手工注释保持边装配同步。新版已改为直接 import 本包:widget 的 Graph 视图(apps/mcp/src/widget/views/Graph.tsx:6)从 @supermemory/memory-graph 引入 MemoryGraph 组件,把 API 形状的 DocumentWithMemories 映射成包的 GraphApiDocument(Graph.tsx:90-123 的 toGraphMemory/toGraphDocument),让 MCP 端与控制台渲染同一份代码。原先「两端两份实现、需手工同步」的边界不复存在;apps/web 仍是本包的直接消费者。
8. 边界与局限
- 版本链假定线性:分叉时前探只取第一支(
version-chain.ts:63-75),多分支历史无法完整展示。 - 孤立 v1 不成链:单条无父无子的记忆
getChain返回null(version-chain.ts:81),弹窗不显示版本时间线。 - 6000+ 节点无物理动画:超阈值即静态布局,拖拽单点不会带动邻居重新松弛(力已停)。
- 纯点模式牺牲细节:25000+ 且缩得很小时记忆退化成色点(
renderer.ts:439-441),看不出形状/状态图标。 - MCP 与本包已同源:新版 widget 直接 import 本包(§7),旧版「两份实现手工同步」的漂移风险已消除。
- 主题依赖 DOM:
useGraphTheme读document,SSR 下回退默认色(use-graph-theme.ts:5-11)。
9. 代码地图(导航索引)
| 主题 | 文件路径 | 符号名 |
|---|---|---|
| 力导向布局引擎 | packages/memory-graph/src/canvas/simulation.ts | ForceSimulation |
| 结构边过滤(排除 extends) | packages/memory-graph/src/canvas/simulation.ts:17 | structuralEdges |
| 密集图静态阈值 | packages/memory-graph/src/canvas/simulation.ts:5 | DENSE_GRAPH_STATIC_THRESHOLD |
| 文档-记忆弹簧长度缩放 | packages/memory-graph/src/canvas/simulation.ts:115 | getDocMemoryDistance |
| 力参数常量 | packages/memory-graph/src/constants.ts:28 | FORCE_CONFIG |
| 版本链索引 | packages/memory-graph/src/canvas/version-chain.ts | VersionChainIndex |
| 增量重建短路 | packages/memory-graph/src/canvas/version-chain.ts:17 | rebuild |
| 回溯+前探取链 | packages/memory-graph/src/canvas/version-chain.ts:39 | getChain |
| 链条目类型 | packages/memory-graph/src/canvas/version-chain.ts:3 | ChainEntry |
| 节点/边装配 + 初始布局 | packages/memory-graph/src/hooks/use-graph-data.ts:458 | useGraphData |
| 边计算(三类边) | packages/memory-graph/src/hooks/use-graph-data.ts:406 | computeEdges |
| BFS 聚类上色 | packages/memory-graph/src/hooks/use-graph-data.ts:114 | computeClusterAssignments |
| 追加落点避让 | packages/memory-graph/src/hooks/use-graph-data.ts:297 | getAppendPosition |
| 记忆语义边框色 | packages/memory-graph/src/hooks/use-graph-data.ts:43 | getMemoryBorderColor |
| 逐帧渲染入口 | packages/memory-graph/src/canvas/renderer.ts:66 | renderFrame |
| LOD 哈希抽样 | packages/memory-graph/src/canvas/renderer.ts:126 | shouldDrawSampledEdge |
| 记忆节点(版本状态画法) | packages/memory-graph/src/canvas/renderer.ts:763 | drawMemoryNode |
| 视口变换与动画 | packages/memory-graph/src/canvas/viewport.ts | ViewportState |
| 缩放到全图 | packages/memory-graph/src/canvas/viewport.ts:71 | fitToNodes |
| 网格空间命中 | packages/memory-graph/src/canvas/hit-test.ts | SpatialIndex |
| 3×3 邻域查询 | packages/memory-graph/src/canvas/hit-test.ts:26 | queryPoint |
| 输入事件与拖拽钉点 | packages/memory-graph/src/canvas/input-handler.ts:125 | onMouseDown |
| 文档类型矢量图标 | packages/memory-graph/src/canvas/document-icons.ts:37 | drawDocIcon |
| React 壳 + rAF 循环 | packages/memory-graph/src/components/graph-canvas.tsx:203 | GraphCanvas |
| 顶层编排壳 | packages/memory-graph/src/components/memory-graph.tsx:23 | MemoryGraph |
| simulation 增量决策 | packages/memory-graph/src/components/memory-graph.tsx:155 | useEffect |
| 版本时间线弹窗 | packages/memory-graph/src/components/node-hover-popover.tsx:230 | VersionTimeline |
| 主题(CSS 变量) | packages/memory-graph/src/hooks/use-graph-theme.ts:77 | useGraphTheme |
| MCP 工具注册 | apps/mcp/src/server/tools/memory-graph.ts:13 | registerTool("memory-graph") |
| MCP 分页工具 | apps/mcp/src/server/tools/fetch-graph-data.ts:9 | registerTool("fetch-graph-data") |
| MCP widget 资源 | apps/mcp/src/server/resources/widget.ts:19 | registerWidgetResource |
| MCP widget 图视图(直接消费本包) | apps/mcp/src/widget/views/Graph.tsx:199 | MemoryGraph(consumer 变体) |
同组其它章: index.md · 01-data-model.md · 02-mcp-server.md · 03-framework-middleware.md · 04-claude-memory-tool.md