Mermaid Mindmap Syntax: Root, Branches, Node Shapes, and Icons

Example

mindmap
  root((MermanDraw))
    Editor
      CodeMirror 6
      Monokai Pro theme
      Mermaid syntax highlight
    Diagrams
      7 themes
      Layout sliders
      Pan & Zoom
    Export
      SVG
      PNG
    Share
      Shareable link
      OG preview
      180-day expiry

Open in editor → Cheatsheet →

Syntax

Hierarchy by indentation

mindmap
  root((Launch plan))
    Marketing
      Blog posts
      Social
    Product
      Onboarding
      Pricing page
    Support
      Docs
      Chat widget

Use consistent indentation (two or four spaces). Each deeper level becomes a child of the nearest shallower line above it.

Try this snippet →

Node shapes and icons

mindmap
  root)Shapes(
    [Square]
    (Rounded)
    ((Circle))
    ))Bang((
    )Cloud(
    {{Hexagon}}
    Plain text
      ::icon(fa fa-book)

Wrap the label to choose a shape. ::icon(...) on the line below a node adds a Font Awesome icon where the renderer loads it.

Try this snippet →

Common mistakes

These are the parse errors that come up most, including in code written by ChatGPT and Claude. Paste any failing diagram into the editor and it marks the offending line.

Two root nodes (two lines at the top indentation).

Fix: A mindmap has exactly one root. Indent everything else under it.
Mixed tabs and spaces.

Fix: Pick spaces. A tab counts as a different width than you expect and the hierarchy jumps.
Special characters such as ( or [ in plain labels.

Fix: Those characters start a shape. Use a shape wrapper and put the text inside, or drop the character.

Real-world examples

Complete, copy-ready mindmaps for common situations. Each one opens in the editor with a click.

Quarterly Product Roadmap Mindmap with Themes

A Mermaid mindmap for a three-quarter product roadmap: a central node, one branch per quarter, and three initiatives under each, readable at a glance in a deck.

Browse all examples →

FAQ

Can I control the layout or direction?

No. Mermaid places branches around the root automatically. Reorder the source lines to change which branches sit next to each other.

How deep can a mindmap go?

Any depth parses, but beyond four levels the outer ring gets crowded. Split a deep branch into its own mindmap.