Knowledge Graph Visualization#

RAGFlow exposes graph data in two distinct frontend surfaces: a standalone Knowledge Graph page (legacy GraphRAG) and graph panels embedded inside the Compilation/Artifacts page (Knowledge Compilation Engine, v0.27.0+). These surfaces use different rendering libraries and data sources.

Route Map#

Both views live under the /dataset route prefix 1:

Standalone Knowledge Graph Page#

Entry point: web/src/pages/dataset/knowledge-graph/index.tsx

Renders a single ForceGraph component fed by useFetchKnowledgeGraph() 2. The delete button triggers useDeleteKnowledgeGraph to remove the entire KG.

Renderer: force-graph.tsx uses Ant Design G6 3. Key features:

• Force-directed layout with combo groupings derived from community detection
• Tooltips showing entity_type, weight, and description per node/edge
• Variable node sizes based on rank; edge weights drive line thickness
• Dark/light theme support

Graph utility logic (node grouping via buildNodesAndCombos) lives in knowledge-graph/util.ts.

Data hook: useFetchKnowledgeGraph() in use-knowledge-request.ts 4 — returns { graph, mind_map } via React Query.

Compilation Page: LlmWiki + Skills Views#

Entry point: web/src/pages/dataset/compilation/index.tsx

The page holds local viewMode state (ViewMode.LlmWiki | ViewMode.Skills) and renders one of two sub-views via a toggle 5. View modes are defined in constants.ts.

LlmWiki View#

File: llm-wiki-view.tsx

A resizable two-panel layout (left panel defaulting to 33%) 6:

• Left panel — WikiLeftPanel with two tabs: Contents (artifact list nav) and Graph (force graph)
• Right panel — WikiDetailContent showing the selected artifact's markdown

The left panel's Graph tab renders ArtifactForceGraph fed by useFetchArtifactGraph() 7. Clicking a graph node calls onSelectArtifact, selecting that wiki page in the right panel.

Cache invalidation: when compilation completes (GenerateStatus.completed), the view invalidates both ArtifactKeys.listByDataset and ArtifactTopicKeys.listByDataset query caches 8.

Skills View#

File: skills-view.tsx

Also a two-panel resizable layout 9:

• Left panel — SkillsLeftPanel driven by useCompilationSkill() which fetches a skill tree (DatasetSkillKeys.tree)
• Right panel — MarkdownEditor (read-only) showing skillPage.md_with_weight

Cache invalidation mirrors LlmWiki: DatasetSkillKeys.tree(id) is re-fetched when GenerateType.ToSkills completes 10.

ArtifactForceGraph Component#

File: web/src/components/artifact-force-graph/index.tsx 11

Used inside WikiLeftPanel. Unlike the G6-based KG renderer, this is a react-force-graph-2d canvas component. Key details:

• useArtifactGraphData hook transforms IArtifactGraph → GraphData (nodes + links) 12
• Node colors: entities → #00BEB4, concepts → #4CACFF 13
• Node radius range: 4–14px based on link count 13
• Accepts mapNodeToValue, getNodeColor, getNodeRadius, and onNodeClick props for customization
• Auto-fits graph after layout stabilization

Data hook: useFetchArtifactGraph() 14 — optional enabled flag lets WikiLeftPanel defer fetching until the Graph tab is active 15.

Backend Data Sources#

The artifact_entity / artifact_relation rows are materialized during the REFINE phase of the compilation pipeline by build_wiki_page_graph() 16.

Key Source Files#