demos/sankey.html

<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Sankey Mermaid Quick Test Page</title>
    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
  </head>

  <body>
    <h1>Sankey diagram demos</h1>
    <h2>FY20-21 Performance</h2>
    <pre class="mermaid">
      ---
      config:
        sankey:
          showValues: true
          prefix: $
          suffix: B
          width: 800
          nodeAlignment: left
      ---
      sankey-beta
        Revenue,Expenses,10
        Revenue,Profit,10
        Expenses,Manufacturing,5
        Expenses,Tax,3
        Expenses,Research,2
    </pre>

    <h2>Energy flow</h2>
    <pre class="mermaid">
      ---
      config:
        sankey:
          useMaxWidth: true
          showValues: false
          width: 1200
          height: 600
          linkColor: gradient
          nodeAlignment: justify
      ---
      sankey-beta

      Agricultural 'waste',Bio-conversion,124.729
      Bio-conversion,Liquid,0.597
      Bio-conversion,Losses,26.862
      Bio-conversion,Solid,280.322
      Bio-conversion,Gas,81.144
      Biofuel imports,Liquid,35
      Biomass imports,Solid,35
      Coal imports,Coal,11.606
      Coal reserves,Coal,63.965
      Coal,Solid,75.571
      District heating,Industry,10.639
      District heating,Heating and cooling - commercial,22.505
      District heating,Heating and cooling - homes,46.184
      Electricity grid,Over generation / exports,104.453
      Electricity grid,Heating and cooling - homes,113.726
      Electricity grid,H2 conversion,27.14
      Electricity grid,Industry,342.165
      Electricity grid,Road transport,37.797
      Electricity grid,Agriculture,4.412
      Electricity grid,Heating and cooling - commercial,40.858
      Electricity grid,Losses,56.691
      Electricity grid,Rail transport,7.863
      Electricity grid,Lighting & appliances - commercial,90.008
      Electricity grid,Lighting & appliances - homes,93.494
      Gas imports,Ngas,40.719
      Gas reserves,Ngas,82.233
      Gas,Heating and cooling - commercial,0.129
      Gas,Losses,1.401
      Gas,Thermal generation,151.891
      Gas,Agriculture,2.096
      Gas,Industry,48.58
      Geothermal,Electricity grid,7.013
      H2 conversion,H2,20.897
      H2 conversion,Losses,6.242
      H2,Road transport,20.897
      Hydro,Electricity grid,6.995
      Liquid,Industry,121.066
      Liquid,International shipping,128.69
      Liquid,Road transport,135.835
      Liquid,Domestic aviation,14.458
      Liquid,International aviation,206.267
      Liquid,Agriculture,3.64
      Liquid,National navigation,33.218
      Liquid,Rail transport,4.413
      Marine algae,Bio-conversion,4.375
      Ngas,Gas,122.952
      Nuclear,Thermal generation,839.978
      Oil imports,Oil,504.287
      Oil reserves,Oil,107.703
      Oil,Liquid,611.99
      Other waste,Solid,56.587
      Other waste,Bio-conversion,77.81
      Pumped heat,Heating and cooling - homes,193.026
      Pumped heat,Heating and cooling - commercial,70.672
      Solar PV,Electricity grid,59.901
      Solar Thermal,Heating and cooling - homes,19.263
      Solar,Solar Thermal,19.263
      Solar,Solar PV,59.901
      Solid,Agriculture,0.882
      Solid,Thermal generation,400.12
      Solid,Industry,46.477
      Thermal generation,Electricity grid,525.531
      Thermal generation,Losses,787.129
      Thermal generation,District heating,79.329
      Tidal,Electricity grid,9.452
      UK land based bioenergy,Bio-conversion,182.01
      Wave,Electricity grid,19.013
      Wind,Electricity grid,289.366
    </pre>

    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      mermaid.initialize({
        theme: 'default',
        logLevel: 3,
        securityLevel: 'loose',
        startOnLoad: true,
      });
    </script>
  </body>
</html>