Mermaid mindmaps reached stable in Mermaid 10.5. They use indentation for hierarchy and shape prefixes for node shape — cleaner than PlantUML’s * / ** syntax. This article gives you a copy-pasteable template covering roots, indentation, shapes, icons, theming, and worked examples.
One-liner introduction
1 2 3 4 5 6 7 8 9 10 11 12
mindmap root((Mermaid mindmap)) Origin GitHub repo v10.5 GA Syntax indentation = hierarchy prefix = shape Use cases knowledge mapping project breakdown decision trees
Source:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
```mermaid mindmap root((Mermaid mindmap)) Origin GitHub repo v10.5 GA Syntax indentation = hierarchy prefix = shape Use cases knowledge mapping project breakdown decision trees ```
Root node forms
Syntax
Shape
When to use
root(text)
rounded rectangle
default
root((text))
circle
emphasise the centre
root[text]
rectangle
categorical root
root((text))icon:fa fa-book
circle + FontAwesome icon
branded centre
1 2 3 4 5 6 7
mindmap root((central topic)) child A child B root[category root] group A group B
Source:
1 2 3 4 5 6 7 8 9
```mermaid mindmap root((central topic)) child A child B root[category root] group A group B ```
Indentation and depth
Hierarchy is controlled by space indentation. Pick 2 or 4 spaces and stick with it. Mixing tabs and spaces breaks the parser.
1 2 3 4 5 6 7 8 9
mindmap root((depth)) level one A level two A1 level three A1a level three A1b level two A2 level one B level two B1
Source:
1 2 3 4 5 6 7 8 9 10 11
```mermaid mindmap root((depth)) level one A level two A1 level three A1a level three A1b level two A2 level one B level two B1 ```
Depth is theoretically unlimited, but three levels max is the visual sweet spot.
Node shape prefixes
Prefix the node text to render it in a particular shape:
Prefix
Shape
text
rounded rectangle (default)
((text))
circle
([text])
stadium
[text]
rectangle
((text)))
bang / explosion
>text]
flag / asymmetric
In practice:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
mindmap root((shape reference)) default plain text circle ((key concept)) stadium ([a long descriptive sentence fits here]) rectangle [category label] bang )))warning))) flag >pinned]
Source:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
```mermaid mindmap root((shape reference)) default plain text circle ((key concept)) stadium ([a long descriptive sentence fits here]) rectangle [category label] bang )))warning))) flag >pinned] ```
Icons
Mermaid ships with the FontAwesome icon library. Prefix a node with ::icon(fa fa-xxx) to attach an icon:
1 2 3 4 5 6 7 8 9 10 11 12 13
mindmap root((system architecture)) Frontend ::icon(fa fa-browser) React ::icon(fa fa-mobile) mobile Backend ::icon(fa fa-server) Go API Database ::icon(fa fa-database) PostgreSQL
Source:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
```mermaid mindmap root((system architecture)) Frontend ::icon(fa fa-browser) React ::icon(fa fa-mobile) mobile Backend ::icon(fa fa-server) Go API Database ::icon(fa fa-database) PostgreSQL ```
Common icons: fa fa-book, fa fa-cog, fa fa-rocket, fa fa-bug, fa fa-check, fa fa-times, fa fa-question, fa fa-exclamation.
classDef colours
Same as flowchart: use classDef to style nodes. Scope can be an entire subtree:
