# How LLM Wiki Renders the Graph View Using Sigma.js and Graphology

> Discover how LLM Wiki renders its knowledge graph with Sigma.js and Graphology. Learn about the Graphology data model, ForceAtlas2 algorithm, and WebGL-accelerated canvas display.

- Repository: [nash_su/llm_wiki](https://github.com/nashsu/llm_wiki)
- Tags: how-to-guide
- Published: 2026-09-12

---

**LLM Wiki visualizes its knowledge graph by constructing a Graphology data model, computing spatial coordinates via the ForceAtlas2 algorithm, and rendering the result through Sigma.js using a React wrapper for WebGL-accelerated canvas display.**

The nashsu/llm_wiki repository implements an interactive knowledge graph visualization that separates data management from presentation. By combining the **graphology** library for graph theory operations with **sigma.js** (via `react-sigma-v2`) for rendering, the application transforms LLM-generated relationships into explorable network diagrams. This architecture enables real-time updates as the knowledge base expands while maintaining smooth interactivity.

## Architecture Overview

### The Graphology Data Layer

In [`src/components/graph/graph-view.tsx`](https://github.com/nashsu/llm_wiki/blob/main/src/components/graph/graph-view.tsx), LLM Wiki instantiates a `Graph` object from the **graphology** library to serve as the canonical data structure. This directed multigraph stores nodes representing concepts and edges representing LLM-derived relationships, with attributes like `label`, `size`, and `color` attached via `graph.addNode()` and `graph.addEdge()`. The [`src/components/chat/reference-knowledge-graph.tsx`](https://github.com/nashsu/llm_wiki/blob/main/src/components/chat/reference-knowledge-graph.tsx) file reuses this same data model for embedded chat visualizations.

### ForceAtlas2 Layout Computation

Before rendering, the graph requires two-dimensional coordinates. LLM Wiki imports **graphology-layout-forceatlas2** to execute a force-directed layout that minimizes edge crossings and clusters related concepts. The `forceAtlas2.assign()` method mutates the graph in place, writing `x` and `y` attributes to each node based on physics simulation parameters.

### Sigma.js Rendering Pipeline

The presentation layer relies on **sigma.js** accessed through the `react-sigma-v2` React wrapper. The `<SigmaContainer>` component consumes the layout-computed graph and settings such as `renderEdges` and `zoomToFit`, delegating to a WebGL canvas renderer. This separation allows the GPU to handle panning, zooming, and hover detection while the CPU manages the Graphology data model.

## Implementation Deep Dive

### Building the Graph Structure

The following pattern demonstrates how [`graph-view.tsx`](https://github.com/nashsu/llm_wiki/blob/main/graph-view.tsx) initializes the graph model before data population:

```typescript
import Graph from "graphology";

const graph = new Graph();
graph.addNode("llm-concept", { 
  label: "Large Language Model", 
  size: 12,
  color: "#6366F1" 
});
graph.addNode("prompt-concept", { 
  label: "Prompt Engineering", 
  size: 10 
});
graph.addEdge("llm-concept", "prompt-concept", { 
  size: 2,
  label: "utilizes"
});

```

### Calculating Spacial Layouts

Spatial positioning is computed deterministically before mounting the React component. The `assign` method runs the simulation for a specified number of iterations to stabilize node positions:

```typescript
import forceAtlas2 from "graphology-layout-forceatlas2";

// Compute x/y coordinates without manual positioning
forceAtlas2.assign(graph, {
  iterations: 100,
  settings: {
    gravity: 0.0001,
    scalingRatio: 10,
    slowDown: 10
  }
});

```

### Rendering with the Sigma Container

The final step mounts the interactive viewer, passing the configured graph instance and display settings:

```tsx
import { SigmaContainer, Node, Edge } from "react-sigma-v2";
import "react-sigma-v2/lib/react-sigma-v2.css";

export default function GraphView() {
  return (
    <SigmaContainer 
      graph={graph} 
      settings={{ renderEdges: true, zoomToFit: true }}
    >
      <Node />
      <Edge />
    </SigmaContainer>
  );
}

```

## Key Files and Dependencies

The graph visualization implementation spans these specific locations in the repository:

- **[`src/components/graph/graph-view.tsx`](https://github.com/nashsu/llm_wiki/blob/main/src/components/graph/graph-view.tsx)**: Core component housing the Graphology instantiation, ForceAtlas2 layout logic, and Sigma container integration.
- **[`src/components/chat/reference-knowledge-graph.tsx`](https://github.com/nashsu/llm_wiki/blob/main/src/components/chat/reference-knowledge-graph.tsx)**: Secondary graph visualization used within the chat interface, importing the same rendering pipeline.
- **[`package.json`](https://github.com/nashsu/llm_wiki/blob/main/package.json)**: Declares the required dependencies `graphology`, `graphology-layout-forceatlas2`, and `react-sigma-v2` that power the visualization stack.

## Summary

- **Data Modeling**: LLM Wiki uses **Graphology** in [`graph-view.tsx`](https://github.com/nashsu/llm_wiki/blob/main/graph-view.tsx) to create a robust graph structure with typed nodes and edges representing knowledge relationships extracted from LLM outputs.
- **Layout Calculation**: The **ForceAtlas2** algorithm from `graphology-layout-forceatlas2` computes spatial coordinates via `forceAtlas2.assign()`, optimizing node positioning for readability and clustering.
- **GPU-Accelerated Rendering**: **Sigma.js** (wrapped by `react-sigma-v2`) renders the graph using WebGL, handling interactions like zoom and pan through the `<SigmaContainer>` component settings.
- **Reusable Architecture**: The same three-stage pipeline is reused in [`reference-knowledge-graph.tsx`](https://github.com/nashsu/llm_wiki/blob/main/reference-knowledge-graph.tsx), ensuring consistent visualization behavior across different UI contexts.

## Frequently Asked Questions

### How does LLM Wiki handle dynamic updates when the knowledge graph changes?

When new LLM output arrives, the application either mutates the existing Graphology instance using `addNode()` and `addEdge()` or constructs a fresh graph object. After mutation, `forceAtlas2.assign()` recalculates coordinates, and the React-Sigma wrapper detects the updated reference to re-render the canvas without unmounting the entire component tree.

### What is the performance limit for nodes and edges in this implementation?

The Sigma.js WebGL renderer used in the repository can comfortably handle **several thousand nodes** and **tens of thousands of edges** at 60 frames per second on modern hardware. Graphs exceeding these thresholds would require spatial indexing or node aggregation strategies not currently implemented in the standard [`graph-view.tsx`](https://github.com/nashsu/llm_wiki/blob/main/graph-view.tsx) component.

### Why was ForceAtlas2 chosen over hierarchical or grid layouts?

The `graphology-layout-forceatlas2` implementation produces force-directed layouts that naturally cluster semantically related concepts—a common pattern in LLM-generated knowledge bases. Unlike hierarchical layouts that enforce tree structures, ForceAtlas2 accommodates complex cyclic relationships while maintaining aesthetic criteria like minimal edge overlap and uniform node distribution.

### Can the graph visualization be customized for different color themes?

Yes. The `<SigmaContainer>` accepts a `settings` prop that accepts parameters like `labelColor`, `nodeHoverColor`, and `defaultEdgeColor`. Additionally, since Graphology supports arbitrary attributes on nodes and edges, the application can map these attributes to visual properties within the Sigma rendering cycle to implement conditional styling based on entity types or relationship weights.