VisualFlow

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));