🧠 Mermaid

Mind map

Organize ideas around a central topic

Open this example in the editor Generate one with AI

What is a Mind map?

A mind map radiates branches of ideas from a central concept. It is the fastest way to structure brainstorms, break down topics, plan content or map skills — and Mermaid makes it pure text.

Mind maps are a thinking tool more than a documentation one: workshops, content outlines, scoping a feature before anyone commits to it. In Mermaid the indentation doubles as a document outline, so the map and the eventual table of contents stay one artefact. The constraint to accept is that it is a tree — one root, one parent per node, no labels on branches. Anything that has to converge belongs in a flowchart.

Live example

Mermaid code

mindmap
  root((Product v2))
    Features
      AI generation
      Live preview
      Export
    Quality
      E2E tests
      Monitoring
    Growth
      SEO pages
      Public sharing

Live example

When to use it

Structure brainstorms and workshop outputs

Break down a product, project or learning topic

Plan content, documentation or team skills

Common mistakes

Two roots at the top level

A mind map has exactly one root. A second node at the same indentation fails with “There can be only one root”. If you genuinely have two centres, that is two mind maps — or a flowchart.

Parentheses inside plain node text

Growth (EU) renders as “EU”, because the parentheses are read as a rounded-shape delimiter and the text before them is discarded. Give the node an id and quote the label: g1["Growth (EU)"].

Tabs mixed with spaces

Hierarchy comes from indentation only, and a tab is not equivalent to spaces. Mixing them raises the same “There can be only one root” error, which points at the root and not at the line you broke.

Basic syntax

.mmd

mindmap
  root((Main idea))
    Branch A
      Leaf 1
    Branch B

mindmap root((Product v2))
There is exactly one root, and double parentheses draw it as a circle. Everything below it is positioned by indentation alone, with no arrows to declare.
Features[Squared] Live preview(Rounded)
Brackets around the text choose the node shape: [] square, () rounded, (()) circle, ))(( bang, {{}} hexagon. Use them sparingly, to mark a category rather than decorate.
Growth ::icon(fa fa-rocket)
An ::icon() line under a node adds an icon from an icon font the host page has loaded, usually Font Awesome. Without that font, nothing is drawn.
Retention:::urgent
A triple colon attaches a CSS class to a node, which is how you highlight one branch — risks, blockers, decisions — without touching the rest of the map.

Questions about this diagram

How does indentation work in Mermaid mind maps?

Hierarchy is defined purely by indentation: each deeper level becomes a child branch. Shapes like root((text)) customize node appearance.

Mind map or flowchart for brainstorming?

Mind maps for diverging (collecting and grouping ideas), flowcharts for converging (turning ideas into an ordered process).

Can I share a mind map with people who do not use Mermaid?

Export PNG or SVG, or publish the diagram as a public page and share the link. GitHub renders mind maps in Markdown too, though self-hosted tools running an older Mermaid may not know the syntax yet.

Can I control which side a branch appears on?

No. Placement is computed from the tree and there is no left, right or angle setting. Reordering branches in the source changes the result, but not predictably — accept the layout, or move to a flowchart.

How do I add icons to mind map nodes?

Add an ::icon(fa fa-book) line indented under the node. The icon font has to be loaded by whichever page renders the diagram; when it is missing, the node simply appears without an icon and nothing breaks.

Can I turn a mind map into a document outline?

Directly — the indentation already is the outline. Each level of the map becomes a heading level or a nested list, which is why mind maps work well for planning documentation before any of it is written.

Mind map or another diagram type?

Mind map or timeline?

Look at your first level. If the top branches are Q1, Q2, Q3 — or 2024, 2025 — you are drawing a timeline with extra indentation, and the tree adds nothing. Keep the mind map when the top level is themes and the nesting is what carries meaning.

Mind map or class diagram?

A mind map expresses one relationship: this belongs under that. It cannot say that a module depends on another, owns three of them, or implements an interface. As soon as the boxes need fields, cardinalities or a direction of dependency, use a class diagram.

Explore other diagram types

🔀 Flowchart 💬 Sequence diagram 🧩 Class diagram 🗄️ Entity-relationship diagram 🔄 State diagram 📅 Gantt chart 🥧 Pie chart 🌿 Git graph 🕰️ Timeline 🚶 User journey 🎯 Quadrant chart

Create your Mind map now

Describe it in plain language — the AI writes the Mermaid code for you.

Open Mermaid Studio