Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/mermaid-js/mermaid/llms.txt

Use this file to discover all available pages before exploring further.

A mindmap is a diagram used to visually organize information into a hierarchy, showing relationships among pieces of the whole. Major ideas are connected directly to the central concept, and other ideas branch out from those major ideas.
Mindmaps are experimental. The syntax is stable except for icon integration.

​
Basic example

​
Syntax overview

The syntax relies on indentation to set levels in the hierarchy: 
mindmap
    Root
        A
            B
            C
This creates a simple hierarchy:
  • Root node
    • Child A
      • Grandchild B
      • Grandchild C

​
Node shapes

Mindmaps support various node shapes:

​
Square

​
Rounded square

​
Circle

​
Bang

​
Cloud

​
Hexagon

​
Default

​
Icons and classes

​
Icons

Add icons to nodes using the ::icon() syntax:
Icon fonts must be configured by the site administrator. This feature is experimental.

​
Classes

Add CSS classes using triple colon syntax:
Classes must be supplied by the site administrator.

​
Markdown strings

Markdown strings support text formatting and automatic wrapping: Formatting:
  • Use **text** for bold
  • Use *text* for italics
  • Use newlines instead of <br> tags for line breaks

​
Indentation handling

Mermaid handles unclear indentation by finding the first node with smaller indentation: In this example, C becomes a sibling of B (both children of A) because A is the first parent with smaller indentation than C.

​
Layouts

Mermaid supports a Tidy Tree layout for mindmaps:
See the Tidy Tree Configuration documentation for instructions on registering the tidy-tree layout.

​
Complete example

Here’s a comprehensive mindmap showing various features:

Build docs developers (and LLMs) love

Get started for freeTalk to us