Mermaid Mindmap Syntax

What a Mermaid mindmap is for

A mindmap branches out from one central idea. Indentation sets the hierarchy, so you can write it like a nested outline and Mermaid lays it out radially.

Mindmap syntax

Basic example

mindmap
  root((Web performance))
    Network
      HTTP/2 and HTTP/3
      CDN caching
      Compression
    Rendering
      Critical CSS
      Lazy loading
    JavaScript
      Code splitting
      Tree shaking

Open this example in the Mermaid editor

More mindmap examples

Project kickoff outline

Different shapes mark different kinds of items; the hierarchy comes only from indentation.

mindmap
  root((Launch))
    Goals
      ::icon(fa fa-flag)
      10k signups
      Press coverage
    Risks))Risks((
      Payment provider delay
      Load on day one
    Team[Team]
      Design
      Engineering
      Marketing

Open “Project kickoff outline” in the editor

Common mistakes

• Indentation must be consistent: use spaces only, the same amount per level.
• There is exactly one root; a second unindented line is an error.

Use it in Markdown

```mermaid
mindmap
  root((Web performance))
    Network
      HTTP/2 and HTTP/3
      CDN caching
      Compression
    Rendering
      Critical CSS
      Lazy loading
    JavaScript
      Code splitting
      Tree shaking
```

GitHub, GitLab, Azure DevOps, Obsidian, Notion and docs generators such as Docusaurus and MkDocs (with a plugin) draw fenced mermaid blocks. Check it locally in the Markdown preview.

Other Mermaid diagrams

• Mermaid flowchart syntax
• Mermaid sequence diagram syntax
• Mermaid class diagram syntax
• Mermaid state diagram syntax
• Mermaid er diagram syntax
• Mermaid gantt chart syntax
• Mermaid pie chart syntax
• Mermaid timeline syntax
• Mermaid git graph syntax
• Mermaid user journey syntax
• Mermaid quadrant chart syntax
• Mermaid xy chart syntax

Sources

• Mermaid docs: Mindmap

Spotted a mistake? Email hello@devtoolsmith.com and we’ll fix it.

Frequently asked questions