Merge branch 'develop' into sidv/renameWorkflows
This commit is contained in:
Sidharth Vinod
GitHub
commit
1995f62b3c
|
|
@ -0,0 +1,13 @@
|
|||
/**
|
||||
* Mocked Sankey diagram renderer
|
||||
*/
|
||||
|
||||
import { vi } from 'vitest';
|
||||
|
||||
export const draw = vi.fn().mockImplementation(() => {
|
||||
return '';
|
||||
});
|
||||
|
||||
export default {
|
||||
draw,
|
||||
};
|
||||
|
|
@ -106,6 +106,7 @@
|
|||
"rehype",
|
||||
"roledescription",
|
||||
"sandboxed",
|
||||
"sankey",
|
||||
"setupgraphviewbox",
|
||||
"shiki",
|
||||
"sidharth",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,144 @@
|
|||
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
|
||||
|
||||
describe('Sankey Diagram', () => {
|
||||
it('should render a simple example', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
sankey-beta
|
||||
|
||||
sourceNode,targetNode,10
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
describe('when given a linkColor', function () {
|
||||
this.beforeAll(() => {
|
||||
cy.wrap(
|
||||
`sankey-beta
|
||||
a,b,10
|
||||
`
|
||||
).as('graph');
|
||||
});
|
||||
|
||||
it('links should use hex color', function () {
|
||||
renderGraph(this.graph, { sankey: { linkColor: '#636465' } });
|
||||
|
||||
cy.get('.link path').should((link) => {
|
||||
expect(link.attr('stroke')).to.equal('#636465');
|
||||
});
|
||||
});
|
||||
|
||||
it('links should be the same color as source node', function () {
|
||||
renderGraph(this.graph, { sankey: { linkColor: 'source' } });
|
||||
|
||||
cy.get('.link path').then((link) => {
|
||||
cy.get('.node[id="node-1"] rect').should((node) =>
|
||||
expect(link.attr('stroke')).to.equal(node.attr('fill'))
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
it('links should be the same color as target node', function () {
|
||||
renderGraph(this.graph, { sankey: { linkColor: 'target' } });
|
||||
|
||||
cy.get('.link path').then((link) => {
|
||||
cy.get('.node[id="node-2"] rect').should((node) =>
|
||||
expect(link.attr('stroke')).to.equal(node.attr('fill'))
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
it('links must be gradient', function () {
|
||||
renderGraph(this.graph, { sankey: { linkColor: 'gradient' } });
|
||||
|
||||
cy.get('.link path').should((link) => {
|
||||
expect(link.attr('stroke')).to.equal('url(#linearGradient-3)');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when given a nodeAlignment', function () {
|
||||
this.beforeAll(() => {
|
||||
cy.wrap(
|
||||
`
|
||||
sankey-beta
|
||||
|
||||
a,b,8
|
||||
b,c,8
|
||||
c,d,8
|
||||
d,e,8
|
||||
|
||||
x,c,4
|
||||
c,y,4
|
||||
`
|
||||
).as('graph');
|
||||
});
|
||||
|
||||
this.afterEach(() => {
|
||||
cy.get('.node[id="node-1"]').should((node) => {
|
||||
expect(node.attr('x')).to.equal('0');
|
||||
});
|
||||
cy.get('.node[id="node-2"]').should((node) => {
|
||||
expect(node.attr('x')).to.equal('100');
|
||||
});
|
||||
cy.get('.node[id="node-3"]').should((node) => {
|
||||
expect(node.attr('x')).to.equal('200');
|
||||
});
|
||||
cy.get('.node[id="node-4"]').should((node) => {
|
||||
expect(node.attr('x')).to.equal('300');
|
||||
});
|
||||
cy.get('.node[id="node-5"]').should((node) => {
|
||||
expect(node.attr('x')).to.equal('400');
|
||||
});
|
||||
});
|
||||
|
||||
it('should justify nodes', function () {
|
||||
renderGraph(this.graph, {
|
||||
sankey: { nodeAlignment: 'justify', width: 410, useMaxWidth: false },
|
||||
});
|
||||
cy.get('.node[id="node-6"]').should((node) => {
|
||||
expect(node.attr('x')).to.equal('0');
|
||||
});
|
||||
cy.get('.node[id="node-7"]').should((node) => {
|
||||
expect(node.attr('x')).to.equal('400');
|
||||
});
|
||||
});
|
||||
|
||||
it('should align nodes left', function () {
|
||||
renderGraph(this.graph, {
|
||||
sankey: { nodeAlignment: 'left', width: 410, useMaxWidth: false },
|
||||
});
|
||||
cy.get('.node[id="node-6"]').should((node) => {
|
||||
expect(node.attr('x')).to.equal('0');
|
||||
});
|
||||
cy.get('.node[id="node-7"]').should((node) => {
|
||||
expect(node.attr('x')).to.equal('300');
|
||||
});
|
||||
});
|
||||
|
||||
it('should align nodes right', function () {
|
||||
renderGraph(this.graph, {
|
||||
sankey: { nodeAlignment: 'right', width: 410, useMaxWidth: false },
|
||||
});
|
||||
cy.get('.node[id="node-6"]').should((node) => {
|
||||
expect(node.attr('x')).to.equal('100');
|
||||
});
|
||||
cy.get('.node[id="node-7"]').should((node) => {
|
||||
expect(node.attr('x')).to.equal('400');
|
||||
});
|
||||
});
|
||||
|
||||
it('should center nodes', function () {
|
||||
renderGraph(this.graph, {
|
||||
sankey: { nodeAlignment: 'center', width: 410, useMaxWidth: false },
|
||||
});
|
||||
cy.get('.node[id="node-6"]').should((node) => {
|
||||
expect(node.attr('x')).to.equal('100');
|
||||
});
|
||||
cy.get('.node[id="node-7"]').should((node) => {
|
||||
expect(node.attr('x')).to.equal('300');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -75,6 +75,9 @@
|
|||
<li>
|
||||
<h2><a href="./zenuml.html">ZenUML</a></h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2><a href="./sankey.html">Sankey</a></h2>
|
||||
</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,108 @@
|
|||
<!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>States Mermaid Quick Test Page</title>
|
||||
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
|
||||
<style>
|
||||
div.mermaid {
|
||||
/* font-family: 'trebuchet ms', verdana, arial; */
|
||||
font-family: 'Courier New', Courier, monospace !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Sankey diagram demos</h1>
|
||||
<h2>Energy flow</h2>
|
||||
<pre class="mermaid">
|
||||
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',
|
||||
sankey: {
|
||||
title: 'Hey, this is Sankey-Beta',
|
||||
width: 1200,
|
||||
height: 600,
|
||||
linkColor: 'gradient',
|
||||
nodeAlignment: 'justify',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,9 +1,36 @@
|
|||
version: '3.9'
|
||||
services:
|
||||
mermaid:
|
||||
image: node:20.3.1-alpine3.18
|
||||
image: node:18.16.1-alpine3.18
|
||||
stdin_open: true
|
||||
tty: true
|
||||
working_dir: /mermaid
|
||||
mem_limit: '2G'
|
||||
environment:
|
||||
- NODE_OPTIONS=--max_old_space_size=2048
|
||||
volumes:
|
||||
- ./:/mermaid
|
||||
- root_cache:/root/.cache
|
||||
- root_local:/root/.local
|
||||
- root_npm:/root/.npm
|
||||
ports:
|
||||
- 9000:9000
|
||||
- 3333:3333
|
||||
cypress:
|
||||
image: cypress/included:12.16.0
|
||||
stdin_open: true
|
||||
tty: true
|
||||
working_dir: /mermaid
|
||||
mem_limit: '2G'
|
||||
entrypoint: cypress
|
||||
environment:
|
||||
- DISPLAY
|
||||
volumes:
|
||||
- ./:/mermaid
|
||||
- /tmp/.X11-unix:/tmp/.X11-unix
|
||||
network_mode: host
|
||||
|
||||
volumes:
|
||||
root_cache:
|
||||
root_local:
|
||||
root_npm:
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
#### Defined in
|
||||
|
||||
[defaultConfig.ts:2293](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2293)
|
||||
[defaultConfig.ts:2300](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2300)
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,510 @@
|
|||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/sankey.md](../../packages/mermaid/src/docs/syntax/sankey.md).
|
||||
|
||||
# Sankey diagrams
|
||||
|
||||
> A sankey diagram is a visualization used to depict a flow from one set of values to another.
|
||||
|
||||
::: warning
|
||||
This is an experimental diagram. Its syntax are very close to plain CSV, but it is to be extended in the nearest future.
|
||||
:::
|
||||
|
||||
The things being connected are called nodes and the connections are called links.
|
||||
|
||||
## Example
|
||||
|
||||
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.
|
||||
|
||||
```mermaid-example
|
||||
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
|
||||
```
|
||||
|
||||
```mermaid
|
||||
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
|
||||
```
|
||||
|
||||
::: details
|
||||
|
||||
```mermaid-example
|
||||
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
|
||||
```
|
||||
|
||||
```mermaid
|
||||
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
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Syntax
|
||||
|
||||
The idea behind syntax is that a user types `sankey-beta` keyword first, then pastes raw CSV below and get the result.
|
||||
|
||||
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
|
||||
|
||||
### Basic
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
```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,Losses,26.862
|
||||
|
||||
Bio-conversion,Solid,280.322
|
||||
|
||||
Bio-conversion,Gas,81.144
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sankey-beta
|
||||
|
||||
Bio-conversion,Losses,26.862
|
||||
|
||||
Bio-conversion,Solid,280.322
|
||||
|
||||
Bio-conversion,Gas,81.144
|
||||
```
|
||||
|
||||
```mermaid-example
|
||||
sankey-beta
|
||||
|
||||
Bio-conversion,Losses,26.862
|
||||
|
||||
Bio-conversion,Solid,280.322
|
||||
|
||||
Bio-conversion,Gas,81.144
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sankey-beta
|
||||
|
||||
Bio-conversion,Losses,26.862
|
||||
|
||||
Bio-conversion,Solid,280.322
|
||||
|
||||
Bio-conversion,Gas,81.144
|
||||
```
|
||||
|
||||
### Commas
|
||||
|
||||
If you need to have a comma, wrap it in double quotes:
|
||||
|
||||
```mermaid-example
|
||||
sankey-beta
|
||||
|
||||
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, commercial",70.672
|
||||
```
|
||||
|
||||
```mermaid-example
|
||||
sankey-beta
|
||||
|
||||
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, commercial",70.672
|
||||
```
|
||||
|
||||
### Double Quotes
|
||||
|
||||
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, ""commercial""",70.672
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sankey-beta
|
||||
|
||||
Pumped heat,"Heating and cooling, ""homes""",193.026
|
||||
Pumped heat,"Heating and cooling, ""commercial""",70.672
|
||||
```
|
||||
|
||||
```mermaid-example
|
||||
sankey-beta
|
||||
|
||||
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, ""commercial""",70.672
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
You can customize link colors, node alignments and diagram dimensions.
|
||||
|
||||
```html
|
||||
<script>
|
||||
const config = {
|
||||
startOnLoad: true,
|
||||
securityLevel: 'loose',
|
||||
sankey: {
|
||||
width: 800,
|
||||
height: 400,
|
||||
linkColor: 'source',
|
||||
nodeAlignment: 'left',
|
||||
},
|
||||
};
|
||||
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`
|
||||
|
|
@ -53,10 +53,13 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@braintree/sanitize-url": "^6.0.2",
|
||||
"@types/d3-scale": "^4.0.3",
|
||||
"@types/d3-scale-chromatic": "^3.0.0",
|
||||
"cytoscape": "^3.23.0",
|
||||
"cytoscape-cose-bilkent": "^4.1.0",
|
||||
"cytoscape-fcose": "^2.1.0",
|
||||
"d3": "^7.4.0",
|
||||
"d3-sankey": "^0.12.3",
|
||||
"dagre-d3-es": "7.0.10",
|
||||
"dayjs": "^1.11.7",
|
||||
"dompurify": "3.0.3",
|
||||
|
|
@ -73,6 +76,7 @@
|
|||
"devDependencies": {
|
||||
"@types/cytoscape": "^3.19.9",
|
||||
"@types/d3": "^7.4.0",
|
||||
"@types/d3-sankey": "^0.12.1",
|
||||
"@types/d3-selection": "^3.0.5",
|
||||
"@types/dompurify": "^3.0.2",
|
||||
"@types/jsdom": "^21.1.1",
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ export interface MermaidConfig {
|
|||
mindmap?: MindmapDiagramConfig;
|
||||
gitGraph?: GitGraphDiagramConfig;
|
||||
c4?: C4DiagramConfig;
|
||||
sankey?: SankeyDiagramConfig;
|
||||
dompurifyConfig?: DOMPurify.Config;
|
||||
wrap?: boolean;
|
||||
fontSize?: number;
|
||||
|
|
@ -411,6 +412,26 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
|
|||
wrappingWidth?: number;
|
||||
}
|
||||
|
||||
export enum SankeyLinkColor {
|
||||
source = 'source',
|
||||
target = 'target',
|
||||
gradient = 'gradient',
|
||||
}
|
||||
|
||||
export enum SankeyNodeAlignment {
|
||||
left = 'left',
|
||||
right = 'right',
|
||||
center = 'center',
|
||||
justify = 'justify',
|
||||
}
|
||||
|
||||
export interface SankeyDiagramConfig extends BaseDiagramConfig {
|
||||
width?: number;
|
||||
height?: number;
|
||||
linkColor?: SankeyLinkColor | string;
|
||||
nodeAlignment?: SankeyNodeAlignment;
|
||||
}
|
||||
|
||||
export interface FontConfig {
|
||||
fontSize?: string | number;
|
||||
fontFamily?: string;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import theme from './themes/index.js';
|
||||
import { MermaidConfig } from './config.type.js';
|
||||
import { MermaidConfig, SankeyLinkColor, SankeyNodeAlignment } from './config.type.js';
|
||||
/**
|
||||
* **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click
|
||||
* here](8.6.0_docs.md)].**
|
||||
|
|
@ -2270,6 +2270,13 @@ const config: Partial<MermaidConfig> = {
|
|||
padding: 10,
|
||||
maxNodeWidth: 200,
|
||||
},
|
||||
sankey: {
|
||||
width: 800,
|
||||
height: 400,
|
||||
linkColor: SankeyLinkColor.gradient,
|
||||
nodeAlignment: SankeyNodeAlignment.justify,
|
||||
useMaxWidth: false,
|
||||
},
|
||||
fontSize: 16,
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ import errorDiagram from '../diagrams/error/errorDiagram.js';
|
|||
import flowchartElk from '../diagrams/flowchart/elk/detector.js';
|
||||
import timeline from '../diagrams/timeline/detector.js';
|
||||
import mindmap from '../diagrams/mindmap/detector.js';
|
||||
import sankey from '../diagrams/sankey/sankeyDetector.js';
|
||||
import { registerLazyLoadedDiagrams } from './detectType.js';
|
||||
import { registerDiagram } from './diagramAPI.js';
|
||||
|
||||
|
|
@ -79,6 +80,7 @@ export const addDiagrams = () => {
|
|||
stateV2,
|
||||
state,
|
||||
journey,
|
||||
quadrantChart
|
||||
quadrantChart,
|
||||
sankey
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
%% There are leading and trailing spaces, do not crop
|
||||
Agricultural 'waste',Bio-conversion,124.729
|
||||
%% line with a comment
|
||||
|
||||
%% Normal line
|
||||
Bio-conversion,Liquid,0.597
|
||||
|
||||
%% Line with unquoted sankey keyword
|
||||
sankey,target,10
|
||||
|
||||
%% Quoted sankey keyword
|
||||
"sankey",target,10
|
||||
|
||||
%% Another normal line
|
||||
Bio-conversion,Losses,26.862
|
||||
|
||||
%% Line with integer amount
|
||||
Bio-conversion,Solid,280
|
||||
|
||||
%% Some blank lines in the middle of CSV
|
||||
|
||||
|
||||
%% Another normal line
|
||||
Bio-conversion,Gas,81.144
|
||||
|
||||
%% Quoted line
|
||||
"Biofuel imports",Liquid,35
|
||||
|
||||
%% Quoted line with escaped quotes inside
|
||||
"""Biomass imports""",Solid,35
|
||||
|
||||
%% Lines containing commas inside
|
||||
%% Quoted and unquoted values should be equal in terms of graph
|
||||
"District heating","Heating and cooling, commercial",22.505
|
||||
District heating,"Heating and cooling, homes",46.184
|
||||
|
||||
%% A bunch of lines, normal CSV
|
||||
Coal imports,Coal,11.606
|
||||
Coal reserves,Coal,63.965
|
||||
Coal,Solid,75.571
|
||||
District heating,Industry,10.639
|
||||
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
|
||||
|
||||
%% lines at the end, do not remove
|
||||
|
||||
|
Can't render this file because it has a wrong number of fields in line 2.
|
|
|
@ -0,0 +1,69 @@
|
|||
/** mermaid */
|
||||
|
||||
//---------------------------------------------------------
|
||||
// We support csv format as defined here:
|
||||
// https://www.ietf.org/rfc/rfc4180.txt
|
||||
// There are some minor changes for compliance with jison
|
||||
// We also parse only 3 columns: source,target,value
|
||||
// And allow blank lines for visual purposes
|
||||
//---------------------------------------------------------
|
||||
|
||||
%lex
|
||||
|
||||
%options case-insensitive
|
||||
%options easy_keword_rules
|
||||
|
||||
%x escaped_text
|
||||
%x csv
|
||||
|
||||
// as per section 6.1 of RFC 2234 [2]
|
||||
COMMA \u002C
|
||||
CR \u000D
|
||||
LF \u000A
|
||||
CRLF \u000D\u000A
|
||||
ESCAPED_QUOTE \u0022
|
||||
DQUOTE \u0022
|
||||
TEXTDATA [\u0020-\u0021\u0023-\u002B\u002D-\u007E]
|
||||
|
||||
%%
|
||||
|
||||
<INITIAL>"sankey-beta" { this.pushState('csv'); return 'SANKEY'; }
|
||||
<INITIAL,csv><<EOF>> { return 'EOF' } // match end of file
|
||||
<INITIAL,csv>({CRLF}|{LF}) { return 'NEWLINE' }
|
||||
<INITIAL,csv>{COMMA} { return 'COMMA' }
|
||||
<INITIAL,csv>{DQUOTE} { this.pushState('escaped_text'); return 'DQUOTE'; }
|
||||
<INITIAL,csv>{TEXTDATA}* { return 'NON_ESCAPED_TEXT' }
|
||||
<INITIAL,csv,escaped_text>{DQUOTE}(?!{DQUOTE}) {this.popState('escaped_text'); return 'DQUOTE'; } // unescaped DQUOTE closes string
|
||||
<INITIAL,csv,escaped_text>({TEXTDATA}|{COMMA}|{CR}|{LF}|{DQUOTE}{DQUOTE})* { return 'ESCAPED_TEXT'; }
|
||||
|
||||
/lex
|
||||
|
||||
%start start
|
||||
|
||||
%% // language grammar
|
||||
|
||||
start: SANKEY NEWLINE csv opt_eof;
|
||||
|
||||
csv: record csv_tail;
|
||||
csv_tail: NEWLINE csv | ;
|
||||
opt_eof: EOF | ;
|
||||
|
||||
record
|
||||
: field\[source] COMMA field\[target] COMMA field\[value] {
|
||||
const source = yy.findOrCreateNode($source.trim().replaceAll('""', '"'));
|
||||
const target = yy.findOrCreateNode($target.trim().replaceAll('""', '"'));
|
||||
const value = parseFloat($value.trim());
|
||||
yy.addLink(source,target,value);
|
||||
} // parse only 3 fields, this is not part of CSV standard
|
||||
;
|
||||
|
||||
field
|
||||
: escaped { $$=$escaped; }
|
||||
| non_escaped { $$=$non_escaped; }
|
||||
;
|
||||
|
||||
escaped: DQUOTE ESCAPED_TEXT DQUOTE { $$=$ESCAPED_TEXT; };
|
||||
|
||||
non_escaped: NON_ESCAPED_TEXT { $$=$NON_ESCAPED_TEXT; };
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
// @ts-ignore: jison doesn't export types
|
||||
import sankey from './sankey.jison';
|
||||
import db from '../sankeyDB.js';
|
||||
import { cleanupComments } from '../../../diagram-api/comments.js';
|
||||
import { prepareTextForParsing } from '../sankeyUtils.js';
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
|
||||
describe('Sankey diagram', function () {
|
||||
describe('when parsing an info graph it', function () {
|
||||
beforeEach(function () {
|
||||
sankey.parser.yy = db;
|
||||
sankey.parser.yy.clear();
|
||||
});
|
||||
|
||||
it('parses csv', async () => {
|
||||
const csv = path.resolve(__dirname, './energy.csv');
|
||||
const data = fs.readFileSync(csv, 'utf8');
|
||||
const graphDefinition = prepareTextForParsing(cleanupComments('sankey-beta\n\n ' + data));
|
||||
|
||||
sankey.parser.parse(graphDefinition);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
import * as configApi from '../../config.js';
|
||||
import common from '../common/common.js';
|
||||
import {
|
||||
setAccTitle,
|
||||
getAccTitle,
|
||||
getAccDescription,
|
||||
setAccDescription,
|
||||
setDiagramTitle,
|
||||
getDiagramTitle,
|
||||
clear as commonClear,
|
||||
} from '../../commonDb.js';
|
||||
|
||||
// Sankey diagram represented by nodes and links between those nodes
|
||||
let links: SankeyLink[] = [];
|
||||
// Array of nodes guarantees their order
|
||||
let nodes: SankeyNode[] = [];
|
||||
// We also have to track nodes uniqueness (by ID)
|
||||
let nodesMap: Record<string, SankeyNode> = {};
|
||||
|
||||
const clear = (): void => {
|
||||
links = [];
|
||||
nodes = [];
|
||||
nodesMap = {};
|
||||
commonClear();
|
||||
};
|
||||
|
||||
class SankeyLink {
|
||||
constructor(public source: SankeyNode, public target: SankeyNode, public value: number = 0) {}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param source - Node where the link starts
|
||||
* @param target - Node where the link ends
|
||||
* @param value - number, float or integer, describes the amount to be passed
|
||||
*/
|
||||
const addLink = (source: SankeyNode, target: SankeyNode, value: number): void => {
|
||||
links.push(new SankeyLink(source, target, value));
|
||||
};
|
||||
|
||||
class SankeyNode {
|
||||
constructor(public ID: string) {}
|
||||
}
|
||||
|
||||
const findOrCreateNode = (ID: string): SankeyNode => {
|
||||
ID = common.sanitizeText(ID, configApi.getConfig());
|
||||
|
||||
if (!nodesMap[ID]) {
|
||||
nodesMap[ID] = new SankeyNode(ID);
|
||||
nodes.push(nodesMap[ID]);
|
||||
}
|
||||
return nodesMap[ID];
|
||||
};
|
||||
|
||||
const getNodes = () => nodes;
|
||||
const getLinks = () => links;
|
||||
|
||||
const getGraph = () => ({
|
||||
nodes: nodes.map((node) => ({ id: node.ID })),
|
||||
links: links.map((link) => ({
|
||||
source: link.source.ID,
|
||||
target: link.target.ID,
|
||||
value: link.value,
|
||||
})),
|
||||
});
|
||||
|
||||
export default {
|
||||
nodesMap,
|
||||
getConfig: () => configApi.getConfig().sankey,
|
||||
getNodes,
|
||||
getLinks,
|
||||
getGraph,
|
||||
addLink,
|
||||
findOrCreateNode,
|
||||
getAccTitle,
|
||||
setAccTitle,
|
||||
getAccDescription,
|
||||
setAccDescription,
|
||||
getDiagramTitle,
|
||||
setDiagramTitle,
|
||||
clear,
|
||||
};
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
|
||||
|
||||
const id = 'sankey';
|
||||
|
||||
const detector: DiagramDetector = (txt) => {
|
||||
return /^\s*sankey-beta/.test(txt);
|
||||
};
|
||||
|
||||
const loader = async () => {
|
||||
const { diagram } = await import('./sankeyDiagram.js');
|
||||
return { id, diagram };
|
||||
};
|
||||
|
||||
const plugin: ExternalDiagramDefinition = {
|
||||
id,
|
||||
detector,
|
||||
loader,
|
||||
};
|
||||
|
||||
export default plugin;
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { DiagramDefinition } from '../../diagram-api/types.js';
|
||||
// @ts-ignore: jison doesn't export types
|
||||
import parser from './parser/sankey.jison';
|
||||
import db from './sankeyDB.js';
|
||||
import renderer from './sankeyRenderer.js';
|
||||
import { prepareTextForParsing } from './sankeyUtils.js';
|
||||
|
||||
const originalParse = parser.parse.bind(parser);
|
||||
parser.parse = (text: string) => originalParse(prepareTextForParsing(text));
|
||||
|
||||
export const diagram: DiagramDefinition = {
|
||||
parser,
|
||||
db,
|
||||
renderer,
|
||||
};
|
||||
|
|
@ -0,0 +1,205 @@
|
|||
import { Diagram } from '../../Diagram.js';
|
||||
import * as configApi from '../../config.js';
|
||||
|
||||
import {
|
||||
select as d3select,
|
||||
scaleOrdinal as d3scaleOrdinal,
|
||||
schemeTableau10 as d3schemeTableau10,
|
||||
} from 'd3';
|
||||
|
||||
import {
|
||||
sankey as d3Sankey,
|
||||
sankeyLinkHorizontal as d3SankeyLinkHorizontal,
|
||||
sankeyLeft as d3SankeyLeft,
|
||||
sankeyRight as d3SankeyRight,
|
||||
sankeyCenter as d3SankeyCenter,
|
||||
sankeyJustify as d3SankeyJustify,
|
||||
SankeyNode as d3SankeyNode,
|
||||
} from 'd3-sankey';
|
||||
import { configureSvgSize } from '../../setupGraphViewbox.js';
|
||||
import { Uid } from '../../rendering-util/uid.js';
|
||||
import { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js';
|
||||
|
||||
// Map config options to alignment functions
|
||||
const alignmentsMap: Record<
|
||||
SankeyNodeAlignment,
|
||||
(node: d3SankeyNode<object, object>, n: number) => number
|
||||
> = {
|
||||
[SankeyNodeAlignment.left]: d3SankeyLeft,
|
||||
[SankeyNodeAlignment.right]: d3SankeyRight,
|
||||
[SankeyNodeAlignment.center]: d3SankeyCenter,
|
||||
[SankeyNodeAlignment.justify]: d3SankeyJustify,
|
||||
};
|
||||
|
||||
/**
|
||||
* Draws Sankey diagram.
|
||||
*
|
||||
* @param text - The text of the diagram
|
||||
* @param id - The id of the diagram which will be used as a DOM element id¨
|
||||
* @param _version - Mermaid version from package.json
|
||||
* @param diagObj - A standard diagram containing the db and the text and type etc of the diagram
|
||||
*/
|
||||
export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void {
|
||||
// Get Sankey config
|
||||
const { securityLevel, sankey: conf } = configApi.getConfig();
|
||||
const defaultSankeyConfig = configApi!.defaultConfig!.sankey!;
|
||||
|
||||
// TODO:
|
||||
// This code repeats for every diagram
|
||||
// Figure out what is happening there, probably it should be separated
|
||||
// The main thing is svg object that is a d3 wrapper for svg operations
|
||||
//
|
||||
let sandboxElement: any;
|
||||
if (securityLevel === 'sandbox') {
|
||||
sandboxElement = d3select('#i' + id);
|
||||
}
|
||||
const root =
|
||||
securityLevel === 'sandbox'
|
||||
? d3select(sandboxElement.nodes()[0].contentDocument.body)
|
||||
: d3select('body');
|
||||
// @ts-ignore TODO root.select is not callable
|
||||
const svg = securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : d3select(`[id="${id}"]`);
|
||||
|
||||
// Establish svg dimensions and get width and height
|
||||
//
|
||||
const width = conf?.width || defaultSankeyConfig.width!;
|
||||
const height = conf?.height || defaultSankeyConfig.width!;
|
||||
const useMaxWidth = conf?.useMaxWidth || defaultSankeyConfig.useMaxWidth!;
|
||||
const nodeAlignment = conf?.nodeAlignment || defaultSankeyConfig.nodeAlignment!;
|
||||
|
||||
// FIX: using max width prevents height from being set, is it intended?
|
||||
// to add height directly one can use `svg.attr('height', height)`
|
||||
//
|
||||
// @ts-ignore TODO: svg type vs selection mismatch
|
||||
configureSvgSize(svg, height, width, useMaxWidth);
|
||||
|
||||
// Prepare data for construction based on diagObj.db
|
||||
// This must be a mutable object with `nodes` and `links` properties:
|
||||
//
|
||||
// {
|
||||
// "nodes": [ { "id": "Alice" }, { "id": "Bob" }, { "id": "Carol" } ],
|
||||
// "links": [ { "source": "Alice", "target": "Bob", "value": 23 }, { "source": "Bob", "target": "Carol", "value": 43 } ]
|
||||
// }
|
||||
//
|
||||
// @ts-ignore TODO: db should be coerced to sankey DB type
|
||||
const graph = diagObj.db.getGraph();
|
||||
|
||||
// Get alignment function
|
||||
const nodeAlign = alignmentsMap[nodeAlignment];
|
||||
|
||||
// Construct and configure a Sankey generator
|
||||
// That will be a function that calculates nodes and links dimensions
|
||||
//
|
||||
const nodeWidth = 10;
|
||||
const sankey = d3Sankey()
|
||||
.nodeId((d: any) => d.id) // we use 'id' property to identify node
|
||||
.nodeWidth(nodeWidth)
|
||||
.nodePadding(10)
|
||||
.nodeAlign(nodeAlign)
|
||||
.extent([
|
||||
[0, 0],
|
||||
[width, height],
|
||||
]);
|
||||
|
||||
// Compute the Sankey layout: calculate nodes and links positions
|
||||
// Our `graph` object will be mutated by this and enriched with other properties
|
||||
//
|
||||
sankey(graph);
|
||||
|
||||
// Get color scheme for the graph
|
||||
const colorScheme = d3scaleOrdinal(d3schemeTableau10);
|
||||
|
||||
// Create rectangles for nodes
|
||||
svg
|
||||
.append('g')
|
||||
.attr('class', 'nodes')
|
||||
.selectAll('.node')
|
||||
.data(graph.nodes)
|
||||
.join('g')
|
||||
.attr('class', 'node')
|
||||
.attr('id', (d: any) => (d.uid = Uid.next('node-')).id)
|
||||
.attr('transform', function (d: any) {
|
||||
return 'translate(' + d.x0 + ',' + d.y0 + ')';
|
||||
})
|
||||
.attr('x', (d: any) => d.x0)
|
||||
.attr('y', (d: any) => d.y0)
|
||||
.append('rect')
|
||||
.attr('height', (d: any) => {
|
||||
return d.y1 - d.y0;
|
||||
})
|
||||
.attr('width', (d: any) => d.x1 - d.x0)
|
||||
.attr('fill', (d: any) => colorScheme(d.id));
|
||||
|
||||
// Create labels for nodes
|
||||
svg
|
||||
.append('g')
|
||||
.attr('class', 'node-labels')
|
||||
.attr('font-family', 'sans-serif')
|
||||
.attr('font-size', 14)
|
||||
.selectAll('text')
|
||||
.data(graph.nodes)
|
||||
.join('text')
|
||||
.attr('x', (d: any) => (d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6))
|
||||
.attr('y', (d: any) => (d.y1 + d.y0) / 2)
|
||||
.attr('dy', '0.35em')
|
||||
.attr('text-anchor', (d: any) => (d.x0 < width / 2 ? 'start' : 'end'))
|
||||
.text((d: any) => d.id);
|
||||
|
||||
// Creates the paths that represent the links.
|
||||
const link = svg
|
||||
.append('g')
|
||||
.attr('class', 'links')
|
||||
.attr('fill', 'none')
|
||||
.attr('stroke-opacity', 0.5)
|
||||
.selectAll('.link')
|
||||
.data(graph.links)
|
||||
.join('g')
|
||||
.attr('class', 'link')
|
||||
.style('mix-blend-mode', 'multiply');
|
||||
|
||||
const linkColor = conf?.linkColor || SankeyLinkColor.gradient;
|
||||
|
||||
if (linkColor === SankeyLinkColor.gradient) {
|
||||
const gradient = link
|
||||
.append('linearGradient')
|
||||
.attr('id', (d: any) => (d.uid = Uid.next('linearGradient-')).id)
|
||||
.attr('gradientUnits', 'userSpaceOnUse')
|
||||
.attr('x1', (d: any) => d.source.x1)
|
||||
.attr('x2', (d: any) => d.target.x0);
|
||||
|
||||
gradient
|
||||
.append('stop')
|
||||
.attr('offset', '0%')
|
||||
.attr('stop-color', (d: any) => colorScheme(d.source.id));
|
||||
|
||||
gradient
|
||||
.append('stop')
|
||||
.attr('offset', '100%')
|
||||
.attr('stop-color', (d: any) => colorScheme(d.target.id));
|
||||
}
|
||||
|
||||
let coloring: any;
|
||||
switch (linkColor) {
|
||||
case SankeyLinkColor.gradient:
|
||||
coloring = (d: any) => d.uid;
|
||||
break;
|
||||
case SankeyLinkColor.source:
|
||||
coloring = (d: any) => colorScheme(d.source.id);
|
||||
break;
|
||||
case SankeyLinkColor.target:
|
||||
coloring = (d: any) => colorScheme(d.target.id);
|
||||
break;
|
||||
default:
|
||||
coloring = linkColor;
|
||||
}
|
||||
|
||||
link
|
||||
.append('path')
|
||||
.attr('d', d3SankeyLinkHorizontal())
|
||||
.attr('stroke', coloring)
|
||||
.attr('stroke-width', (d: any) => Math.max(1, d.width));
|
||||
};
|
||||
|
||||
export default {
|
||||
draw,
|
||||
};
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
export const prepareTextForParsing = (text: string): string => {
|
||||
const textToParse = text
|
||||
.replaceAll(/^[^\S\n\r]+|[^\S\n\r]+$/g, '') // remove all trailing spaces for each row
|
||||
.replaceAll(/([\n\r])+/g, '\n') // remove empty lines duplicated
|
||||
.trim();
|
||||
|
||||
return textToParse;
|
||||
};
|
||||
|
|
@ -138,6 +138,7 @@ function sidebarSyntax() {
|
|||
{ text: 'Mindmaps 🔥', link: '/syntax/mindmap' },
|
||||
{ text: 'Timeline 🔥', link: '/syntax/timeline' },
|
||||
{ text: 'Zenuml 🔥', link: '/syntax/zenuml' },
|
||||
{ text: 'Sankey 🔥', link: '/syntax/sankey' },
|
||||
{ text: 'Other Examples', link: '/syntax/examples' },
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ async function download(url: string, fileName: URL) {
|
|||
const image = await fetch(url);
|
||||
await writeFile(fileName, Buffer.from(await image.arrayBuffer()));
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
console.error('failed to load', url, error);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -26,10 +26,13 @@ async function fetchAvatars() {
|
|||
await mkdir(fileURLToPath(new URL(getAvatarPath('none'))).replace('none.png', ''), {
|
||||
recursive: true,
|
||||
});
|
||||
|
||||
contributors = JSON.parse(await readFile(pathContributors, { encoding: 'utf-8' }));
|
||||
for (const name of contributors) {
|
||||
await download(`https://github.com/${name}.png?size=100`, getAvatarPath(name));
|
||||
}
|
||||
let avatars = contributors.map((name) => {
|
||||
download(`https://github.com/${name}.png?size=100`, getAvatarPath(name));
|
||||
});
|
||||
|
||||
await Promise.all(avatars);
|
||||
}
|
||||
|
||||
fetchAvatars();
|
||||
|
|
|
|||
|
|
@ -10,23 +10,27 @@ interface Contributor {
|
|||
|
||||
async function fetchContributors() {
|
||||
const collaborators: string[] = [];
|
||||
let page = 1;
|
||||
let data: Contributor[] = [];
|
||||
do {
|
||||
const response = await fetch(
|
||||
`https://api.github.com/repos/mermaid-js/mermaid/contributors?per_page=100&page=${page}`,
|
||||
{
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'content-type': 'application/json',
|
||||
},
|
||||
}
|
||||
);
|
||||
data = await response.json();
|
||||
collaborators.push(...data.map((i) => i.login));
|
||||
console.log(`Fetched page ${page}`);
|
||||
page++;
|
||||
} while (data.length === 100);
|
||||
try {
|
||||
let page = 1;
|
||||
let data: Contributor[] = [];
|
||||
do {
|
||||
const response = await fetch(
|
||||
`https://api.github.com/repos/mermaid-js/mermaid/contributors?per_page=100&page=${page}`,
|
||||
{
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'content-type': 'application/json',
|
||||
},
|
||||
}
|
||||
);
|
||||
data = await response.json();
|
||||
collaborators.push(...data.map((i) => i.login));
|
||||
console.log(`Fetched page ${page}`);
|
||||
page++;
|
||||
} while (data.length === 100);
|
||||
} catch (e) {
|
||||
/* contributors fetching failure must not hinder docs development */
|
||||
}
|
||||
return collaborators.filter((name) => !name.includes('[bot]'));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,292 @@
|
|||
# Sankey diagrams
|
||||
|
||||
> A sankey diagram is a visualization used to depict a flow from one set of values to another.
|
||||
|
||||
::: warning
|
||||
This is an experimental diagram. Its syntax are very close to plain CSV, but it is to be extended in the nearest future.
|
||||
:::
|
||||
|
||||
The things being connected are called nodes and the connections are called links.
|
||||
|
||||
## Example
|
||||
|
||||
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.
|
||||
|
||||
```mermaid
|
||||
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
|
||||
```
|
||||
|
||||
::: details
|
||||
|
||||
```mermaid-example
|
||||
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
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Syntax
|
||||
|
||||
The idea behind syntax is that a user types `sankey-beta` keyword first, then pastes raw CSV below and get the result.
|
||||
|
||||
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
|
||||
|
||||
### Basic
|
||||
|
||||
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,Losses,26.862
|
||||
|
||||
Bio-conversion,Solid,280.322
|
||||
|
||||
Bio-conversion,Gas,81.144
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sankey-beta
|
||||
|
||||
Bio-conversion,Losses,26.862
|
||||
|
||||
Bio-conversion,Solid,280.322
|
||||
|
||||
Bio-conversion,Gas,81.144
|
||||
```
|
||||
|
||||
### Commas
|
||||
|
||||
If you need to have a comma, wrap it in double quotes:
|
||||
|
||||
```mermaid-example
|
||||
sankey-beta
|
||||
|
||||
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, commercial",70.672
|
||||
```
|
||||
|
||||
### Double Quotes
|
||||
|
||||
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, ""commercial""",70.672
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sankey-beta
|
||||
|
||||
Pumped heat,"Heating and cooling, ""homes""",193.026
|
||||
Pumped heat,"Heating and cooling, ""commercial""",70.672
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
You can customize link colors, node alignments and diagram dimensions.
|
||||
|
||||
```html
|
||||
<script>
|
||||
const config = {
|
||||
startOnLoad: true,
|
||||
securityLevel: 'loose',
|
||||
sankey: {
|
||||
width: 800,
|
||||
height: 400,
|
||||
linkColor: 'source',
|
||||
nodeAlignment: 'left',
|
||||
},
|
||||
};
|
||||
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`
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
export class Uid {
|
||||
private static count = 0;
|
||||
id: string;
|
||||
href: string;
|
||||
|
||||
public static next(name: string): Uid {
|
||||
return new Uid(name + ++Uid.count);
|
||||
}
|
||||
|
||||
constructor(id: string) {
|
||||
this.id = id;
|
||||
this.href = `#${id}`;
|
||||
}
|
||||
|
||||
toString(): string {
|
||||
return 'url(' + this.href + ')';
|
||||
}
|
||||
}
|
||||
220
pnpm-lock.yaml
220
pnpm-lock.yaml
|
|
@ -190,6 +190,12 @@ importers:
|
|||
'@braintree/sanitize-url':
|
||||
specifier: ^6.0.2
|
||||
version: 6.0.2
|
||||
'@types/d3-scale':
|
||||
specifier: ^4.0.3
|
||||
version: 4.0.3
|
||||
'@types/d3-scale-chromatic':
|
||||
specifier: ^3.0.0
|
||||
version: 3.0.0
|
||||
cytoscape:
|
||||
specifier: ^3.23.0
|
||||
version: 3.23.0
|
||||
|
|
@ -202,6 +208,9 @@ importers:
|
|||
d3:
|
||||
specifier: ^7.4.0
|
||||
version: 7.8.2
|
||||
d3-sankey:
|
||||
specifier: ^0.12.3
|
||||
version: 0.12.3
|
||||
dagre-d3-es:
|
||||
specifier: 7.0.10
|
||||
version: 7.0.10
|
||||
|
|
@ -245,6 +254,9 @@ importers:
|
|||
'@types/d3':
|
||||
specifier: ^7.4.0
|
||||
version: 7.4.0
|
||||
'@types/d3-sankey':
|
||||
specifier: ^0.12.1
|
||||
version: 0.12.1
|
||||
'@types/d3-selection':
|
||||
specifier: ^3.0.5
|
||||
version: 3.0.5
|
||||
|
|
@ -447,6 +459,58 @@ importers:
|
|||
specifier: ^7.0.0
|
||||
version: 7.0.0
|
||||
|
||||
packages/mermaid/src/vitepress:
|
||||
dependencies:
|
||||
'@vueuse/core':
|
||||
specifier: ^10.1.0
|
||||
version: 10.1.0(vue@3.2.47)
|
||||
jiti:
|
||||
specifier: ^1.18.2
|
||||
version: 1.18.2
|
||||
vue:
|
||||
specifier: ^3.2.47
|
||||
version: 3.2.47
|
||||
devDependencies:
|
||||
'@iconify-json/carbon':
|
||||
specifier: ^1.1.16
|
||||
version: 1.1.16
|
||||
'@unocss/reset':
|
||||
specifier: ^0.53.0
|
||||
version: 0.53.0
|
||||
'@vite-pwa/vitepress':
|
||||
specifier: ^0.2.0
|
||||
version: 0.2.0(vite-plugin-pwa@0.16.0)
|
||||
'@vitejs/plugin-vue':
|
||||
specifier: ^4.2.1
|
||||
version: 4.2.1(vite@4.3.9)(vue@3.2.47)
|
||||
fast-glob:
|
||||
specifier: ^3.2.12
|
||||
version: 3.2.12
|
||||
https-localhost:
|
||||
specifier: ^4.7.1
|
||||
version: 4.7.1
|
||||
pathe:
|
||||
specifier: ^1.1.0
|
||||
version: 1.1.0
|
||||
unocss:
|
||||
specifier: ^0.53.0
|
||||
version: 0.53.0(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.9)
|
||||
unplugin-vue-components:
|
||||
specifier: ^0.25.0
|
||||
version: 0.25.0(rollup@2.79.1)(vue@3.2.47)
|
||||
vite:
|
||||
specifier: ^4.3.3
|
||||
version: 4.3.9(@types/node@18.16.0)
|
||||
vite-plugin-pwa:
|
||||
specifier: ^0.16.0
|
||||
version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
|
||||
vitepress:
|
||||
specifier: 1.0.0-beta.3
|
||||
version: 1.0.0-beta.3(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
|
||||
workbox-window:
|
||||
specifier: ^7.0.0
|
||||
version: 7.0.0
|
||||
|
||||
tests/webpack:
|
||||
dependencies:
|
||||
'@mermaid-js/mermaid-example-diagram':
|
||||
|
|
@ -3980,6 +4044,10 @@ packages:
|
|||
'@types/d3-color': 3.1.0
|
||||
dev: true
|
||||
|
||||
/@types/d3-path@1.0.9:
|
||||
resolution: {integrity: sha512-NaIeSIBiFgSC6IGUBjZWcscUJEq7vpVu7KthHN8eieTV9d9MqkSOZLH4chq1PmcKy06PNe3axLeKmRIyxJ+PZQ==}
|
||||
dev: true
|
||||
|
||||
/@types/d3-path@3.0.0:
|
||||
resolution: {integrity: sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==}
|
||||
dev: true
|
||||
|
|
@ -3996,20 +4064,30 @@ packages:
|
|||
resolution: {integrity: sha512-IIE6YTekGczpLYo/HehAy3JGF1ty7+usI97LqraNa8IiDur+L44d0VOjAvFQWJVdZOJHukUJw+ZdZBlgeUsHOQ==}
|
||||
dev: true
|
||||
|
||||
/@types/d3-scale-chromatic@3.0.0:
|
||||
resolution: {integrity: sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw==}
|
||||
/@types/d3-sankey@0.12.1:
|
||||
resolution: {integrity: sha512-10X6l6lXB42udBNX9/fDN+kJuooifSMk7+x4U9815eobavldqis4wDdFQUQjMazh+qlzsUZsGzXKxfWFUVt+3w==}
|
||||
dependencies:
|
||||
'@types/d3-shape': 1.3.8
|
||||
dev: true
|
||||
|
||||
/@types/d3-scale@4.0.2:
|
||||
resolution: {integrity: sha512-Yk4htunhPAwN0XGlIwArRomOjdoBFXC3+kCxK2Ubg7I9shQlVSJy/pG/Ht5ASN+gdMIalpk8TJ5xV74jFsetLA==}
|
||||
/@types/d3-scale-chromatic@3.0.0:
|
||||
resolution: {integrity: sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw==}
|
||||
|
||||
/@types/d3-scale@4.0.3:
|
||||
resolution: {integrity: sha512-PATBiMCpvHJSMtZAMEhc2WyL+hnzarKzI6wAHYjhsonjWJYGq5BXTzQjv4l8m2jO183/4wZ90rKvSeT7o72xNQ==}
|
||||
dependencies:
|
||||
'@types/d3-time': 3.0.0
|
||||
dev: true
|
||||
|
||||
/@types/d3-selection@3.0.5:
|
||||
resolution: {integrity: sha512-xCB0z3Hi8eFIqyja3vW8iV01+OHGYR2di/+e+AiOcXIOrY82lcvWW8Ke1DYE/EUVMsBl4Db9RppSBS3X1U6J0w==}
|
||||
dev: true
|
||||
|
||||
/@types/d3-shape@1.3.8:
|
||||
resolution: {integrity: sha512-gqfnMz6Fd5H6GOLYixOZP/xlrMtJms9BaS+6oWxTKHNqPGZ93BkWWupQSCYm6YHqx6h9wjRupuJb90bun6ZaYg==}
|
||||
dependencies:
|
||||
'@types/d3-path': 1.0.9
|
||||
dev: true
|
||||
|
||||
/@types/d3-shape@3.1.0:
|
||||
resolution: {integrity: sha512-jYIYxFFA9vrJ8Hd4Se83YI6XF+gzDL1aC5DCsldai4XYYiVNdhtpGbA/GM6iyQ8ayhSp3a148LY34hy7A4TxZA==}
|
||||
dependencies:
|
||||
|
|
@ -4022,7 +4100,6 @@ packages:
|
|||
|
||||
/@types/d3-time@3.0.0:
|
||||
resolution: {integrity: sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==}
|
||||
dev: true
|
||||
|
||||
/@types/d3-timer@3.0.0:
|
||||
resolution: {integrity: sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==}
|
||||
|
|
@ -4065,7 +4142,7 @@ packages:
|
|||
'@types/d3-polygon': 3.0.0
|
||||
'@types/d3-quadtree': 3.0.2
|
||||
'@types/d3-random': 3.0.1
|
||||
'@types/d3-scale': 4.0.2
|
||||
'@types/d3-scale': 4.0.3
|
||||
'@types/d3-scale-chromatic': 3.0.0
|
||||
'@types/d3-selection': 3.0.5
|
||||
'@types/d3-shape': 3.1.0
|
||||
|
|
@ -4656,6 +4733,17 @@ packages:
|
|||
- vite
|
||||
dev: true
|
||||
|
||||
/@unocss/astro@0.53.0(rollup@2.79.1)(vite@4.3.9):
|
||||
resolution: {integrity: sha512-8bR7ysIMZEOpcjd/cVmogcABSFDYPjUqMnbflv44p1A2/deemo9CIkpRARoq/96NQuzWJsKhKodcQodExZcqiA==}
|
||||
dependencies:
|
||||
'@unocss/core': 0.53.0
|
||||
'@unocss/reset': 0.53.0
|
||||
'@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.9)
|
||||
transitivePeerDependencies:
|
||||
- rollup
|
||||
- vite
|
||||
dev: true
|
||||
|
||||
/@unocss/cli@0.53.0(rollup@2.79.1):
|
||||
resolution: {integrity: sha512-9WNBHy8m8tMqwcp7mUhebRUBvHQfbx01CMe5cAFLmUYtJULM+8IjJxqERkaAZyyoOXf1TNO2v1dFAmCwhMRCLQ==}
|
||||
engines: {node: '>=14'}
|
||||
|
|
@ -4834,6 +4922,26 @@ packages:
|
|||
- rollup
|
||||
dev: true
|
||||
|
||||
/@unocss/vite@0.53.0(rollup@2.79.1)(vite@4.3.9):
|
||||
resolution: {integrity: sha512-JoZhKVNruRjfySMVg/zNJbLEn/NTXj29Wf0SN4++xnGKrSapkPzYC46psL5bm5N5v4SHdpepTCoonC3FWCY6Fw==}
|
||||
peerDependencies:
|
||||
vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
|
||||
dependencies:
|
||||
'@ampproject/remapping': 2.2.1
|
||||
'@rollup/pluginutils': 5.0.2(rollup@2.79.1)
|
||||
'@unocss/config': 0.53.0
|
||||
'@unocss/core': 0.53.0
|
||||
'@unocss/inspector': 0.53.0
|
||||
'@unocss/scope': 0.53.0
|
||||
'@unocss/transformer-directives': 0.53.0
|
||||
chokidar: 3.5.3
|
||||
fast-glob: 3.2.12
|
||||
magic-string: 0.30.0
|
||||
vite: 4.3.9(@types/node@18.16.0)
|
||||
transitivePeerDependencies:
|
||||
- rollup
|
||||
dev: true
|
||||
|
||||
/@vite-pwa/vitepress@0.2.0(vite-plugin-pwa@0.16.0):
|
||||
resolution: {integrity: sha512-dVQVaP6NB9woCFe4UASUqRp7uwBQJOVXlJlqK4krqXcbb3NuXIXIWOnU7HLpJnHqZj5U/81gKtLN6gs5gJBwiQ==}
|
||||
peerDependencies:
|
||||
|
|
@ -4853,6 +4961,17 @@ packages:
|
|||
vue: 3.2.47
|
||||
dev: true
|
||||
|
||||
/@vitejs/plugin-vue@4.2.1(vite@4.3.9)(vue@3.2.47):
|
||||
resolution: {integrity: sha512-ZTZjzo7bmxTRTkb8GSTwkPOYDIP7pwuyV+RV53c9PYUouwcbkIZIvWvNWlX2b1dYZqtOv7D6iUAnJLVNGcLrSw==}
|
||||
engines: {node: ^14.18.0 || >=16.0.0}
|
||||
peerDependencies:
|
||||
vite: ^4.0.0
|
||||
vue: ^3.2.25
|
||||
dependencies:
|
||||
vite: 4.3.9(@types/node@18.16.0)
|
||||
vue: 3.2.47
|
||||
dev: true
|
||||
|
||||
/@vitejs/plugin-vue@4.2.3(vite@4.3.8)(vue@3.3.4):
|
||||
resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==}
|
||||
engines: {node: ^14.18.0 || >=16.0.0}
|
||||
|
|
@ -7140,6 +7259,12 @@ packages:
|
|||
lodash: 4.17.21
|
||||
dev: false
|
||||
|
||||
/d3-array@2.12.1:
|
||||
resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==}
|
||||
dependencies:
|
||||
internmap: 1.0.1
|
||||
dev: false
|
||||
|
||||
/d3-array@3.2.0:
|
||||
resolution: {integrity: sha512-3yXFQo0oG3QCxbF06rMPFyGRMGJNS7NvsV1+2joOjbBE+9xvWQ8+GcMJAjRCzw06zQ3/arXeJgbPYcjUCuC+3g==}
|
||||
engines: {node: '>=12'}
|
||||
|
|
@ -7257,6 +7382,10 @@ packages:
|
|||
d3-color: 3.1.0
|
||||
dev: false
|
||||
|
||||
/d3-path@1.0.9:
|
||||
resolution: {integrity: sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==}
|
||||
dev: false
|
||||
|
||||
/d3-path@3.0.1:
|
||||
resolution: {integrity: sha512-gq6gZom9AFZby0YLduxT1qmrp4xpBA1YZr19OI717WIdKE2OM5ETq5qrHLb301IgxhLwcuxvGZVLeeWc/k1I6w==}
|
||||
engines: {node: '>=12'}
|
||||
|
|
@ -7277,6 +7406,13 @@ packages:
|
|||
engines: {node: '>=12'}
|
||||
dev: false
|
||||
|
||||
/d3-sankey@0.12.3:
|
||||
resolution: {integrity: sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==}
|
||||
dependencies:
|
||||
d3-array: 2.12.1
|
||||
d3-shape: 1.3.7
|
||||
dev: false
|
||||
|
||||
/d3-scale-chromatic@3.0.0:
|
||||
resolution: {integrity: sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==}
|
||||
engines: {node: '>=12'}
|
||||
|
|
@ -7301,6 +7437,12 @@ packages:
|
|||
engines: {node: '>=12'}
|
||||
dev: false
|
||||
|
||||
/d3-shape@1.3.7:
|
||||
resolution: {integrity: sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==}
|
||||
dependencies:
|
||||
d3-path: 1.0.9
|
||||
dev: false
|
||||
|
||||
/d3-shape@3.1.0:
|
||||
resolution: {integrity: sha512-tGDh1Muf8kWjEDT/LswZJ8WF85yDZLvVJpYU9Nq+8+yW1Z5enxrmXOhTArlkaElU+CTn0OTVNli+/i+HP45QEQ==}
|
||||
engines: {node: '>=12'}
|
||||
|
|
@ -8984,7 +9126,7 @@ packages:
|
|||
dependencies:
|
||||
foreground-child: 3.1.1
|
||||
jackspeak: 2.1.1
|
||||
minimatch: 9.0.1
|
||||
minimatch: 9.0.0
|
||||
minipass: 5.0.0
|
||||
path-scurry: 1.7.0
|
||||
dev: true
|
||||
|
|
@ -9536,6 +9678,10 @@ packages:
|
|||
side-channel: 1.0.4
|
||||
dev: true
|
||||
|
||||
/internmap@1.0.1:
|
||||
resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==}
|
||||
dev: false
|
||||
|
||||
/internmap@2.0.3:
|
||||
resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
|
||||
engines: {node: '>=12'}
|
||||
|
|
@ -14576,6 +14722,42 @@ packages:
|
|||
- vite
|
||||
dev: true
|
||||
|
||||
/unocss@0.53.0(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.9):
|
||||
resolution: {integrity: sha512-kY4h5ERiDYlSnL2X+hbDfh+uaF7QNouy7j51GOTUr3Q0aaWehaNd05b15SjHrab559dEC0mYfrSEdh/DnCK1cw==}
|
||||
engines: {node: '>=14'}
|
||||
peerDependencies:
|
||||
'@unocss/webpack': 0.53.0
|
||||
peerDependenciesMeta:
|
||||
'@unocss/webpack':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@unocss/astro': 0.53.0(rollup@2.79.1)(vite@4.3.9)
|
||||
'@unocss/cli': 0.53.0(rollup@2.79.1)
|
||||
'@unocss/core': 0.53.0
|
||||
'@unocss/extractor-arbitrary-variants': 0.53.0
|
||||
'@unocss/postcss': 0.53.0(postcss@8.4.23)
|
||||
'@unocss/preset-attributify': 0.53.0
|
||||
'@unocss/preset-icons': 0.53.0
|
||||
'@unocss/preset-mini': 0.53.0
|
||||
'@unocss/preset-tagify': 0.53.0
|
||||
'@unocss/preset-typography': 0.53.0
|
||||
'@unocss/preset-uno': 0.53.0
|
||||
'@unocss/preset-web-fonts': 0.53.0
|
||||
'@unocss/preset-wind': 0.53.0
|
||||
'@unocss/reset': 0.53.0
|
||||
'@unocss/transformer-attributify-jsx': 0.53.0
|
||||
'@unocss/transformer-attributify-jsx-babel': 0.53.0
|
||||
'@unocss/transformer-compile-class': 0.53.0
|
||||
'@unocss/transformer-directives': 0.53.0
|
||||
'@unocss/transformer-variant-group': 0.53.0
|
||||
'@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.9)
|
||||
transitivePeerDependencies:
|
||||
- postcss
|
||||
- rollup
|
||||
- supports-color
|
||||
- vite
|
||||
dev: true
|
||||
|
||||
/unpipe@1.0.0:
|
||||
resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
|
||||
engines: {node: '>= 0.8'}
|
||||
|
|
@ -14800,6 +14982,24 @@ packages:
|
|||
- supports-color
|
||||
dev: true
|
||||
|
||||
/vite-plugin-pwa@0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0):
|
||||
resolution: {integrity: sha512-E+AQRzHxqNU4ZhEeR8X37/foZB+ezJEhXauE/mcf1UITY6k2Pa1dtlFl+BQu57fTdiVlWim5S0Qy44Yap93Dkg==}
|
||||
engines: {node: '>=16.0.0'}
|
||||
peerDependencies:
|
||||
vite: ^3.1.0 || ^4.0.0
|
||||
workbox-build: ^7.0.0
|
||||
workbox-window: ^7.0.0
|
||||
dependencies:
|
||||
debug: 4.3.4(supports-color@8.1.1)
|
||||
fast-glob: 3.2.12
|
||||
pretty-bytes: 6.1.0
|
||||
vite: 4.3.9(@types/node@18.16.0)
|
||||
workbox-build: 7.0.0
|
||||
workbox-window: 7.0.0
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/vite@4.3.3(@types/node@18.16.0):
|
||||
resolution: {integrity: sha512-MwFlLBO4udZXd+VBcezo3u8mC77YQk+ik+fbc0GZWGgzfbPP+8Kf0fldhARqvSYmtIWoAJ5BXPClUbMTlqFxrA==}
|
||||
engines: {node: ^14.18.0 || >=16.0.0}
|
||||
|
|
@ -15906,7 +16106,3 @@ packages:
|
|||
/zwitch@2.0.2:
|
||||
resolution: {integrity: sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA==}
|
||||
dev: true
|
||||
|
||||
settings:
|
||||
autoInstallPeers: true
|
||||
excludeLinksFromLockfile: false
|
||||
|
|
|
|||
81
run
81
run
|
|
@ -1,40 +1,93 @@
|
|||
#!/bin/bash
|
||||
RUN="docker-compose run --rm"
|
||||
|
||||
ansi() { echo -e "\e[${1}m${*:2}\e[0m"; }
|
||||
bold() { ansi 1 "$@"; }
|
||||
# italic() { ansi 3 "$@"; }
|
||||
underline() { ansi 4 "$@"; }
|
||||
# strikethrough() { ansi 9 "$@"; }
|
||||
# red() { ansi 31 "$@"; }
|
||||
|
||||
name=$(basename $0)
|
||||
command=$1
|
||||
args=${@:2}
|
||||
|
||||
case $command in
|
||||
|
||||
sh)
|
||||
$RUN mermaid sh $args
|
||||
$RUN mermaid sh -c "npx $args"
|
||||
;;
|
||||
|
||||
install)
|
||||
$RUN mermaid sh -c "npx pnpm install"
|
||||
pnpm)
|
||||
$RUN mermaid sh -c "npx pnpm $args"
|
||||
;;
|
||||
|
||||
test)
|
||||
$RUN mermaid sh -c "npx pnpm test"
|
||||
dev)
|
||||
$RUN --service-ports mermaid sh -c "npx pnpm run dev"
|
||||
;;
|
||||
|
||||
lint)
|
||||
$RUN mermaid sh -c "npx pnpm -w run lint:fix"
|
||||
docs:dev)
|
||||
$RUN --service-ports mermaid sh -c "cd packages/mermaid/src/docs && npx pnpm prefetch && npx vitepress --port 3333 --host"
|
||||
;;
|
||||
|
||||
cypress)
|
||||
$RUN cypress $args
|
||||
;;
|
||||
|
||||
help)
|
||||
|
||||
# Alignment of help message must be as it is, it will be nice looking when printed
|
||||
usage=$(
|
||||
cat <<EOF
|
||||
Run commonly used commands within docker containers
|
||||
|
||||
$0 install # Equvalent of pnpm install
|
||||
$0 lint # Equvalent of pnpm -w run lint:fix
|
||||
$0 sh # Open sh inside docker container for development
|
||||
$(bold MERMAID LOCAL DOCKER DEVELOPMENT)
|
||||
|
||||
Welcome! Thank you for joining the development.
|
||||
This is a script for running commands within docker containers at ease.
|
||||
__________________________________________________________________________________________
|
||||
|
||||
Development quick start guide:
|
||||
|
||||
$(bold ./$name pnpm install) # Install packages
|
||||
$(bold ./$name dev) # Run dev server with examples, open http://localhost:9000
|
||||
$(bold ./$name pnpm vitest) # Run watcher for unit tests
|
||||
$(bold ./$name cypress) # Run integration tests (after starting dev server)
|
||||
$(bold ./$name pnpm build) # Prepare it for production
|
||||
$(bold ./$name docs:dev) # Then add documentation, open http://localhost:3333
|
||||
__________________________________________________________________________________________
|
||||
|
||||
Commands:
|
||||
|
||||
$(bold ./$name pnpm) # Run any 'pnpm' command
|
||||
$(bold ./$name dev) # Run dev server with examples, open http://localhost:9000
|
||||
$(bold ./$name docs:dev) # For docs contributions, open http://localhost:3333
|
||||
$(bold ./$name cypress) # Run integration tests
|
||||
$(bold ./$name sh) # Open 'sh' inside docker container for development
|
||||
$(bold ./$name help) # Show this help
|
||||
__________________________________________________________________________________________
|
||||
|
||||
Examples of frequiently used commands:
|
||||
|
||||
$(bold ./$name pnpm add --filter mermaid) $(underline package)
|
||||
Add package to mermaid
|
||||
|
||||
$(bold git diff --name-only develop \| xargs ./$name pnpm prettier --write)
|
||||
Prettify everything you added so far
|
||||
|
||||
$(bold ./$name cypress open --project .)
|
||||
Open cypress interactive GUI
|
||||
|
||||
$(bold ./$name cypress run --spec cypress/integration/rendering/)$(underline test.spec.ts)
|
||||
Run specific test in cypress\n
|
||||
|
||||
$0 help # Show this help
|
||||
EOF
|
||||
)
|
||||
|
||||
echo -n -e "$usage"
|
||||
;;
|
||||
|
||||
*)
|
||||
$0 help
|
||||
$name help
|
||||
;;
|
||||
|
||||
esac
|
||||
esac
|
||||
|
|
|
|||
Loading…
Reference in New Issue