How to Create Mind Maps with Mermaid.js
Create mind maps with Mermaid.js for brainstorming, planning, and documentation. Learn syntax, shapes, icons, and practical examples.
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.