Mermaid Mindmap: Syntax, Examples & Templates
A mindmap captures a topic and everything hanging off it: a product’s feature areas, a study plan, the moving parts of a project. There is no sequence and no logic to evaluate — the value is in the structure, and in what the structure reveals is missing.
Basic syntax
The declaration is the single word mindmap. Indentation is the entire syntax: each level of indent becomes one level deeper in the tree, so the root sits at the left margin and its children one step in. The root line root((Frontend Skills)) uses double parentheses to render a circle; plain text lines render as rounded nodes. You do not declare nodes or edges at all — the hierarchy is implied purely by whitespace, which is why mindmaps are the fastest Mermaid diagram to write and the most sensitive to indentation mistakes.
Hierarchy and indentation
Keep the tree shallow and balanced. Two levels below the root covers most real uses — the examples above have a root, three branches, and two leaves each — and three levels is the practical maximum before the render becomes wide and the structure hard to hold in mind. Sibling lines must be indented by exactly the same amount to be siblings; an extra space quietly demotes a line to a child of its neighbor. A good test while editing: read any path from root to leaf as a sentence (“Frontend Skills → CSS → Grid”). If the sentence is awkward, the node is in the wrong place.
Common gotchas
Mixed tabs and spaces are the classic failure: the parser counts indentation strictly, and a single tab among spaces re-parents a whole subtree with no error message. Pick spaces and stick with them. Blank lines between branches are fine and improve readability, but trailing whitespace at the end of a line can change indentation invisibly — a real hazard when pasting from chat apps. Labels containing parentheses must be quoted or wrapped in shape syntax, so prefer plain words. And although mindmaps have no ids to collide, duplicate sibling labels still render as two identical nodes, which is rarely what you meant.
Tips for mobile editing
Mindmaps are the friendliest diagram type on a phone because every line is short and independent. Build breadth-first: type all the top-level branches first, render, then fill in leaves branch by branch. Keep each label to one or two words and let the structure carry the detail. When a branch grows past five children, ask whether it is really two branches. The cheatsheet shows the shape tokens for root and branch nodes.
For topics that have an order — a sequence of steps rather than a set of parts — a flowchart or a timeline expresses the progression a mindmap cannot.
Mindmap templates
Every template opens in the editor with the code pre-filled — edit it on your phone or desktop.
