MermaidData VisualizationHierarchical DataAnalyticsMindmap

Hierarchical data in Mermaid with mindmap diagrams

June 22, 20266 min readThe MermaidCreator team

When you have nested data—a company org chart, a file-system directory tree, or a breakdown of revenue by region and department—a flat list falls apart. If you came here looking for a Mermaid sunburst chart, here's the honest answer: Mermaid doesn't have one. There's no radial, ring-based sunburst diagram type. What Mermaid does give you is the mindmap — an outline tree that captures the same hierarchy in plain, version-controlled text. This guide shows how to use it, and when to reach for a real charting library instead.

Sunburst vs. mindmap: what Mermaid can and can't do

A sunburst is a radial take on a tree: the root sits at the center, levels radiate outward as concentric rings, and each ring segment's size encodes a metric (revenue, headcount, file size). Mermaid can't draw that — there's no segment sizing and no rings.

A Mermaid mindmap shows the same parent→child hierarchy as a branching outline. It captures structure beautifully, but it does not size nodes by value. So when you need proportional, area-encoded segments, use a dedicated charting library (D3, ECharts, Plotly). When you mainly need to communicate the shape of a hierarchy — and keep it in your repo — a mindmap is the right Mermaid tool.

A mindmap instantly shows:

Top-level structure — what's at the root and how many major branches it has
Depth — how many levels each branch drills down
Grouping — which items belong under which parent
Labels — you can fold a metric into each node's text as an annotation (it won't change the node's size)

Mindmap syntax in Mermaid

A mindmap is defined by indentation: each node is indented one level deeper than its parent, and there is exactly one root. We keep each metric in the label as an annotation, since mindmaps don't size nodes by value:

mindmap
  root((Revenue $100M))
    North America $50M
      Sales $30M
      Marketing $15M
      Operations $5M
    Europe $35M
      Sales $22M
      Marketing $10M
      Operations $3M
    Asia $15M
      Sales $8M
      Marketing $5M
      Operations $2M

The root uses the root((text)) form to render as a central node; every other line is plain text, indented under its parent. Spaces, $, and digits are all just part of the label.

Use case: organizational structure with headcount

Mindmaps are a quick way to document an org tree. Because a mindmap needs a single root, we add a top node (total headcount) above the departments:

mindmap
  root((Headcount 90))
    Engineering 60
      Backend 25
        Infrastructure 8
        API 12
        Data 5
      Frontend 20
        Web 12
        Mobile 8
      QA 15
        Test Automation 9
        Manual QA 6
    Product 18
      Product Management 8
      Design 7
      Research 3
    Operations 12
      Finance 5
      HR 4
      Legal 3

The tree makes the reporting structure obvious — Engineering is the largest department, Backend the largest team within it. The numbers are annotations, not sizes; if you need the headcounts drawn to scale, that's a job for a charting library.

Real-world example: website traffic by section

Documenting how a content site is organized — with each section's traffic noted in the label:

mindmap
  root((Website Traffic 100K))
    Blog 45K
      Tutorials 22K
      News 15K
      Case Studies 8K
    Documentation 30K
      API Docs 15K
      Guides 10K
      FAQ 5K
    Learn 15K
      Courses 8K
      Workshops 5K
      Webinars 2K
    Community 10K
      Forums 6K
      Events 3K
      Meetups 1K

The outline shows the information architecture at a glance: Blog is the biggest section, and Tutorials lead within it. To rank sections by traffic visually (area-encoded), pair this with a pie chart or an external sunburst.

Styling and best practices

For mindmaps to stay readable:

Keep depth to 3–4 levels — deeper trees get wide and hard to scan; split into multiple diagrams instead
Annotate, don't overload — fold one metric into the label (e.g. Backend 25); more than that clutters the node
Group small items — collapse a long tail of tiny children into an "Other" node
Order siblings meaningfully — largest-first or alphabetical, so readers know what to expect
Use a clear root — the root sets the subject; root((Total)) reads better than a bare word

Use case: software dependency tree

A mindmap is handy for sketching which package groups dominate a bundle (sizes noted in the labels):

mindmap
  root((Application 1000KB))
    Frontend Libraries 400KB
      React 200KB
      Tailwind 100KB
      axios 50KB
      utils 50KB
    Backend Libraries 300KB
      Next.js 120KB
      Supabase 80KB
      Stripe 60KB
      node-utils 40KB
    DevTools 200KB
      Webpack 80KB
      Babel 60KB
      ESLint 40KB
      Jest 20KB
    Data Layer 100KB
      Zod 40KB
      TanStack Query 40KB
      Zustand 20KB

This helps teams see their dependency groups and spot bloat. For a true size-to-scale view (where each box's area is its bundle weight), a treemap or sunburst from a charting library is the better fit.

Version control and sharing

Because a mindmap is just text, you can version-control it, review it in a pull request, and update it by editing the source — no exporting from a separate tool, no stale screenshot in a forgotten wiki. Export to PNG or SVG from MermaidCreator when you need a static image for a slide or doc.

When to use a mindmap vs. other diagrams

Mindmaps are great for structure, but they're not the only option:

Use a mindmap for	Use an org chart (flowchart) for	Use a charting library for
Showing a hierarchy as an outline	Pure reporting lines and chain of command	True sunbursts/treemaps with sized segments
Brainstorming & information architecture	Cross-links between nodes	Interactive drill-down and hover values
A quick, version-controlled tree	Decision and process flows	Precise color and area encoding

Mindmaps emphasize associative structure. A flowchart emphasizes flow and relationships. A sunburst (in a real charting library) emphasizes proportional size. Pick the one that matches your intent.

Limitations and workarounds

Mermaid's mindmap is deliberately simple:

No node sizing — every node is the same size; values live in the label as text, not as area. For proportional segments, use D3/ECharts/Plotly.
No radial layout — mindmaps branch as an outline, not as concentric rings. Mermaid has no sunburst type.
One root only — if your data has several top-level items, add a parent node above them (as in the headcount example).

For proportional, interactive, or radial visualizations, export your hierarchy to a dedicated charting tool. For a fast, readable, version-controlled tree, the Mermaid mindmap is hard to beat.

FAQ

Does Mermaid have a sunburst diagram?
No. Mermaid has no radial sunburst type. The closest native option is the mindmap, which shows the same hierarchy as an outline tree (without sized segments).

Can a mindmap size nodes by value?
No — all nodes render at the same size. Keep the metric in the label as an annotation, and use a charting library when you need area-encoded segments.

How do I export a mindmap as an image?
In MermaidCreator, use the export button to download PNG or SVG. SVG is ideal if you want to tweak colors or styling later.

What's the maximum hierarchy depth?
Mermaid supports arbitrary depth, but beyond about four levels a mindmap gets wide and hard to read. For deeper hierarchies, split into multiple diagrams.

Can I visualize a file system this way?
Yes — model folders and files as the tree and note sizes in the labels. You'll see the structure clearly, though the boxes won't be drawn to scale.

Explore hierarchical data visually in the MermaidCreator editor—mindmaps make complex structures readable at a glance.

Mermaid