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