← All diagram types
MERMAID DIAGRAM GUIDE

Mermaid Sankey diagram online editor

Show how quantities flow between sources, stages, and destinations. Create the diagram in Mermaid Studio, preview it instantly, and export it when it is ready to share.

Open the Sankey editor See an example

WHAT IT IS FOR

Make the important relationships clear

Show how quantities move between sources, stages, and destinations while keeping the size of each flow visible.

  • Explain budget allocation
  • Map energy or resource flows
  • Analyze conversion funnels
Why use Mermaid Studio?
  • Write the source as versionable Mermaid code.
  • Preview changes immediately in the browser.
  • Export the finished diagram as SVG or PNG.
  • Start from a related template when you need a head start.

MERMAID EXAMPLE

Start with a working example

Copy the structure, replace the labels with your own domain, and continue in the full editor.

sankey
  Inbound,Active User,120
  Inbound,Churn,40
  Active User,Save project,75
  Active User,Sharing,45

HOW TO START

Create your diagram in four steps

  1. 1Define the sources and destinations.
  2. 2Use consistent units for every link.
  3. 3Connect stages in the direction the quantity moves.
  4. 4Check that totals and labels tell a coherent story.

WRITING TIPS

Keep the diagram useful

Use consistent units across all links.

Keep the number of nodes readable.

FAQ

Frequently asked questions

What does a Sankey diagram show?+

A Sankey diagram shows quantities flowing between nodes, with thicker links representing larger values.

What makes a Sankey diagram readable?+

Consistent units, clear node names, and a limited number of flows make the chart much easier to understand.

TEMPLATES

Start from a related template

Budget allocation Sankey

Show how a budget flows from sources into teams and initiatives.

Open template

RELATED DIAGRAMS

Explore another Mermaid diagram

Mermaid flowchart

Visualize processes, decisions, and system flows with connected nodes.

Read the guide

Mermaid sequence diagram

Map requests, responses, and asynchronous events between services.

Read the guide

Mermaid class diagram

Design domain objects, properties, methods, inheritance, and relationships.

Read the guide

Mermaid ER diagram

Document database entities, fields, relationships, and cardinality.

Read the guide

Mermaid state diagram

Show how an object or workflow changes state in response to events.

Read the guide

Mermaid mindmap

Organize ideas and subtopics hierarchically around a central theme.

Read the guide

Ready to make a Sankey?

Open the editor with a working example and adapt it to your project.

Start in Mermaid Studio