Interactive Mind Map
A mind map that expands on click — double-click empty space to add an idea.
Drag nodes, pan and zoom — this is a live React Flow canvas.
How it works
Child nodes collapse behind their parent until expanded. A radial layout keeps branches evenly spaced as the map grows.
Source code
tsx
const onNodeDoubleClick = (_, node) =>
setNodes((ns) => ns.map((n) =>
n.parentId === node.id ? { ...n, hidden: !n.hidden } : n));