Skip to content
MermaidViewer
Log inOpen editor

Ideas diagram

Mermaid Mindmap

Brainstorm and organise ideas with an indentation-based mind map.

Try mindmap in the editor Generate with AI

Basic mindmap example

Basic mindmap example diagram
mermaid
mindmap
  root((Product Launch))
    Marketing
      Blog posts
      Social campaign
      Email list
    Engineering
      Feature freeze
      Load testing
      Monitoring
    Support
      Help center
      FAQ
    Sales
      Pricing page
      Demo script
Open in the live editor

Mermaid mindmaps use indentation to build a tree of ideas around a central topic. There are no arrows to write: each deeper indent becomes a child branch.

This makes mindmaps the quickest way to turn meeting notes, outlines or brainstorming sessions into a visual overview you can paste into docs.

When to use a mindmap

  • Brainstorming and workshop notes
  • Study notes and revision outlines
  • Feature breakdowns and scoping
  • Content and SEO topic clusters

Mindmap syntax reference

SyntaxWhat it does
mindmapStart a mindmap.
IndentationEach deeper indent creates a child node.
root((Text))Circle-shaped node (common for the root).
[Text] / (Text) / {{Text}}Square, rounded and hexagon node shapes.
)Text( / ))Text((Cloud and bang shapes.
::icon(fa fa-book)Add an icon to the previous node (needs icon fonts).

Mindmap examples

Study notes

Different node shapes highlight key concepts.

Study notes diagram
mermaid
mindmap
  root((Photosynthesis))
    Inputs
      [Sunlight]
      [Water]
      [CO2]
    Outputs
      (Glucose)
      (Oxygen)
    Stages
      {{Light reactions}}
      {{Calvin cycle}}
Open in the live editor

Tips and best practices

  • Use consistent indentation (two spaces works well) — inconsistent indents are the most common mindmap error.
  • Keep labels to a few words; the radial layout gets crowded with long sentences.
  • Split very large maps into one mindmap per main branch.

Generate a mindmap with AI

Not sure where to start? Describe what you need and the AI mindmap generator writes the Mermaid code for you. Try prompts like:

  • “Learning roadmap for becoming a backend developer”
  • “Marketing plan for a podcast”
  • “Pros and cons of remote work”

Mindmap templates

Startup Business Plan Mindmap

Mind map outlining the key areas of a startup business plan: problem, solution, market, revenue and team.

Web Developer Learning Roadmap

Mind map of the skills to learn to become a web developer: fundamentals, frontend, backend, tools and soft skills.

Mindmap FAQ

How does a Mermaid mindmap know the hierarchy?

By indentation. A line indented more than the previous one becomes its child; lines at the same level become siblings.

Can I use icons in a Mermaid mindmap?

Yes, with ::icon(fa fa-name) for Font Awesome or ::icon(mdi mdi-name) for Material Design icons, provided the icon font is loaded on the page.

Can I convert an outline or bullet list to a mindmap?

Yes. Paste your outline into the MermaidViewer AI generator and ask for a mindmap, or replace bullets with indentation under a mindmap root yourself.