Mind map
A mind map is a diagram used to organize information graphically and show the relationships between the parts of a whole. It is usually created around a topic, which is drawn in the center of a blank page, and then related ideas are added around it. The main ideas connect directly to the topic, and other ideas branch out from these main ideas.
Mind map example:
Copy
Embed
mindmap
root((mindmap))
Origins
Long history
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
Syntax
The syntax for creating a mind map is simple and relies on indentation to set the levels in the hierarchy.
In the example below, you can see 3 different levels. The first level starts from the left of the text; the second level has two lines starting from the same column, defining node A. The third level text is indented more than the previous lines, defining nodes B and C.
Copy
Embed
mindmap
Root
A
B
C
In short, this is a simple text outline in which the root node is named Root and has one child node A. A in turn has two children, B and C. In the diagram below, we can see it rendered as a mind map.
Copy
Embed
mindmap
Root
A
B
C
In this way, we can use a text outline to generate a hierarchical mind map.
Different shapes
A Mermaid mind map can use different shapes to display nodes. When specifying a node shape, the syntax is similar to a flowchart node: first an ID, then the shape definition, with the text placed in the shape's display box
A mind map can display the following shapes:
Rectangle
Copy
Embed
mindmap
id[I am a square]
Rounded rectangle
Copy
Embed
mindmap
id(I am a rounded square)
Circle
Copy
Embed
mindmap
id((I am a circle))
Explosion bubble
Copy
Embed
mindmap
id))I am a bang((
Cloud
Copy
Embed
mindmap
id)I am a cloud(
Hexagon
Copy
Embed
mindmap
id{{I am a hexagon}}
Default
Copy
Embed
mindmap
I am the default shape
Icons and classes
Icons
As with flowcharts, you can add icons to nodes, but using the updated syntax. Font-based icon styles are added during integration, so that they are available on web pages. You can add them to mind map nodes using the ::icon() syntax.
Copy
Embed
mindmap
Root
A
::icon(fa fa-book)
B(B)
::icon(mdi mdi-skull-outline)
Class
Similarly, the syntax for adding classes is similar to that of flowcharts. You can use three colons ::: to add classes, with class names separated by spaces. In the example below, one of the nodes has two custom classes attached: urgent turns the background red and the text white; large increases the font size:
Copy
Embed
mindmap
Root
A[A]
:::urgent large
B(B)
C
Markdown strings
The Markdown string feature enhances mind maps by providing a more flexible string type, supporting text formatting options such as bold and italic, and the ability to automatically wrap text within labels.
Copy
Embed
mindmap
id1["`**Root** with
a second line
Unicode works too: 🤓`"]
id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
id3[Regular labels still works]
Formatting:
- To bold text, use double asterisks ** before and after the text.
- To italicize text, use a single asterisk * before and after the text.
