mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-08-28 05:25:33 +00:00
87 lines
3.5 KiB
Text
87 lines
3.5 KiB
Text
---
|
|
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>
|