Visualize Claude Code's memory files in 3D, 2D, and more. Scans ~/.claude/projects/*/memory/*.md, parses YAML frontmatter and [[wiki-links]], then renders an interactive knowledge graph.
3D view — nodes glow brighter with more connections
Card view — default interface, all memory files in a clean grid
2D view — directed arrows show citation directions, drag to rearrange
Charts — type distribution, connection stats, word cloud
Health panel — real-time data quality scores, broken links, and orphans
- Five views — Cards / 3D heatmap / 2D directed graph / Chart dashboard / Health panel
- SSE live reload — auto-redraws when memory files change
- Auto-detect primary project — picks the one with the most
.mdfiles - [[wiki-link]] parsing — builds edges from
[[references]]in file bodies - Health checks — validate / check-links / find-orphans, with AI-powered auto-fix
- CRUD editing — edit memory files directly from the browser, with automatic backups
- Zero dependencies — pure Node.js stdlib, no
npm installneeded
git clone https://github.com/<your-username>/claude-mem-viz.git
cd claude-mem-viz
# Start (scans ~/.claude/projects/ by default)
node server.js
# Custom directory
node server.js --dir /your/claude/projectsOpen http://localhost:3457 in your browser.
When hovering a node in the 2D directed graph:
| Color | Style | Meaning |
|---|---|---|
| 🔴 Red | Solid highlight | All edges connected to the hovered node (direction-agnostic) |
| 🔵 Blue | Dashed - - - |
Outgoing links — this node points to those |
| 🟠 Orange | Solid | Incoming links — other nodes point to this one |
Non-connected edges fade out on hover for clarity.
| Flag | Default | Description |
|---|---|---|
--dir |
~/.claude/projects |
Root directory of Claude Code projects |
--port |
3457 |
HTTP server port |
~/.claude/projects/
├── project-a/memory/
│ ├── MEMORY.md ← index file
│ ├── my-project.md ← frontmatter: type: project
│ └── my-profile.md ← frontmatter: type: user (with [[wiki-links]])
└── project-b/memory/
└── ...
Each .md file must have YAML frontmatter:
---
name: my-project
description: "Short description"
metadata:
type: project # project | user | reference | feedback
---
Body... 关联: [[other-file]] [[another-file]]server.js will:
- Recursively scan all
memory/directories - Parse frontmatter for
name/type - Extract
[[wiki-links]]from the body to build edges - Push data to the frontend via SSE
npm run healthFour scores:
- Validate — frontmatter integrity (name/description/type)
- Links — broken
[[wiki-link]]detection (code-span links auto-skipped) - Orphans — nodes with zero connections (10% baseline tolerance,
standalone: trueexempts) - Overall — weighted average
Individual checks:
npm run validate # frontmatter integrity
npm run check-links # broken links
npm run find-orphans # orphan nodesnpm install -g .
memory # ← launches the viz server from anywhereThis repo includes two optional skills for Claude Code:
Auto-enforces memory file quality:
- Enforces frontmatter template on new files
- Auto-detects
[[wiki-links]]on create/update - Maintains
MEMORY.mdindex - Triggers health checks after 3+ file changes
- AI-fixes broken links, orphans, and formatting
AI-driven optimization layer:
- Suggests missing
[[wiki-links]] - Auto-writes descriptions
- Flags stale/outdated files
- Recommends merge candidates
cp -r skills/* ~/.claude/skills/Skills activate automatically on next Claude Code session — no manual trigger needed.
claude-mem-viz/
├── server.js # HTTP + SSE + file scanner + CRUD + backup
├── package.json
├── public/
│ ├── index.html # HTML skeleton
│ ├── style.css # Styles
│ └── app.js # Frontend logic (five views)
├── scripts/
│ ├── validate.js # Frontmatter validation
│ ├── check-links.js # Broken link detection
│ ├── find-orphans.js # Orphan node detection
│ └── health-report.js # Aggregated health score
├── skills/
│ ├── memory-management/ # Recommended Claude Code skill
│ └── memory-optimize/ # On-demand optimization skill
└── screenshots/ # Interface screenshots
MIT