Tutorials

How to make a mind map online

Drop a central idea, branch it out with a click or a drag, and keep it tidy — or paste a Mermaid mindmap and let the editor lay it out. With the gaps named up front.

A mind map is for the stage before you know the structure: one idea in the middle, everything it makes you think of hanging off it. diagrams.info has a dedicated mind-map node for this, with curved branch lines that route themselves as you move things. No account, no install, and the board stays in your browser.

Before the steps, what it does not do, so you are not hunting for it:

  • There is no keyboard shortcut for adding a child or a sibling. Branching is done with the mouse, from handles on the selected node. Tab and Enter do not grow the map.
  • There is no auto-layout for a map you draw by hand. Nodes stay where you put them. The one exception is a map imported from Mermaid text, which is laid out as a tree when it comes in — see below.
  • No collapsing branches. Every node is always visible.
  • The editor is mouse-only. There are no touch handlers in it yet, so this is a desktop workflow.

1. Drop the central idea

Go to diagrams.info and dismiss the welcome panel. In the tool palette, open the Mind Map section and pick the Mind Map tool, then click anywhere on the canvas.

You get the root: a larger, filled blue box that says Central idea, already selected and already in edit mode. Type your topic and press Enter — or just click away; leaving the field saves it too.

To rename any node later, double-click it.

2. Branch out

Select a node and three small + handles appear around it: left, right and bottom. Each one does two things, depending on whether you click or drag:

  • Click a handle and a new child appears on that side, a fixed gap away, joined to its parent by a curved line. It opens straight into edit mode, so you can type its name immediately.
  • Drag a handle and a preview line follows the cursor. Let go on empty canvas and the child is created exactly where you dropped it — which is how you grow a branch upward, since there is no top handle.
  • Drag a handle onto another node and no new node is made: the two are joined instead. That is how you add a cross-link between branches. Dropping onto a node that is already linked to this one does nothing, so you cannot draw the same line twice.

A child that is left unnamed shows the placeholder Idea.

Each new node and its line go in as a single undo step, so one Ctrl+Z (or Cmd+Z) takes both away.

3. Keep it tidy

The branch lines are fully automatic. Each one attaches to the middle of whichever side of a node faces the other, and bends into a smooth S-curve between them. Move a node — drag it anywhere on its box — and every line touching it re-routes. There are no bend points to drag, and nothing to fix by hand.

A few things that help on a bigger map:

  • Move a whole branch by drag-selecting it (drag a box over empty canvas) and then dragging any node in the selection. Ctrl+A selects everything.
  • Long labels wrap inside the box and are cut off with an ellipsis once they no longer fit; hover the node to read the full text. Drag a resize handle to make the box taller and show more lines.
  • Delete a node with Delete or Backspace. Its branch lines go with it, but its children do not — they stay on the canvas, unattached. Select the whole branch first if you want it gone.
  • Delete just a line by clicking it to select it, then pressing Delete.
  • Copy and paste a branch with Ctrl+C / Ctrl+V. Lines come along only when both of their ends are in the selection.

4. Style it

A selected node has a toolbar with Colors (fill, border and text), the border style (solid, dashed or dotted), text alignment, font size, bold, and the layer controls. There is no shape picker for mind-map nodes: they are always rounded boxes.

One behaviour worth using on purpose: a new child copies the look of the node it grows from — its colours, font and border. So the children of the root come out blue like the root. To give each main branch its own colour, restyle the first-level node before you branch from it, and everything you grow off it after that inherits the colour.

5. Or start from text: import Mermaid

If the map already exists as an outline — notes, a list, something an LLM wrote — you can paste it as a Mermaid mind map instead of drawing it.

Click Import in the top bar, choose Mermaid, and paste text that starts with mindmap:

mindmap
  root((Launch plan))
    Marketing
      Blog post
      Social
    Product
      Onboarding

Click Generate diagram, and the nodes are laid out automatically as a tree, joined by the same curved lines as a map you drew. After that they are ordinary mind-map nodes, so everything above applies.

How the text is read:

  • Indentation sets the hierarchy. The least-indented line is the root; each deeper line is a child of the nearest shallower line above it.
  • Shape brackets are accepted, but only the text is used. root((Central idea)), [square] and (rounded) all become a node labelled with what is inside the brackets.
  • ::icon(...) and :::class lines are ignored.

It works in the other direction too: Export → Mermaid turns the board’s mind map back into Mermaid text you can paste into a README, a wiki, or anything else that renders Mermaid.

Start from the template instead

If you would rather edit than build, the mind map template opens a finished map — a central topic with four branches and their sub-points — straight in the editor. Rename the centre and start replacing branches.

Getting it out

Export → Image gives you a PNG or an SVG of the board, mind-map nodes and curved lines included — the format you want for a slide or a doc. Export → Diagram gives you the whole board as a JSON file you can import again later, with nothing lost.

Where the map lives

In your browser. The board is saved to localStorage about a second after you stop editing, there is no account, and nothing you type is sent anywhere. The cost of that: clear your site data and it is gone. If the map matters, keep an Export → Diagram file of it.