Mermaid Mindmap Tutorial: Text-Based Mind Maps with Indentation
Mermaid's mindmap uses nothing but indentation to build a hierarchy, so an outline you already have becomes a mind map with almost no extra syntax.
Mind maps are usually drag-and-drop affairs, which is fine until you have twenty ideas and spend more time arranging boxes than thinking. Mermaid's mindmap diagram flips that: you type an indented outline, and the structure of the indentation becomes the structure of the map. There are no arrows to draw and no connections to declare - a child node is simply a line indented further than its parent, which means the diagram reads like the outline you would have written anyway.
This tutorial covers the mindmap syntax end to end, including the node shapes and icon support that make a map more than a plain tree. You can paste any example into the Mermaid editor at /diagram-tools/mermaid-editor to watch it render, and inside Atlas Diagram Studio at /diagrams the result is a fully editable diagram. If you prefer a visual-first canvas, the mind map maker at /diagram-tools/mind-map-maker offers drag-and-drop, while the AI diagram generator at /diagram-tools/ai-diagram-generator can turn a topic into a starter map you then refine.
Indentation is the whole idea
A mindmap starts with the keyword "mindmap", and the very next line is the root node - the center of the map. Every line after that is a node, and its depth in the tree is determined solely by how far it is indented relative to the line above. Indent further to create a child; return to a shallower indent to create a sibling or move back up the tree. Mermaid infers the entire parent-child structure from whitespace, so there is nothing else to declare.
Consistency is the one rule that matters. As long as you indent children deeper than their parents, Mermaid builds the hierarchy correctly, but mixing tabs and spaces or being inconsistent about depth can confuse the parser. Pick a fixed indent - two spaces per level is common - and stick to it, and the map will match your mental outline exactly. Because the root anchors the map, keep it short: a single central concept from which everything else branches.
Node shapes and icons
By default nodes render as plain rounded text, but Mermaid gives each node an optional shape by wrapping the text in shape delimiters, the same idea as flowchart node shapes. This lets you distinguish kinds of ideas visually without any separate styling step, and combined with icons it turns a plain tree into an expressive map.
The list below shows the shape and decoration syntax. Apply shapes sparingly - a map where every node is a different shape is harder to read than one that uses shape to mark just a couple of meaningful categories.
- A plain node is just text on an indented line, for example " Marketing".
- Wrap text in square brackets for a square node: "[Square idea]".
- Wrap in double parentheses for a rounded node: "((Rounded idea))".
- Wrap in double parentheses variants for cloud and bang shapes, such as ")Cloud(" and "))Bang((".
- Attach a Font Awesome or Material icon with the "::icon()" syntax on the line after a node, e.g. "::icon(fa fa-book)".
- Add CSS classes with ":::className" after a node to apply custom styling.
- Keep the root node short - it is the visual anchor everything radiates from.
Growing a map without losing the thread
The strength of a text mindmap is how fast it grows during actual thinking. When a new idea occurs, you type it at the right indent and it slots into place; there is no reaching for the mouse to draw a branch. This keeps you in the flow of ideation, which is the entire point of a mind map - to externalize thought as quickly as it arrives. Reorganizing is equally cheap: cut and paste a block of indented lines to move an entire branch elsewhere.
A common workflow is to brainstorm freely in the Mermaid editor at /diagram-tools/mermaid-editor, let the map get messy, and then restructure by re-indenting. Because the hierarchy is nothing but indentation, promoting a sub-idea to a main branch is a matter of removing a level of indent from it and its children. When the map is settled, bring it into Atlas Diagram Studio at /diagrams to style and share it, or export it for a document.
Mindmap versus other structures
A mindmap is specifically a tree radiating from one center, which makes it ideal for brainstorming, topic breakdowns, note-taking, and organizing the shape of a subject before writing about it. What it deliberately cannot do is show cross-links between distant branches or arbitrary relationships - every node has exactly one parent. If your ideas connect across the tree, a flowchart or a graph is the right structure, and the flowchart maker at /diagram-tools/flowchart-maker handles those free-form connections.
The mindmap also pairs naturally with other diagram types as a first step: sketch the topic as a mindmap, then convert the parts that are really processes into flowcharts. For the full range of what you can express in the same text-based way, the complete Mermaid guide at /guides/mermaid-js-complete-guide is the reference, and the guide on turning plain English into diagrams at /guides/text-to-diagram-with-ai covers generating a starter map from a prompt.