A Mermaid mindmap is an indented outline: one root, and every line indented further than the line above it becomes that line's child. Write the outline you would write anyway, and Mermaid lays it out around the root.
No signup · No watermark · Renders in your browser · PNG, SVG, JPG, WebP, PDF
Each example is real Mermaid code, shown with the image it renders in the Clean Docs style. Paste any of them into the editor below and change the labels.
Indentation alone sets the hierarchy. The root gets a circle with ((double parentheses)); everything else uses the default shape.
mindmap
root((Launch plan))
Product
Pricing page
Onboarding
Marketing
Blog post
Newsletter
Support
Help docs
Status pageShapes use an id followed by delimiters around the text, much like flowchart nodes. A line with no id and no delimiters gets the default shape.
mindmap
root((Circle root))
sq[Square]
rs(Rounded square)
hx{{Hexagon}}
bg))Bang((
cl)Cloud(
Default shapeWrap a label in quotes and backticks to make it a Markdown string: **bold** and *italic* work, and long text wraps inside the node.
mindmap
root["`**Q3 retro**`"]
went["`What went *well*`"]
Shipped the importer two weeks early
Support queue under one day
change["`What to *change*`"]
Too many meetings on Mondays
Release notes written after launchThe editor starts with the launch plan example. Change the outline, pick a style, and download a PNG or SVG — the diagram renders locally in your browser.
Export controls activate after your diagram renders locally.
Write mindmap on the first line, then the root on the next line, then the rest as an indented outline. Each line indented further than the one above it becomes its child; lines at the same depth are siblings.
A Mermaid mindmap has exactly one root. If two lines sit at the root's indentation, the second has no parent and the diagram fails. Indent everything under a single top line, or add a root that the existing top-level lines can hang from.
Only relative to the lines around it. A line indented deeper than the line above is its child, whatever the exact number of spaces; tabs work too. When indentation is ambiguous, Mermaid attaches the line to the nearest line above that is clearly shallower.
Give the node an id and wrap the text in delimiters: id[square], id(rounded), id((circle)), id))bang((, id)cloud( or id{{hexagon}}. A line with plain text and no delimiters uses the default shape.
Yes. Write the label as a Markdown string — quotes around backticks around the text — and use **bold** or *italic* inside it. Markdown strings also wrap long text automatically, so you do not need <br> tags.
::icon() only names an icon; the icon font itself, such as Font Awesome, has to be loaded by the page that renders the diagram. Where it is not loaded, the node renders without the icon.
Paste the code into the editor on this page, pick a style, and download PNG, SVG, JPG, WebP or PDF. Use a transparent background to place the mindmap on coloured slides, with no watermark and no signup.