7.2 · 环境配置（Environment Configuration）

知识图谱查看器

知识图谱查看器

知识图谱查看器是 LightRAG WebUI 中一个基于 React 的复杂可视化组件。它提供了一个交互式界面，用于探索、搜索和编辑知识图谱中存储的已提取实体和关系。该组件利用 Sigma.js 实现 WebGL 加速渲染，并使用 Zustand 进行状态管理。

系统架构与数据流

该查看器遵循单向数据流：原始图谱数据从后端获取，转换为专用的图谱格式，然后通过 Sigma.js 进行渲染。

代码实体空间映射

下图展示了前端组件如何与底层状态和钩子交互，从而将用户操作桥接到代码执行。

数据管线图

LightRAG · 数据管线图 · 图 1

来源： lightrag_webui/src/hooks/useLightragGraph.tsx:93-183，lightrag_webui/src/stores/graph.ts:49-82，lightrag_webui/src/components/graph/GraphSearch.tsx:94-120

核心组件

1. GraphViewer 功能组件

顶层组件，负责编排可视化环境。它使用特定的渲染设置初始化 SigmaContainer，包括用于节点的 NodeBorderProgram 和用于曲线边的 createEdgeCurveProgram lightrag_webui/src/features/GraphViewer.tsx:32-62。

2. useLightragGraph 钩子

该钩子充当数据获取和转换层。

• 获取数据： 使用 queryGraphs 根据标签、深度和节点数量限制来检索数据 lightrag_webui/src/hooks/useLightragGraph.tsx:105-105。
• 校验： 实现 validateGraph 以确保传入的 JSON 在渲染前包含有效的节点/边结构 lightrag_webui/src/hooks/useLightragGraph.tsx:28-75。
• 大小计算： 根据节点的度数，使用幂级缩放映射动态计算节点大小 lightrag_webui/src/hooks/useLightragGraph.tsx:150-166。

3. Zustand 存储（useGraphStore）

图谱查看器的集中式状态管理。它负责管理：

• 选择状态： selectedNode、focusedNode、selectedEdge lightrag_webui/src/stores/graph.ts:85-88。
• 图谱实例： 同时持有 RawGraph（用于属性）和 sigmaGraph（用于渲染）lightrag_webui/src/stores/graph.ts:90-91。
• 类型-颜色映射： 维护一个实体类型到特定颜色的映射，以确保视觉一致性 lightrag_webui/src/stores/graph.ts:101-101。

来源： lightrag_webui/src/features/GraphViewer.tsx:32-62，lightrag_webui/src/hooks/useLightragGraph.tsx:28-166，lightrag_webui/src/stores/graph.ts:85-101

交互功能

图谱搜索（MiniSearch）

GraphSearch 组件提供对当前视口中渲染的节点的全文搜索能力。

• 索引构建： 当图谱发生变化时，它会使用节点标签构建一个 MiniSearch 索引 lightrag_webui/src/components/graph/GraphSearch.tsx:94-113。
• 模糊匹配： 支持前缀和模糊搜索（阈值为 0.2），帮助用户查找存在拼写错误或部分名称的实体 lightrag_webui/src/components/graph/GraphSearch.tsx:98-99。

属性视图与内联编辑

PropertiesView 显示所选元素的元数据。它通过 EditablePropertyRow 支持对实体 ID、描述和关键字进行内联编辑 lightrag_webui/src/components/graph/PropertiesView.tsx:214-231。

• 实体合并： 如果用户将节点重命名为现有实体名称，系统会提供一个 MergeDialog 来合并实体 lightrag_webui/src/components/graph/EditablePropertyRow.tsx:133-146。
• 节点操作： 支持触发扩展（获取邻居节点）和修剪（移除子图）lightrag_webui/src/stores/graph.ts:135-136。

控件与布局

• 布局控制： 允许在 Circular、Force Atlas 和 Noverlaps 等算法之间切换 lightrag_webui/src/components/graph/LayoutsControl.tsx:21-28。它使用 animateNodes 实现平滑过渡 lightrag_webui/src/components/graph/LayoutsControl.tsx:56-56。
• 缩放控制： 提供用于缩放、旋转相机以及重置视图以居中显示图谱的按钮 lightrag_webui/src/components/graph/ZoomControl.tsx:11-107。

来源： lightrag_webui/src/components/graph/GraphSearch.tsx:94-113，lightrag_webui/src/components/graph/PropertiesView.tsx:214-231，lightrag_webui/src/components/graph/EditablePropertyRow.tsx:133-146，lightrag_webui/src/components/graph/LayoutsControl.tsx:21-56，lightrag_webui/src/components/graph/ZoomControl.tsx:11-107

视觉样式与主题

类型-颜色映射

颜色根据节点类型进行分配。getNodeColorByType 函数从共享映射中解析颜色，确保同一类型（例如"组织"）的所有实体在 UI 中共享相同的颜色 lightrag_webui/src/hooks/useLightragGraph.tsx:16-25。

主题切换

GraphViewer 会检测主题变化（亮色/暗色）并相应地更新 sigmaSettings。它会特别调整 labelColor 和 edgeLabelColor，以确保在背景上保持良好的可读性 lightrag_webui/src/features/GraphViewer.tsx:50-57。

来源： lightrag_webui/src/hooks/useLightragGraph.tsx:16-25，lightrag_webui/src/features/GraphViewer.tsx:32-62