Mind Map

The mind map is a force-directed graph that renders your ideas as nodes and their relations as edges. It gives you a bird’s-eye view of how your thinking connects and evolves.

How It Looks

The map renders on a dark canvas with a dot grid background. Nodes are rounded cards colored by status, and edges are styled by relation type. Highly-connected ideas glow and appear larger, making hubs easy to spot.

A project ecosystem — ideas connected by blocks, inspires, and related relations.

Visual Language

The map uses a consistent visual language so you can read relationships at a glance.

Node Status Colors

Captured

Exploring

Building

Shipped

Shelved

Edge Relation Types

Parent → Child

Blocks

Inspires

Duplicate

Supersedes

Node Anatomy

Each node is a card showing:

Title — the idea name (truncated if long)
Status dot — colored circle in the top-right corner
Tags — up to 2 tag pills shown below the title
Connection count — badge in the bottom-right showing how many relations exist

Node width scales with connection count — ideas with more relations appear larger, making hub ideas easy to spot. Ideas with 3+ connections also get a subtle glow effect matching their status color.

Node sizing — highly-connected ideas are larger and glow.

Edge Types

Edges encode the relation type through color, weight, and style:

Relation	Color	Style	Arrow	Meaning
`related`	Purple	Thin solid	No	General connection
`parent`	Light	Solid, bold	Yes	Hierarchical parent → child
`blocks`	Red	Solid, bold	Yes	A blocks progress on B
`inspires`	Cyan	Solid, medium	Yes	A inspired the creation of B
`duplicate`	Amber	Dashed	No	Auto-detected duplicate
`supersedes`	Gray	Dashed	Yes	A replaces B

Auto-created edges (from duplicate detection) have a score showing similarity percentage. Manually created edges have score: null.

Edge types — blocks (red), inspires (cyan), related (purple), duplicate (amber dashed).

Interaction

Action	How
Zoom	Scroll wheel or pinch gesture
Pan	Click and drag on the background
Open idea	Click a node to open the idea detail panel
Highlight connections	Hover a node to highlight its direct connections
Drag-to-connect	Drag from a node handle to another node to create a relation
Context menu	Right-click a node for quick actions (move status, link, focus, archive)
Focus mode	Right-click → Focus to dim everything except the 2-hop neighborhood
Filter by status	Status toggles above the graph show/hide ideas by status
Filter by tag	Tag filter narrows the graph to ideas with specific tags
Timeline	Scrub through time to see how your graph evolved

Focus Mode

Right-click any node and select Focus to highlight its 2-hop neighborhood. All other nodes dim to 20% opacity, letting you trace the immediate context of an idea without visual clutter.

Drag-to-Connect

Hover a node to reveal four connection handles. Drag from a handle to another node to create a new relation. A magnetic snap activates within 15px of the target, and a relation type picker appears on drop.

API Access

Retrieve the full graph data to build custom visualizations.

curl https://neuralrepo.com/api/v1/map \
  -H "X-API-Key: nrp_your_key_here"

Response:

{
  "nodes": [
    {
      "id": 42,
      "title": "Background job processing system",
      "status": "building",
      "tags": ["backend", "infrastructure"],
      "connectionCount": 5,
      "created_at": "2026-03-15T10:00:00Z"
    }
  ],
  "edges": [
    {
      "id": 1,
      "source": 10,
      "target": 42,
      "type": "blocks",
      "score": null,
      "note": "Need auth system before dashboard",
      "created_at": "2026-03-16T09:30:00Z"
    }
  ]
}

CLI Exploration

Use nrepo graph to explore the graph from any idea without opening the web app.

# Immediate connections
nrepo graph 42

# 3 levels deep, filtered to blocks and inspires
nrepo graph 42 --depth 3 --type blocks,inspires

42: Background job processing system [building]
 ├── blocks → 55: Admin dashboard [exploring]
 ├── blocks → 60: API rate limiting [captured]
 └── inspires → 71: Event-driven architecture [exploring]
      └── inspires → 82: Real-time notifications [captured]

Performance

The mind map uses two rendering modes depending on graph size:

SVG rendering (up to 200 nodes) — full interactivity, crisp at any zoom level
Canvas rendering (200+ nodes) — optimized for large graphs, device-pixel-ratio aware

The force simulation uses D3.js with tuned physics: charge repulsion scales with a density slider, link distance is 120px, and ideas with the same first tag weakly cluster together.