Mind Maps Are Just Trees With Better UX

Every mind map is a tree data structure. The center node is the root. Branches are child nodes. When you build a mind map tool, you are building a tree editor with a radial layout algorithm.

The data structure

A mind map node:

class MindMapNode {
  constructor(text, parent = null) {
    this.id = crypto.randomUUID();
    this.text = text;
    this.parent = parent;
    this.children = [];
    this.x = 0;
    this.y = 0;
  }

  addChild(text) {
    const child = new MindMapNode(text, this);
    this.children.push(child);
    return child;
  }
}

This is a standard n-ary tree. Each node can have any number of children. The root node has no parent.

The layout algorithm

The challenge in mind map rendering is positioning nodes so they do not overlap. The standard approach is a radial layout:

1. Place the root at the center
2. Divide the available angle (360 degrees) among the root's children
3. Each child's subtree occupies a wedge of the circle
4. Repeat recursively with smaller radii

function layoutRadial(node, angle, angleSpan, depth, radius) {
  node.x = Math.cos(angle) * radius * depth;
  node.y = Math.sin(angle) * radius * depth;

  if (node.children.length === 0) return;

  const childAngleSpan = angleSpan / node.children.length;
  let startAngle = angle - angleSpan / 2 + childAngleSpan / 2;

  node.children.forEach((child, i) => {
    layoutRadial(child, startAngle + i * childAngleSpan, 
                 childAngleSpan, depth + 1, radius);
  });
}

The tricky part is allocating angle space proportionally to subtree size rather than equally per child. A child with 10 descendants needs more angle space than a child with 2, or nodes will overlap.

Rendering with SVG

SVG is the best rendering choice for mind maps because it supports zoom without pixelation, easy text rendering, and smooth curves for connections.

function renderConnection(parent, child) {
  const midX = (parent.x + child.x) / 2;
  return `<path d="M ${parent.x} ${parent.y} Q ${midX} ${parent.y} ${child.x} ${child.y}" 
          fill="none" stroke="#666" stroke-width="2"/>`;
}

Quadratic bezier curves (the Q command) produce the organic curved connections that make mind maps visually appealing compared to straight lines.

Interaction design

The three core interactions for a mind map tool:

1. Click a node to select it
2. Press Enter or Tab to add a child
3. Click and drag to reposition

For drag, you need to recursively update all descendants when a node moves, or detach the layout engine and let manual positioning take over.

For creating mind maps without installing software, I built a maker at zovo.one/free-tools/mind-map-maker. It uses SVG rendering with the radial layout algorithm and supports export to PNG and SVG.

---

I'm Michael Lip. I build free developer tools at zovo.one. 500+ tools, all private, all free.