Mermaid Mindmap Syntax Cheat Sheet (2026 Edition)

# Mermaid Mindmap Syntax Cheat Sheet (2026 Edition)

Mindmaps in Mermaid are fast to write and render beautifully. This cheat sheet covers the complete syntax — node shapes, nesting, icons, classes, and styling — so you can look up exactly what you need without wading through the official docs.

Bookmark this page. You'll use it every time you build a mindmap.

The Core Structure

Every Mermaid mindmap starts with mindmap and a root node. Everything else branches off from there.

mindmap
  root((Central Topic))
    Branch 1
      Sub-item A
      Sub-item B
    Branch 2
      Sub-item C
      Sub-item D
    Branch 3
      Sub-item E

What this does: Creates a basic mindmap with one root and three branches, each with child nodes. Indentation defines the hierarchy — deeper indent = child node. This is the skeleton every mindmap starts from.

Key rule: Root node is always the first item after mindmap. It can use any shape syntax (see below). Everything else is positioned by indentation level.

---

Node Shapes Quick Reference

This is the part most people don't know. Mermaid mindmaps support 6 different node shapes:

Here's all of them in one diagram:

mindmap
  root((Project Planning))
    [Requirements]
      Define scope
      Stakeholder input
    ((Research))
      Competitor audit
      User interviews
    {{Technical}}
      Architecture
      Stack choice
    )Risks(
      Timeline slippage
      Budget overrun

What this does: Shows four different node shapes in a single mindmap. Root is a circle (()), "Requirements" is a square [], "Research" is a circle (()), "Technical" is a hexagon {{}}, and "Risks" uses the bang/burst shape )text(. The shape helps categorize node types visually.

---

Nesting: How Deep Can You Go?

Mermaid supports unlimited nesting depth. In practice, 3-4 levels is readable. Beyond that, the diagram gets cramped.

mindmap
  root((Learning Plan))
    Frontend
      HTML
        Semantic tags
        Forms
        Accessibility
      CSS
        Flexbox
        Grid
        Animations
      JavaScript
        ES6+ syntax
        Async/await
        DOM manipulation
    Backend
      Node.js
        Express
        Middleware
      Databases
        SQL
        NoSQL

What this does: Shows a 4-level deep mindmap (root → category → topic → subtopic). The learning plan covers Frontend and Backend, each branching into technologies and their sub-skills. This is about the maximum useful depth before labels start overlapping.

---

Icons (FontAwesome Support)

You can add FontAwesome icons to nodes using ::icon(fa fa-iconname) syntax:

mindmap
  root((Tech Stack))
    ::icon(fa fa-server)
    Frontend
      ::icon(fa fa-code)
      React
      Vue
    Backend
      ::icon(fa fa-database)
      Node.js
      Python
    DevOps
      ::icon(fa fa-cloud)
      Docker
      Kubernetes
    Mobile
      ::icon(fa fa-mobile)
      iOS
      Android

What this does: Adds icons to branch nodes. The ::icon() line goes *below* the node it belongs to, indented one level. FontAwesome 5 class names work (fa, fas, fab). Note: icon rendering depends on your viewer — it works in mermaideditor.lol but may not show in all markdown renderers.

---

Classes: Custom Styling

Classes let you apply CSS styling to specific nodes. Define the class with classDef, apply it with :::classname:

mindmap
  root((Goals 2026))
    Revenue:::urgent
      Hit $10K MRR
      Launch paid tier
    Product:::inprogress
      Mobile app
      API v2
    Marketing:::planned
      SEO content
      Paid ads
    Team:::planned
      Hire designer
      Hire dev

classDef urgent fill:#ff4444,color:#fff,font-weight:bold
classDef inprogress fill:#ff9900,color:#fff
classDef planned fill:#4CAF50,color:#fff

What this does: Applies color-coded styles to branches based on priority/status. urgent gets red, inprogress gets orange, planned gets green. This turns a plain mindmap into a status dashboard. The classDef block goes at the bottom of the diagram.

Note: Class syntax in mindmaps uses triple-colon ::: (not double :: like in flowcharts). Easy to mix up.

---

Complete Syntax Summary

Here's everything in one reference diagram:

mindmap
  root((Mermaid Mindmap Syntax))
    Node Types
      Default text
      [Square brackets]
      ((Double parens = circle))
      {{Hexagon}}
      )Bang shape(
    Nesting
      Level 1
        Level 2
          Level 3
            Level 4
    Features
      ::icon(fa fa-star)
      Icons with fa classes
      Classes with triple colon
      Unlimited depth
    Tips
      Keep labels short
      Max 4 levels deep
      Use shapes for categories
      Icons for visual scanning

What this does: A self-referential mindmap that documents its own syntax. Good for sharing with teammates who are new to Mermaid.

---

Common Mistakes to Avoid

Wrong indentation: Mermaid is strict about consistent indentation. Mix tabs and spaces and the diagram will break or render weirdly. Stick to spaces (2 or 4, consistent throughout).

Root node not on the first line: The root must be the first node after mindmap. Any blank lines or comments before it can cause parse errors.

Wrong class syntax: Flowchart classes use ::: or ::: but mindmaps specifically need :::. Double-check this if styling doesn't apply.

Too many levels: Past level 4, most renderers start wrapping or overlapping labels. If your content needs more depth, split into multiple diagrams.

Icon names wrong: FontAwesome 4 icons (just fa-icon-name) and FA5 icons (fas fa-icon-name) have different prefixes. Check fontawesome.com if an icon isn't showing.

---

Combining Mindmaps with Other Diagram Types

Mindmaps are great for structure and brainstorming, but they don't replace other diagram types. Here's when to switch:

Use a mindmap when:

- You need to show hierarchy or categories at a glance

- You're brainstorming and don't know the exact structure yet

- Your audience needs a quick mental model, not a process

Switch to a flowchart when:

- You need arrows showing direction or flow between items

- There are decision points (yes/no branches)

- The order of steps matters

Switch to a timeline when:

- Your branches represent time periods or phases

- You want to show progress over time

- See the Mermaid Timeline Instructions guide

A common pattern: use a mindmap to explore and structure ideas, then turn the structured branches into a flowchart or timeline for execution planning.

Real-World Workflow: From Blank to Rendered Mindmap

Here's the typical flow when building a mindmap from scratch:

Step 1: Open mermaideditor.lol in your browser.

Step 2: Type mindmap and define your root — usually the central topic:

mindmap
  root((Your Topic))

Step 3: Add your main branches. Don't overthink — just braindump:

mindmap
  root((Your Topic))
    Branch 1
    Branch 2
    Branch 3

Step 4: Expand each branch with sub-nodes. Add shapes, icons, or classes as needed.

Step 5: Clean up — remove redundant items, merge overlapping branches, and check that the depth doesn't exceed 4 levels.

Step 6: Export SVG or copy the code into your docs.

Most mindmaps take 5-10 minutes from blank to finished. That's the power of text-based diagramming — no drag-and-drop, no alignment issues.

More Mindmap Resources

Want to see these patterns in action? Check out our post on 15 Mermaid Mindmap Examples with Real Use Cases. It has project planning, learning paths, business strategy maps, and more — all with working code.

For the full advanced techniques (custom themes, exported SVGs, integrating with docs tools), see our Mermaid Mindmap Advanced Examples.

---

Try this live in our free Mermaid Editor → mermaideditor.lol

All the code blocks in this cheat sheet work directly in our editor. Copy, paste, tweak.

---

*Related: Mermaid Cheat Sheet · Diagram Templates · Home*