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
|
---
title: "Graph Visualization"
description: "Interactive canvas-based component for visualizing your memory connections"
sidebarTitle: "Overview"
---
[](https://www.npmjs.com/package/@supermemory/memory-graph)
The `@supermemory/memory-graph` package provides an interactive, high-performance visualization component that transforms your documents and memories into an explorable knowledge graph. Built with React and powered by HTML5 Canvas, it offers smooth interactions and sophisticated rendering optimizations.
{/* TODO: Add graph interaction GIF showing pan, zoom, and node interactions */}
## Key Features
<CardGroup cols={2}>
<Card title="High-Performance Rendering" icon="zap">
Canvas-based rendering with LOD optimization, viewport culling, and change-based rendering for smooth performance with hundreds of nodes
</Card>
<Card title="Interactive Exploration" icon="move">
Pan, zoom, drag nodes, double-click to focus, and navigate with intuitive controls on both desktop and mobile
</Card>
<Card title="Semantic Connections" icon="network">
Visualizes relationships between documents based on content similarity and memory version chains
</Card>
<Card title="Zero Configuration" icon="sparkles">
Works out of the box with automatic CSS injection - no build configuration or style imports needed
</Card>
<Card title="TypeScript Support" icon="code">
Full TypeScript support with comprehensive type definitions for all props and data structures
</Card>
<Card title="Responsive Design" icon="smartphone">
Optimized for both desktop and mobile with touch gesture support (pinch-to-zoom, pan)
</Card>
</CardGroup>
## When to Use
The graph visualization component is ideal for:
- **Knowledge Management Dashboards**: Visualize how documents and memories connect
- **Document Explorers**: Let users navigate through related content visually
- **Memory Analytics**: Show patterns in how information is structured and related
- **Search Result Visualization**: Display search results in context of the broader knowledge graph
## Variants
The component offers two visual variants optimized for different use cases:
| Variant | Initial Zoom | Spaces Selector | Legend Position | Best For |
|---------|-------------|-----------------|-----------------|----------|
| **Console** | 0.8 (closer) | Shown | Bottom-right | Full-page dashboards, admin panels |
| **Consumer** | 0.5 (wider) | Hidden | Top-right | Embedded widgets, sidebars |
## Graph Elements
The visualization displays three types of nodes and three types of connections:
**Nodes**:
- **Documents**: Rendered as rounded rectangles with glassmorphism styling
- **Memory Entries**: Rendered as hexagons (or circles when zoomed out)
- **Status Indicators**: Visual markers for forgotten, expiring, and new memories
**Connections**:
- **Doc-Memory**: Solid thin lines connecting documents to their memory chunks
- **Doc-Doc**: Dashed lines showing semantic similarity (threshold: 0.725)
- **Version Chains**: Double-line arrows showing memory evolution (updates/extends/derives)
## Next Steps
<CardGroup cols={3}>
<Card title="Installation" icon="download" href="/memory-graph/installation">
Install the package and get set up
</Card>
<Card title="Quick Start" icon="rocket" href="/memory-graph/quick-start">
Build your first graph in 5 minutes
</Card>
<Card title="Examples" icon="code" href="/memory-graph/examples">
Explore real-world implementation patterns
</Card>
</CardGroup>
|