MindMap
Typed React mind map. Pass a hierarchical root node and the component lays children out radially (or horizontally) using d3-hierarchy's tree layout — no Mermaid string DSL required.
Installation
pnpm dlx @hex-core/cli add mind-mapUsage
import { MindMap } from "@/components/ui/mind-map"Radial mind map
Default radial layout with three branches.
<MindMap root={{
id: "root",
label: "Project",
children: [
{ id: "ui", label: "UI", children: [{ id: "btn", label: "Button" }] },
{ id: "api", label: "API" },
{ id: "db", label: "DB" },
],
}} />Horizontal mind map with click handler
Left-to-right tree useful for sidebars and detail panes.
<MindMap orientation="horizontal" onNodeClick={(n) => select(n.id)} root={data} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
rootrequired | object | — | Hierarchy root: { id, label, children?, data? }. Children are laid out radially around the root. |
orientation | "radial" | "horizontal" | radial | Layout direction — "radial" (children orbit the root) or "horizontal" (left-to-right tree). |
width | number | 600 | SVG pixel width. |
height | number | 400 | SVG pixel height. |
onNodeClick | function | — | Called with the clicked MindMapNode when a user clicks any node. |
className | string | — | Additional CSS classes on the SVG element. |
AI Guidance
When to use
Visualize a typed hierarchy when you have structured data (not a Mermaid string) — concept maps, knowledge graphs, project decompositions, agent plan trees. Use radial when the root is conceptually central; horizontal when the hierarchy is left-to-right (file trees, decision trees).
When not to use
Don't use for free-form node graphs with arbitrary edges (use Canvas with reactflow). Don't use to render Mermaid markdown from agents (use Diagram). Don't use for hierarchies sized by value (use TreeMap or Sunburst).
Common mistakes
- Passing an unmemoized `root` object on every render — the layout pass re-runs and node positions thrash. Memoize
- Sizing the SVG to 0 (no explicit width/height and no parent layout) — the layout returns degenerate coordinates
- Mutating the root hierarchy in place between renders — d3-hierarchy mutates its own internal tree, but the input object should be treated as immutable
Accessibility
The SVG carries role="img" with a <title> and <desc> summarizing the node count and root label. For agent outputs, also expose a parallel text representation (a nested <ul> of node labels in a <details>) so screen-reader users get the structure.
Token budget: 320
Verified against @hex-core/components@1.12.0