7.9 KB306 lines
Blame
1> **Warning**
2>
3> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
4>
5> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/sankey.md](../../packages/mermaid/src/docs/syntax/sankey.md).
6
7# Sankey diagram (v10.3.0+)
8
9> A sankey diagram is a visualization used to depict a flow from one set of values to another.
10
11> **Warning**
12> This is an experimental diagram. Its syntax are very close to plain CSV, but it is to be extended in the nearest future.
13
14The things being connected are called nodes and the connections are called links.
15
16## Example
17
18This example taken from [observable](https://observablehq.com/@d3/sankey/2?collection=@d3/d3-sankey). It may be rendered a little bit differently, though, in terms of size and colors.
19
20```mermaid-example
21---
22config:
23 sankey:
24 showValues: false
25---
26sankey
27
28Agricultural 'waste',Bio-conversion,124.729
29Bio-conversion,Liquid,0.597
30Bio-conversion,Losses,26.862
31Bio-conversion,Solid,280.322
32Bio-conversion,Gas,81.144
33Biofuel imports,Liquid,35
34Biomass imports,Solid,35
35Coal imports,Coal,11.606
36Coal reserves,Coal,63.965
37Coal,Solid,75.571
38District heating,Industry,10.639
39District heating,Heating and cooling - commercial,22.505
40District heating,Heating and cooling - homes,46.184
41Electricity grid,Over generation / exports,104.453
42Electricity grid,Heating and cooling - homes,113.726
43Electricity grid,H2 conversion,27.14
44Electricity grid,Industry,342.165
45Electricity grid,Road transport,37.797
46Electricity grid,Agriculture,4.412
47Electricity grid,Heating and cooling - commercial,40.858
48Electricity grid,Losses,56.691
49Electricity grid,Rail transport,7.863
50Electricity grid,Lighting & appliances - commercial,90.008
51Electricity grid,Lighting & appliances - homes,93.494
52Gas imports,Ngas,40.719
53Gas reserves,Ngas,82.233
54Gas,Heating and cooling - commercial,0.129
55Gas,Losses,1.401
56Gas,Thermal generation,151.891
57Gas,Agriculture,2.096
58Gas,Industry,48.58
59Geothermal,Electricity grid,7.013
60H2 conversion,H2,20.897
61H2 conversion,Losses,6.242
62H2,Road transport,20.897
63Hydro,Electricity grid,6.995
64Liquid,Industry,121.066
65Liquid,International shipping,128.69
66Liquid,Road transport,135.835
67Liquid,Domestic aviation,14.458
68Liquid,International aviation,206.267
69Liquid,Agriculture,3.64
70Liquid,National navigation,33.218
71Liquid,Rail transport,4.413
72Marine algae,Bio-conversion,4.375
73Ngas,Gas,122.952
74Nuclear,Thermal generation,839.978
75Oil imports,Oil,504.287
76Oil reserves,Oil,107.703
77Oil,Liquid,611.99
78Other waste,Solid,56.587
79Other waste,Bio-conversion,77.81
80Pumped heat,Heating and cooling - homes,193.026
81Pumped heat,Heating and cooling - commercial,70.672
82Solar PV,Electricity grid,59.901
83Solar Thermal,Heating and cooling - homes,19.263
84Solar,Solar Thermal,19.263
85Solar,Solar PV,59.901
86Solid,Agriculture,0.882
87Solid,Thermal generation,400.12
88Solid,Industry,46.477
89Thermal generation,Electricity grid,525.531
90Thermal generation,Losses,787.129
91Thermal generation,District heating,79.329
92Tidal,Electricity grid,9.452
93UK land based bioenergy,Bio-conversion,182.01
94Wave,Electricity grid,19.013
95Wind,Electricity grid,289.366
96```
97
98```mermaid
99---
100config:
101 sankey:
102 showValues: false
103---
104sankey
105
106Agricultural 'waste',Bio-conversion,124.729
107Bio-conversion,Liquid,0.597
108Bio-conversion,Losses,26.862
109Bio-conversion,Solid,280.322
110Bio-conversion,Gas,81.144
111Biofuel imports,Liquid,35
112Biomass imports,Solid,35
113Coal imports,Coal,11.606
114Coal reserves,Coal,63.965
115Coal,Solid,75.571
116District heating,Industry,10.639
117District heating,Heating and cooling - commercial,22.505
118District heating,Heating and cooling - homes,46.184
119Electricity grid,Over generation / exports,104.453
120Electricity grid,Heating and cooling - homes,113.726
121Electricity grid,H2 conversion,27.14
122Electricity grid,Industry,342.165
123Electricity grid,Road transport,37.797
124Electricity grid,Agriculture,4.412
125Electricity grid,Heating and cooling - commercial,40.858
126Electricity grid,Losses,56.691
127Electricity grid,Rail transport,7.863
128Electricity grid,Lighting & appliances - commercial,90.008
129Electricity grid,Lighting & appliances - homes,93.494
130Gas imports,Ngas,40.719
131Gas reserves,Ngas,82.233
132Gas,Heating and cooling - commercial,0.129
133Gas,Losses,1.401
134Gas,Thermal generation,151.891
135Gas,Agriculture,2.096
136Gas,Industry,48.58
137Geothermal,Electricity grid,7.013
138H2 conversion,H2,20.897
139H2 conversion,Losses,6.242
140H2,Road transport,20.897
141Hydro,Electricity grid,6.995
142Liquid,Industry,121.066
143Liquid,International shipping,128.69
144Liquid,Road transport,135.835
145Liquid,Domestic aviation,14.458
146Liquid,International aviation,206.267
147Liquid,Agriculture,3.64
148Liquid,National navigation,33.218
149Liquid,Rail transport,4.413
150Marine algae,Bio-conversion,4.375
151Ngas,Gas,122.952
152Nuclear,Thermal generation,839.978
153Oil imports,Oil,504.287
154Oil reserves,Oil,107.703
155Oil,Liquid,611.99
156Other waste,Solid,56.587
157Other waste,Bio-conversion,77.81
158Pumped heat,Heating and cooling - homes,193.026
159Pumped heat,Heating and cooling - commercial,70.672
160Solar PV,Electricity grid,59.901
161Solar Thermal,Heating and cooling - homes,19.263
162Solar,Solar Thermal,19.263
163Solar,Solar PV,59.901
164Solid,Agriculture,0.882
165Solid,Thermal generation,400.12
166Solid,Industry,46.477
167Thermal generation,Electricity grid,525.531
168Thermal generation,Losses,787.129
169Thermal generation,District heating,79.329
170Tidal,Electricity grid,9.452
171UK land based bioenergy,Bio-conversion,182.01
172Wave,Electricity grid,19.013
173Wind,Electricity grid,289.366
174```
175
176## Syntax
177
178The idea behind syntax is that a user types `sankey` keyword first, then pastes raw CSV below and get the result.
179
180It implements CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**:
181
182- CSV must contain **3 columns only**
183- It is **allowed** to have **empty lines** without comma separators for visual purposes
184
185### Basic
186
187It is implied that 3 columns inside CSV should represent `source`, `target` and `value` accordingly:
188
189```mermaid-example
190sankey
191
192%% source,target,value
193Electricity grid,Over generation / exports,104.453
194Electricity grid,Heating and cooling - homes,113.726
195Electricity grid,H2 conversion,27.14
196```
197
198```mermaid
199sankey
200
201%% source,target,value
202Electricity grid,Over generation / exports,104.453
203Electricity grid,Heating and cooling - homes,113.726
204Electricity grid,H2 conversion,27.14
205```
206
207### Empty Lines
208
209CSV does not support empty lines without comma delimiters by default. But you can add them if needed:
210
211```mermaid-example
212sankey
213
214Bio-conversion,Losses,26.862
215
216Bio-conversion,Solid,280.322
217
218Bio-conversion,Gas,81.144
219```
220
221```mermaid
222sankey
223
224Bio-conversion,Losses,26.862
225
226Bio-conversion,Solid,280.322
227
228Bio-conversion,Gas,81.144
229```
230
231### Commas
232
233If you need to have a comma, wrap it in double quotes:
234
235```mermaid-example
236sankey
237
238Pumped heat,"Heating and cooling, homes",193.026
239Pumped heat,"Heating and cooling, commercial",70.672
240```
241
242```mermaid
243sankey
244
245Pumped heat,"Heating and cooling, homes",193.026
246Pumped heat,"Heating and cooling, commercial",70.672
247```
248
249### Double Quotes
250
251If you need to have double quote, put a pair of them inside quoted string:
252
253```mermaid-example
254sankey
255
256Pumped heat,"Heating and cooling, ""homes""",193.026
257Pumped heat,"Heating and cooling, ""commercial""",70.672
258```
259
260```mermaid
261sankey
262
263Pumped heat,"Heating and cooling, ""homes""",193.026
264Pumped heat,"Heating and cooling, ""commercial""",70.672
265```
266
267## Configuration
268
269You can customize link colors, node alignments and diagram dimensions.
270
271```html
272<script>
273 const config = {
274 startOnLoad: true,
275 securityLevel: 'loose',
276 sankey: {
277 width: 800,
278 height: 400,
279 linkColor: 'source',
280 nodeAlignment: 'left',
281 },
282 };
283 mermaid.initialize(config);
284</script>
285```
286
287### Links Coloring
288
289You can adjust links' color by setting `linkColor` to one of those:
290
291- `source` - link will be of a source node color
292- `target` - link will be of a target node color
293- `gradient` - link color will be smoothly transient between source and target node colors
294- hex code of color, like `#a1a1a1`
295
296### Node Alignment
297
298Graph layout can be changed by setting `nodeAlignment` to:
299
300- `justify`
301- `center`
302- `left`
303- `right`
304
305<!--- cspell:ignore Ngas bioenergy biofuel --->
306