Last updated
Was this helpful?
Last updated
Was this helpful?
Mermaid's Sankey diagrams provide a visual representation of flow and relationships between nodes, showing the proportional values in a process. Commonly used to display resource or energy flow, they highlight the relative sizes of inputs, outputs, and connections, making it easy to analyze and optimize processes.
From the Code IDE, click Apps and Agents from the left-hand panel.
Select Mermaid. Paradime will automatically start a new Mermaid project.
In the terminal that appears, use the arrow keys to select "Sankey Diagram"
A new sankey.mmd
file will be created in your editor with this starter template:
Click the eye icon (👁️) in the top right corner of your Mermaid file to preview the diagram.
Edit and update your .mmd
file as needed—the preview will update automatically.
Define the diagram using sankey-beta
.
Each row specifies a source, target, and value, separated by commas.
Empty Lines: You can leave blank lines for better readability.
Commas: Enclose text with commas in double quotes.
Double Quotes: Escape double quotes by using two double quotes.
You can customize the diagram’s appearance using configuration settings.
Example Configuration
Available Settings
Link Colors: Adjust the link colors.
source
: Color matches source node.
target
: Color matches target node.
gradient
: Smooth transition between source and target colors.
#hexcode
: Specify a specific hex color.
Node Alignment: Change alignment using justify
, center
, left
, or right
.
Clearly define nodes and values.
Use intuitive labels for source and target nodes.
Adjust link colors and node alignments for clarity.
Keep the number of nodes manageable for readability.
Regularly update diagrams to reflect current data flows.
For more syntax options and advanced features, visit the .
---
config:
sankey:
showValues: false
---
sankey-beta
Agricultural 'waste',Bio-conversion,124.7
Bio-conversion,Liquid,0.6
Bio-conversion,Solid,280.3
Coal reserves,Coal,75.6
Electricity grid,Heating and cooling - homes,113.7
Electricity grid,Industry,342.2
Electricity grid,Road transport,37.8
Gas reserves,Ngas,123.0
H2 conversion,H2,20.9
Liquid,Road transport,135.8
Nuclear,Thermal generation,840.0
Oil reserves,Oil,612.0
Pumped heat,Heating and cooling - homes,193.0
Solar,Solar PV,59.9
Thermal generation,Electricity grid,525.5
Wind,Electricity grid,289.4
sankey-beta
Source,Target,Value
Electricity grid,Heating and cooling - homes,113.7
Electricity grid,Industry,342.2
sankey-beta
Source,Target,Value
Bio-conversion,Losses,26.9
Bio-conversion,Solid,280.3
sankey-beta
Pumped heat,"Heating and cooling, homes",193.0
sankey-beta
Pumped heat,"Heating and cooling, ""homes""",193.0
<script>
const config = {
startOnLoad: true,
securityLevel: 'loose',
sankey: {
width: 800,
height: 400,
linkColor: 'source',
nodeAlignment: 'left',
},
};
mermaid.initialize(config);
</script>
sankey-beta
Coal reserves,Coal,75.6
Coal,Thermal generation,400.1
Thermal generation,Electricity grid,525.5
Electricity grid,Industry,342.2
---
config:
sankey:
showValues: true
---
sankey-beta
Oil reserves,Oil,612.0
Oil,Liquid,611.9
Liquid,Road transport,135.8
Liquid,International aviation,206.3