Mermaid.js Mindmap Tutorial: Syntax + Examples (2026)
Learn Mermaid.js mindmap syntax in 5 minutes. Node shapes, icons, hierarchy — with copy-paste examples you can render instantly.
What Are Mind Maps?
Mind maps are radial diagrams that start from a central concept and branch outward into related topics, sub-topics, and details. They're excellent for:
- Brainstorming — Exploring ideas non-linearly
- Planning — Breaking down projects into components
- Learning — Organizing knowledge hierarchically
- Documentation — Showing topic relationships at a glance
Mermaid's mind map syntax uses indentation to define the hierarchy, making it incredibly intuitive to write.
Basic Syntax
mindmap
root((Project Plan))
Design
Wireframes
Mockups
User Testing
Development
Frontend
Backend
Database
Launch
Marketing
Documentation
MonitoringThe rules are simple:
- Start with
mindmap - The first indented item is the root node
- Deeper indentation creates child branches
- Siblings share the same indentation level
Node Shapes
Mind map nodes support different shapes:
mindmap
root((Circle Root))
(Rounded Rectangle)
[Square]
Default shape
))Bang((
{{Hexagon}}Shape Reference
- Default — Just text, no brackets (rectangle with rounded corners)
[Square]— Square/rectangle(Rounded)— Rounded rectangle((Circle))— Circle))Bang((— Explosion/bang shape{{Hexagon}}— Hexagon
Practical Example: Software Architecture
mindmap
root((Web Application))
Frontend
React SPA
Components
State Management
Routing
Styling
Tailwind CSS
Design System
Build
Vite
TypeScript
Backend
API Server
Express.js
REST endpoints
Authentication
Database
PostgreSQL
Redis Cache
Migrations
Services
Email Service
File Storage
Search Engine
DevOps
CI/CD
GitHub Actions
Automated Tests
Infrastructure
AWS
Docker
Kubernetes
Monitoring
Logging
Alerting
APMPractical Example: Learning Path
mindmap
root((Learn Web Development))
HTML & CSS
Semantic HTML
Flexbox & Grid
Responsive Design
Accessibility
JavaScript
ES6+ Syntax
DOM Manipulation
Async/Await
Fetch API
Frameworks
React
Components
Hooks
Next.js
Vue
Composition API
Nuxt
Backend
Node.js
Express
Authentication
Databases
SQL Basics
PostgreSQL
MongoDB
Tools
Git & GitHub
VS Code
Chrome DevTools
Terminal/CLIPractical Example: Product Feature Map
mindmap
root((SaaS Product))
Authentication
Email/Password
OAuth (Google, GitHub)
Two-Factor Auth
SSO (Enterprise)
Dashboard
Analytics Charts
Activity Feed
Quick Actions
Notifications
Projects
Create/Edit
Team Members
Permissions
Templates
Billing
Plans & Pricing
Payment Processing
Invoices
Usage Tracking
Settings
Profile
Team Management
Integrations
API KeysPractical Example: Content Strategy
mindmap
root((Content Strategy 2025))
Blog
Technical Tutorials
Case Studies
Industry Analysis
Product Updates
Social Media
Twitter/X
Dev Tips
Thread Content
LinkedIn
Company Updates
Thought Leadership
YouTube
Video Tutorials
Product Demos
Email
Weekly Newsletter
Product Announcements
Onboarding Sequence
Community
Discord Server
GitHub Discussions
Meetups & WebinarsPractical Example: Sprint Retrospective
mindmap
root((Sprint 14 Retro))
What Went Well
Shipped auth feature on time
Good code review process
Zero production incidents
What Could Improve
Standup meetings too long
Unclear acceptance criteria
Late design handoffs
Action Items
Timebox standups to 10 min
Add AC template to tickets
Include design in sprint planningTips for Effective Mind Maps
1. Keep the Hierarchy Shallow
3-4 levels deep is ideal. More than that becomes hard to read and defeats the purpose of a quick visual overview.
2. Use Concise Labels
Mind map nodes should be short — 1-4 words each. If you need detailed descriptions, link to separate documents.
3. Balance the Branches
Try to have 3-7 main branches from the root, each with a similar number of children. Lopsided mind maps are hard to scan.
4. Start with the Root Concept
The root should be the core topic. Not a generic label like "Stuff" but a specific concept like "Q1 Marketing Plan" or "Microservice Architecture".
5. Use Shapes for Emphasis
Use circles ((...)) for the root, and default shapes for branches. Reserve special shapes like bangs ))...(( for items that need attention.
6. Order Matters
Put the most important branches first (left side in the rendered output). Mermaid renders branches in the order you write them.
Mind Maps vs Flowcharts
Use a mind map when:
- You're brainstorming or exploring ideas
- The hierarchy is the main relationship
- You want a quick, non-linear overview
- There's no specific flow or sequence
Use a flowchart when:
- There's a process with steps
- Decision points exist
- The sequence/order matters
- Loops or feedback paths exist
Mind Maps in Documentation
Mind maps are particularly useful in:
- Project READMEs — Feature overview at a glance
- Architecture docs — System component breakdown
- Onboarding guides — "Here's everything you need to know"
- Meeting notes — Capturing discussion topics and decisions
- Planning docs — Breaking down work into categories
GitHub README Example
## Feature Overview
mindmap
root((MyApp))
Auth
Login
Register
OAuth
Dashboard
Charts
Export
API
REST
GraphQL
Limitations
- No custom colors — Mermaid assigns colors automatically by branch
- No icons — Unlike GUI mind map tools, you can't add icons to nodes
- Limited layout control — The auto-layout engine decides positioning
- No folding/expanding — All branches are always visible
- Relatively new — Mind maps were added in Mermaid v9.3, so older platforms may not support them
For complex, interactive mind maps with custom styling, consider dedicated tools like XMind, MindMeister, or Coggle. Mermaid mind maps are best for documentation — quick, text-based, and version-controlled.
Conclusion
Mermaid mind maps let you create visual hierarchies with nothing but indented text. They're perfect for brainstorming, planning, and documentation where you need a quick overview of how topics relate. Start with the central concept, branch out 3-4 levels, and keep labels concise.
Try it now in our free Mermaid Live Editor →
Additional Guide: Mermaid Mindmap Examples: 12 Copy-Paste Diagrams [2026 Syntax Guide]
Why Mermaid.js Mindmaps Are a Game-Changer
Mindmaps are one of the most effective ways to visually organize ideas, and Mermaid.js brings them into the world of code-based diagramming. Unlike traditional drag-and-drop mindmap tools, Mermaid mindmaps are text-defined, version-controllable, and embeddable anywhere Markdown is supported — from GitHub READMEs to Notion pages to your team's documentation platform.
If you've already explored the basics of Mermaid mindmaps, this guide takes you further with advanced patterns, real-world examples, and practical use cases that you can copy, adapt, and integrate into your workflow today.
Quick Syntax Refresher
Mermaid mindmaps use indentation to define hierarchy. Each level of indentation creates a child node:
mindmap
root((Central Topic))
Branch A
Sub-topic 1
Sub-topic 2
Branch B
Sub-topic 3Node shapes add meaning:
- ((text)) — Cloud shape (great for root nodes)
- (text) — Rounded rectangle
- [text] — Square
- )text( — Bang shape (for emphasis)
- {{text}} — Hexagon
Now let's put this into practice.
Use Case 1: Brainstorming Sessions
Mindmaps shine brightest during brainstorming. Instead of messy whiteboard photos or lost sticky notes, capture ideas in a structured, shareable format.
Example: Product Feature Brainstorming
mindmap
root((Mobile App v2.0))
User Experience
Onboarding Flow
Interactive Tutorial
Skip Option
Progress Indicator
Navigation
Bottom Tab Bar
Gesture Support
Search Everywhere
Performance
Load Time
Lazy Loading
Image Compression
CDN Integration
Offline Mode
Local Cache
Sync Queue
Conflict Resolution
Monetization
Freemium Model
Free Tier Limits
Premium Features
Annual Discount
In-App Purchases
Cosmetic Items
Power-UpsThis mindmap captures the output of an entire brainstorming session in a format that can live in your project repo. Anyone joining the team later can instantly understand the thinking behind your feature decisions.
Why This Beats Traditional Tools
- Version history — Git tracks every change to the brainstorm
- Async collaboration — Team members add branches via pull requests
- No tool lock-in — It's just text; move it anywhere
- Searchable —
grepthrough your brainstorms across projects
Use Case 2: Project Planning & Breakdown
Work breakdown structures (WBS) map naturally to mindmaps. Use them to decompose large projects into manageable pieces.
Example: Website Redesign Project Plan
mindmap
root((Website Redesign))
Discovery
Stakeholder Interviews
Analytics Review
Competitor Analysis
User Surveys
Design
Wireframes
Homepage
Product Pages
Checkout Flow
Visual Design
Color Palette
Typography
Component Library
Prototyping
Interactive Mockups
Usability Testing
Development
Frontend
React Components
Responsive Layout
Accessibility Audit
Backend
API Migration
Database Schema
Authentication
Infrastructure
CI/CD Pipeline
Staging Environment
CDN Setup
Launch
QA Testing
Content Migration
SEO Redirects
Monitoring SetupEach branch becomes a workstream. Each leaf becomes a task. This single diagram replaces a lengthy project plan document and gives everyone an at-a-glance view of the full scope.
Use Case 3: Note-Taking & Knowledge Organization
Mermaid mindmaps are exceptional for organizing notes from meetings, courses, or research. The hierarchical structure forces you to identify relationships between concepts.
Example: Meeting Notes — Quarterly Planning
mindmap
root((Q2 Planning))
Goals
Revenue +20%
Launch 3 Features
Reduce Churn 5%
Key Decisions
Hire 2 Engineers
Pause Marketing Spend
Partner with Agency X
Risks
Supply Chain Delays
Competitor Launch
Team Burnout
Action Items
)Draft Hiring JDs(
)Update Roadmap(
)Schedule Partner Call(Notice the use of )text( (bang shape) for action items — this visually distinguishes them from informational nodes. Small formatting choices like this make mindmaps scannable.
Use Case 4: Technical Architecture Overview
Mindmaps offer a lighter alternative to formal architecture diagrams when you need a quick, high-level view.
Example: Microservices Architecture
mindmap
root((E-Commerce Platform))
API Gateway
Rate Limiting
Authentication
Request Routing
Services
User Service
Registration
Profile Management
OAuth Integration
Product Service
Catalog
Search Index
Recommendations
Order Service
Cart Management
Payment Processing
Order Tracking
Data Layer
PostgreSQL
Users
Orders
Redis
Session Cache
Rate Limits
Elasticsearch
Product Search
Infrastructure
Kubernetes
Datadog Monitoring
AWS S3 StorageThis isn't a replacement for detailed system design documents, but it's perfect for onboarding new team members or presenting to non-technical stakeholders.
Use Case 5: Decision Making & Analysis
Structure your thinking around complex decisions using mindmaps.
Example: Technology Stack Decision
mindmap
root((Frontend Framework))
React
Pros
Huge Ecosystem
Strong Job Market
Meta Backing
Cons
Boilerplate Heavy
Decision Fatigue
Vue
Pros
Gentle Learning Curve
Great Documentation
Single File Components
Cons
Smaller Ecosystem
Fewer Enterprise Adopters
Svelte
Pros
No Virtual DOM
Less Code
Built-in Animations
Cons
Smaller Community
Fewer Libraries
Less Battle TestedLaying out pros and cons visually helps teams move past analysis paralysis and make informed decisions.
Best Practices for Effective Mindmaps
- Keep the root node focused. A single, clear central topic produces better mindmaps than a vague one. "Q2 Marketing Plan" beats "Marketing Stuff."
- Limit depth to 4 levels. Beyond four levels, mindmaps become hard to read. If a branch is too deep, consider breaking it into a separate mindmap.
- Use node shapes intentionally. Reserve special shapes (clouds, bangs, hexagons) for specific meanings — don't use them randomly.
- Combine with other diagram types. Start with a mindmap for brainstorming, then create flowcharts or sequence diagrams for the detailed processes you identify.
- Store mindmaps alongside code. Keep them in
docs/folders in your repos so they stay current with the codebase.
- Review and prune regularly. Mindmaps should evolve. Remove completed items, add new branches, and keep them as living documents.
Mermaid Mindmap Limitations to Know
- No cross-links — You can't connect nodes across branches (use flowcharts for that)
- No icons on all renderers — Icon support (
::icon()) varies by platform - Fixed layout — You can't control node positioning; Mermaid handles layout automatically
- No color per node — Styling is applied at the branch level, not individual nodes
- Large mindmaps get crowded — Keep them focused; split large topics into multiple diagrams
Conclusion
Mermaid.js mindmaps bring the power of visual thinking into your text-based workflow. Whether you're brainstorming features, planning projects, organizing meeting notes, or evaluating technology decisions, mindmaps provide a fast, versionable, and shareable way to structure your thoughts.
The key is matching the use case to the tool: use mindmaps for hierarchical exploration and switch to flowcharts, sequence diagrams, or Gantt charts when you need process flows or timelines.
Try building your own mindmap in our free Mermaid editor →
Additional Guide: Mermaid Mindmap Examples: 15 Real Use Cases with Code
Mindmaps are underused in technical documentation. Most people reach for flowcharts when a mindmap would actually communicate the structure better. These 15 examples cover the real use cases where Mermaid mindmaps shine — all with copy-paste code.
For the complete syntax reference, see the Mermaid Mindmap Syntax Cheat Sheet.
1. Project Planning Overview
mindmap
root((Project Alpha))
Scope
Feature list defined
Out-of-scope documented
Team
Frontend: 2 devs
Backend: 2 devs
Design: 1 designer
Timeline
Q1: Discovery
Q2: Build
Q3: Launch
Risks
Key person dependency
Third-party API reliabilityWhat this does: A project overview mindmap with four branches: Scope, Team, Timeline, Risks. Good for project kick-off meetings — paste this into a presentation or Notion page and it renders instantly.
---
2. Software Architecture Overview
mindmap
root((System Architecture))
Frontend
React SPA
Mobile app
Admin dashboard
Backend
REST API
GraphQL layer
Background jobs
Data
PostgreSQL
Redis cache
S3 file storage
Infrastructure
AWS ECS
CloudFront CDN
Route53 DNSWhat this does: A high-level architecture map showing four layers of a system. Useful for onboarding new engineers or explaining the system to non-technical stakeholders. Faster to create and update than an architecture diagram.
---
3. Learning Curriculum
mindmap
root((Web Dev Curriculum))
Foundations
HTML semantics
CSS layouts
Git basics
Frontend
JavaScript
ES6+ features
DOM manipulation
React
Components
Hooks
State management
Backend
Node.js
REST APIs
Databases
Deployment
Docker
CI/CD
Cloud platformsWhat this does: A 4-level deep curriculum map. The React branch goes 3 levels deep (Frontend → React → subtopics). This is the maximum depth you'd want in a readable mindmap. Instructors use this as a course outline overview.
---
4. Business Strategy Map
mindmap
root((2026 Strategy))
Revenue Growth
Upsell to Pro tier
New market entry
Enterprise deals
Product
Mobile app launch
API marketplace
Integrations
Marketing
SEO content engine
Paid acquisition
Partnerships
Team
Hire 5 engineers
Hire Head of Sales
Advisory boardWhat this does: A strategy map that a CEO or founder could build in a board meeting. Four pillars — Revenue, Product, Marketing, Team — each with 3 strategic initiatives. Much faster to update than a strategy slide deck.
---
5. Technical Debt Map
mindmap
root((Tech Debt))
Critical
Auth system rewrite
Database migration
High Priority
Test coverage below 40%
Outdated dependencies
Medium Priority
Inconsistent API responses
Missing error handling
Low Priority
Old README files
Console.log statementsWhat this does: A tech debt categorization mindmap. Instead of a spreadsheet, this gives an instant visual of the debt landscape. Engineering managers use this in quarterly planning to decide what to tackle and when.
---
6. Competitive Analysis
mindmap
root((Competitor Map))
Direct Competitors
Competitor A
Strong: UI
Weak: Pricing
Competitor B
Strong: Integrations
Weak: Support
Indirect Competitors
Notion
Draw.io
Our Advantages
Mermaid-native
Zero friction
Free tier
Market Gaps
Mobile editing
Team collaboration
Template libraryWhat this does: A competitive landscape mindmap. Direct competitors get sub-branches for strengths and weaknesses. Indirect competitors, our advantages, and market gaps are also captured. Good for product strategy sessions.
---
7. Meeting Agenda
mindmap
root((Weekly Sync))
Updates
Engineering
Product
Design
Blockers
Active blockers
Needs decision
Decisions Needed
Budget approval
Launch date
Action Items
Owners identified
Deadlines setWhat this does: A meeting agenda as a mindmap. Works better than a bullet list for recurring meetings because the visual structure makes it easy to see at a glance what section you're in. Paste into a shared Notion doc before the meeting.
---
8. SaaS Pricing Model
mindmap
root((Pricing Tiers))
Free
5 diagrams
Export PNG
No team features
Starter $9/mo
50 diagrams
Export SVG
Shareable links
Pro $29/mo
Unlimited diagrams
All export formats
Team workspace
Priority support
Enterprise
Custom limits
SSO
SLA guarantee
Dedicated supportWhat this does: A pricing tier mindmap. Good for planning a SaaS pricing structure or explaining it to investors/advisors. Each tier branch has its feature list as leaf nodes.
---
9. Research Question Breakdown
mindmap
root((Research Question))
What we know
Previous studies
Industry reports
Internal data
What we don't know
User motivations
Long-term behavior
Edge case scenarios
Research Methods
Surveys
Interviews
Usage analytics
Expected Outputs
Insight report
Journey map
RecommendationsWhat this does: Frames a research question from four angles — what's known, what's unknown, methods, and outputs. Researchers use this to structure proposals and explain their study design to non-research stakeholders.
---
10. API Documentation Map
mindmap
root((Payments API))
Authentication
API keys
OAuth 2.0
Webhooks
Endpoints
POST /charges
GET /charges/{id}
POST /refunds
GET /customers
Error Handling
4xx client errors
5xx server errors
Retry logic
SDKs
JavaScript
Python
Ruby
PHPWhat this does: An API documentation structure map. Before writing the full API docs, build this mindmap to ensure all sections are covered. Also useful as a navigation index at the top of a docs page.
---
11. Personal Knowledge Management
mindmap
root((My Knowledge Base))
Engineering
System design patterns
Code review notes
Useful libraries
Business
Product frameworks
Growth tactics
Books read
Side Projects
Ideas backlog
Active projects
Completed work
Learning Queue
Courses in progress
Books to read
Videos savedWhat this does: A personal knowledge base structure. If you use Notion, Obsidian, or Logseq for notes, this mindmap can represent your entire folder/tag structure. Build this first, then create the actual notes.
---
12. Content Strategy Map
mindmap
root((Content Strategy))
Audience
Developers
Product managers
Technical writers
Content Types
Blog posts
Video tutorials
Newsletter
Twitter threads
Topics
Diagram how-tos
Use case examples
Tool comparisons
Distribution
SEO organic
Email subscribers
Social sharing
Dev communityWhat this does: A content strategy overview for a technical blog. The four branches — audience, content types, topics, distribution — are the pillars of any content strategy. This maps out the whole strategy in one view.
---
13. Bug Report Classification
mindmap
root((Bug Tracker))
Critical P0
Data loss
Security vulnerability
Payment failure
High P1
Core feature broken
Auth issues
Performance < 1s
Medium P2
UI glitches
Edge case failures
Slow queries
Low P3
Cosmetic issues
Minor UX friction
Outdated docsWhat this does: A bug priority classification system as a mindmap. Engineering teams use this to align on what P0/P1/P2/P3 means before sprint planning. Consistent definitions reduce debate over priorities.
---
14. Hiring Plan
mindmap
root((Hiring Plan Q3))
Engineering
Senior Backend Dev
Must: Node.js, PostgreSQL
Nice: Kubernetes
Frontend Dev
Must: React, TypeScript
Product
Product Manager
Must: B2B SaaS exp
Nice: Data-driven background
Marketing
Content Writer
Must: Technical writing
SEO experienceWhat this does: A structured hiring plan. Each role branch shows requirements split into "Must have" and "Nice to have". Much clearer than a spreadsheet when reviewing with leadership.
---
15. Post-Mortem Analysis
mindmap
root((Incident Post-Mortem))
Timeline
Detection
Response
Resolution
Root Causes
Primary cause
Contributing factors
Impact
Users affected
Revenue impact
SLA breach
Action Items
Immediate fixes
Process improvements
Monitoring additions
What Went Well
Fast detection
Clear comms
Team collaborationWhat this does: A post-mortem structure mindmap. After any significant incident, this ensures you cover all five post-mortem categories. The "What Went Well" branch is important — post-mortems should reinforce good practices, not just catalog failures.
---
Which Examples Are Most Useful?
The most immediately practical examples by role:
- Engineers: Examples 2 (architecture), 5 (tech debt), 10 (API docs), 15 (post-mortem)
- Product managers: Examples 1 (project planning), 4 (strategy), 6 (competitive), 8 (pricing)
- Content teams: Examples 12 (content strategy), 7 (meeting agenda)
- Researchers: Examples 9 (research question), 11 (knowledge base)
---
Try these live in our free Mermaid Editor → mermaideditor.lol
All 15 examples above work directly in the editor. Pick one relevant to your work and customize it in 5 minutes.
---
*Related: Mermaid Mindmap Syntax Cheat Sheet · Mermaid Cheat Sheet · Templates · Home*
Additional Guide: 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 EWhat 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:
| Shape | Syntax | Renders As |
|---|---|---|
| Default | `Node text` | Rounded rectangle |
| Circle | `((Node text))` | Circle |
| Bang | `)Node text(` | Explosion/burst |
| Cloud | `)Node text)` | Cloud shape |
| Hexagon | `{{Node text}}` | Hexagon |
| Square | `[Node text]` | Square |
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 overrunWhat 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
NoSQLWhat 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
AndroidWhat 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:#fffWhat 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 scanningWhat 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 3Step 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*