diff --git a/cypress/integration/rendering/sankey.spec.ts b/cypress/integration/rendering/sankey.spec.ts index ded23a045..e334b898b 100644 --- a/cypress/integration/rendering/sankey.spec.ts +++ b/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 }, diff --git a/packages/mermaid/src/docs/syntax/sankey.md b/packages/mermaid/src/docs/syntax/sankey.md index 97806d725..32f3663b9 100644 --- a/packages/mermaid/src/docs/syntax/sankey.md +++ b/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 ``` + +### 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`