Mermaid sunburst diagrams for hierarchical data visualization

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. Mermaid sunburst diagrams turn hierarchical relationships into radial rings, so you can see the entire structure and zoom into detail without scrolling.

What a sunburst diagram shows

A sunburst diagram is a radial take on a tree: the root sits at the center, and each level of the hierarchy radiates outward as concentric rings. Each ring segment's size represents a metric—revenue, headcount, file size, or any numerical value. The visual instantly shows:

• Top-level structure — what's at the root and how many major branches it has
• Relative proportions — which segments dominate at each level
• Drill-down potential — click a segment to zoom and explore its children
• Color-coded categories — segments can use color to show type, status, or performance

Sunbursts shine for hierarchical data with quantitative values: org charts with team sizes, budgets broken down by cost center, software packages by dependencies, or website structure by traffic.

Sunburst syntax in Mermaid

Mermaid's sunburst syntax uses a hierarchical tree structure with values:

sunburst
    Revenue,100
      North America,50
        Sales,30
        Marketing,15
        Operations,5
      Europe,35
        Sales,22
        Marketing,10
        Operations,3
      Asia,15
        Sales,8
        Marketing,5
        Operations,2

Each node is indented one level deeper than its parent. The format is Node Name,Value. The value determines the segment's size proportional to its siblings.

Use case: organizational structure with headcount

Sunbursts are ideal for visualizing org charts where headcount (or budget) is the metric:

sunburst
    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

At a glance, you see that Engineering is the largest department, Backend is the largest team within it, and Infrastructure is a small but critical group. This structure is much clearer than a bulleted org list.

Real-world example: website traffic by section

A content-heavy site might visualize traffic as a sunburst to see which sections dominate:

sunburst
    Website Traffic,100000
      Blog,45000
        Tutorials,22000
        News,15000
        Case Studies,8000
      Documentation,30000
        API Docs,15000
        Guides,10000
        FAQ,5000
      Learn,15000
        Courses,8000
        Workshops,5000
        Webinars,2000
      Community,10000
        Forums,6000
        Events,3000
        Meetups,1000

Managers immediately see that the Blog drives 45% of traffic, and Tutorials within the Blog are the top performer. This informs content strategy and resource allocation.

Styling and best practices

For sunbursts to be effective:

• Keep depth to 3–4 levels — beyond four rings, the inner segments become too small to read
• Use meaningful values — ensure the metric you're showing (headcount, revenue, traffic) is what matters to your audience
• Balance sibling nodes — if one child is vastly larger than its siblings, the diagram can look lopsided; consider grouping small segments into an "Other" category
• Label clearly — include units or percentages in segment labels so viewers know what they're looking at
• Color by category — if multiple children represent different types (e.g., cost center types), use color coding to reinforce the taxonomy

Use case: software dependency tree

Developers can use sunbursts to visualize which packages in a dependency tree consume the most bundle size or have the most dependencies:

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

This helps teams understand their dependency footprint, spot unnecessary bloat, and make informed decisions about package choices.

Interactivity and exploration

In MermaidCreator's editor, sunburst diagrams are interactive:

• Hover to highlight a segment and see its value
• Click to zoom into that segment and its children (in supported viewers)
• Drag and resize the entire diagram for presentation

The code-based nature means you can version-control sunbursts, share them in pull requests, and update them as your hierarchical data changes.

When to use sunbursts vs. other diagrams

Sunbursts are powerful but specialized. Pick the right tool:

Use Sunbursts For	Use Org Charts For	Use Mindmaps For
Hierarchies with quantitative values	Pure structure (no metrics)	Brainstorming & ideation
Revenue, budget, traffic breakdowns	Team reporting lines	Information architecture
Multi-level drill-down exploration	Clear chain of command	Roadmaps & planning

Org charts emphasize reporting relationships. Sunbursts emphasize proportional size and drill-down exploration. Mindmaps emphasize associative thinking. Use the one that matches your intent.

Limitations and workarounds

Mermaid sunbursts don't support every visualization feature:

• No custom colors per segment — colors are auto-assigned; if you need precise color control, export to SVG and customize manually
• No click-to-drill in static output — the interactivity works in browsers and MermaidCreator, but static images are snapshots
• Values only—no labels on segments — if segments are very small, labels become illegible; use the hover state to inspect values

For these advanced cases, consider SVG/D3 or other specialized tools. But for rapid iteration and version control, Mermaid sunbursts are unbeatable.

FAQ

Can I make the sunburst proportional to values?
Yes—the numeric value after each node name determines its segment size relative to siblings at that level.

How do I export a sunburst 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 4 levels the inner rings become unreadable. For deeper hierarchies, consider splitting into multiple diagrams.

Can I use sunbursts to visualize file systems?
Yes—use folder or file size as the value. You'll quickly see which directories consume the most space.

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