mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

docs: Fix sankey demo

This commit is contained in:
Sidharth Vinod 2023-08-22 14:06:46 +05:30
parent 0114a87f15
commit ce6992ea9b
No known key found for this signature in database
GPG Key ID: FB5CCD378D3907CD
1 changed files with 28 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
demos/sankey.html
View File

@ -3,17 +3,42 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>States Mermaid Quick Test Page</title> <title>Sankey Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" /> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
</head> </head>
<body> <body>
<h1>Sankey diagram demos</h1> <h1>Sankey diagram demos</h1>
<h2>FY20-21 Performance</h2> <h2>FY20-21 Performance</h2>
<div id="financials"></div> <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> <h2>Energy flow</h2>
<pre class="mermaid"> <pre class="mermaid">
---
config:
sankey:
showValues: false
width: 1200
height: 600
linkColor: gradient
nodeAlignment: justify
---
sankey-beta sankey-beta
Agricultural 'waste',Bio-conversion,124.729 Agricultural 'waste',Bio-conversion,124.729
@ -92,37 +117,8 @@
theme: 'default', theme: 'default',
logLevel: 3, logLevel: 3,
securityLevel: 'loose', securityLevel: 'loose',
sankey: { startOnLoad: true,
title: 'Hey, this is Sankey-Beta',
width: 1200,
height: 600,
linkColor: 'gradient',
nodeAlignment: 'justify',
showValues: false,
},
startOnLoad: false,
}); });
// Render the Energy flow diagram
await mermaid.run();
mermaid.initialize({
sankey: {
prefix: '$',
suffix: 'B',
},
});
const { svg } = await mermaid.render(
'ff',
`
sankey-beta
Revenue,Expenses,10
Revenue,Profit,10
Expenses,Manufacturing,5
Expenses,Tax,3
Expenses,Research,2`
);
document.getElementById('financials').innerHTML = svg;
</script> </script>
</body> </body>
</html> </html>