More detailed sankey docs

cypress/integration/rendering/sankey.spec.ts

@@ -128,7 +128,7 @@ describe('Sankey Diagram', () => {
         expect(node.attr('x')).to.equal('400');
       });
     });
-    
+
     it('should center nodes', function () {
       renderGraph(this.graph, {
         sankey: { nodeAlignment: 'center', width: 410, useMaxWidth: false },

packages/mermaid/src/docs/syntax/sankey.md

@@ -166,32 +166,54 @@ Wind,Electricity grid,289.366
 
 The idea behind syntax is that a user types `sankey-beta` keyword first, then pastes raw CSV below and get the result.
 
-It is implements standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**:
+It implements CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**:
 
 - CSV must contain **3 columns only**
 - It is **allowed** to have **empty lines** without comma separators for visual purposes
 
-### Empty lines
+### Basic
 
-CSV does not support empty lines (without comma delimeters) by default. But you can add them if needed.
+It is implied that 3 columns inside CSV should represent `source`, `target` and `value` accordingly:
+
+```mermaid-example
+sankey-beta
+
+%% source,target,value
+Electricity grid,Over generation / exports,104.453
+Electricity grid,Heating and cooling - homes,113.726
+Electricity grid,H2 conversion,27.14
+```
+
+```mermaid
+sankey-beta
+
+%% source,target,value
+Electricity grid,Over generation / exports,104.453
+Electricity grid,Heating and cooling - homes,113.726
+Electricity grid,H2 conversion,27.14
+```
+
+### Empty Lines
+
+CSV does not support empty lines without comma delimeters by default. But you can add them if needed:
 
 ```mermaid-example
 sankey-beta
 
-Bio-conversion,Liquid,0.597
 Bio-conversion,Losses,26.862
 
 Bio-conversion,Solid,280.322
+
 Bio-conversion,Gas,81.144
 ```
 
 ```mermaid
 sankey-beta
 
-Bio-conversion,Liquid,0.597
 Bio-conversion,Losses,26.862
 
 Bio-conversion,Solid,280.322
+
 Bio-conversion,Gas,81.144
 ```
 
@@ -213,41 +235,27 @@ Pumped heat,"Heating and cooling, homes",193.026
 Pumped heat,"Heating and cooling, commercial",70.672
 ```
 
-### Double quotes
+### Double Quotes
 
-If you need to have double quote, put a pair of them:
+If you need to have double quote, put a pair of them inside quoted string:
 
 ```mermaid-example
 sankey-beta
 
-Pumped heat,"Heating and cooling ""homes""",193.026
+Pumped heat,"Heating and cooling, ""homes""",193.026
 Pumped heat,"Heating and cooling, ""commercial""",70.672
 ```
 
 ```mermaid
 sankey-beta
 
-Pumped heat,"Heating and cooling ""homes""",193.026
+Pumped heat,"Heating and cooling, ""homes""",193.026
 Pumped heat,"Heating and cooling, ""commercial""",70.672
 ```
 
 ## Configuration
 
-### Coloring and Alignment
-
-You can change graph layout by setting `nodeAlignment` to:
-
-- `justify`
-- `center`
-- `left`
-- `right`
-
-And adjust coloring of the links by setting `linkColor` to one of those:
-
-- `source`
-- `target`
-- `gradient`
-- hex code of color, like `#a1a1a1`
+You can customize link colors, node alignments and diagram dimensions.
 
 ```html
 <script>
@@ -255,6 +263,8 @@ And adjust coloring of the links by setting `linkColor` to one of those:
     startOnLoad: true,
     securityLevel: 'loose',
     sankey: {
+      width: 800,
+      height: 400,
       linkColor: 'source',
       nodeAlignment: 'left',
     },
@@ -262,3 +272,21 @@ And adjust coloring of the links by setting `linkColor` to one of those:
   mermaid.initialize(config);
 </script>
 ```
+
+### Links Coloring
+
+You can adjust links' color by setting `linkColor` to one of those:
+
+- `source` - link will be of a source node color
+- `target` - link will be of a target node color
+- `gradient` - link color will be smoothly transient between source and target node colors
+- hex code of color, like `#a1a1a1`
+
+### Node Alignment
+
+Graph layout can be changed by setting `nodeAlignment` to:
+
+- `justify`
+- `center`
+- `left`
+- `right`