diff --git a/demos/sankey.html b/demos/sankey.html
index 0c9679c65..5a76f476a 100644
--- a/demos/sankey.html
+++ b/demos/sankey.html
@@ -3,20 +3,42 @@
- States Mermaid Quick Test Page
+ Sankey Mermaid Quick Test Page
-
Sankey diagram demos
+ FY20-21 Performance
+
+ ---
+ 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
+
+
Energy flow
+ ---
+ config:
+ sankey:
+ showValues: false
+ width: 1200
+ height: 600
+ linkColor: gradient
+ nodeAlignment: justify
+ ---
sankey-beta
Agricultural 'waste',Bio-conversion,124.729
@@ -95,13 +117,7 @@
theme: 'default',
logLevel: 3,
securityLevel: 'loose',
- sankey: {
- title: 'Hey, this is Sankey-Beta',
- width: 1200,
- height: 600,
- linkColor: 'gradient',
- nodeAlignment: 'justify',
- },
+ startOnLoad: true,
});
diff --git a/netlify.toml b/netlify.toml
new file mode 100644
index 000000000..2853f4c82
--- /dev/null
+++ b/netlify.toml
@@ -0,0 +1,18 @@
+# Settings in the [build] context are global and are applied to
+# all contexts unless otherwise overridden by more specific contexts.
+[build]
+ # Directory where the build system installs dependencies
+ # and runs your build. Store your package.json, .nvmrc, etc here.
+ # If not set, defaults to the root directory.
+ base = ""
+
+ # Directory that contains the deploy-ready HTML files and
+ # assets generated by the build. This is an absolute path relative
+ # to the base directory, which is the root by default (/).
+ # This sample publishes the directory located at the absolute
+ # path "root/project/build-output"
+
+ publish = "mermaid-live-editor/docs"
+
+ # Default build command.
+ command = "./scripts/editor.bash"
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index c378660ca..a4bf6cca8 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -1298,6 +1298,21 @@ export interface SankeyDiagramConfig extends BaseDiagramConfig {
*/
nodeAlignment?: 'left' | 'right' | 'center' | 'justify';
useMaxWidth?: boolean;
+ /**
+ * Toggle to display or hide values along with title.
+ *
+ */
+ showValues?: boolean;
+ /**
+ * The prefix to use for values
+ *
+ */
+ prefix?: string;
+ /**
+ * The suffix to use for values
+ *
+ */
+ suffix?: string;
}
/**
* This interface was referenced by `MermaidConfig`'s JSON-Schema
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
index 1921e1b85..f6db1886d 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
@@ -31,7 +31,7 @@ class SankeyLink {
/**
* @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
+ * @param value - Describes the amount to be passed
*/
const addLink = (source: SankeyNode, target: SankeyNode, value: number): void => {
links.push(new SankeyLink(source, target, value));
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index c624de4cf..9f5b3c172 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -18,7 +18,7 @@ import {
} from 'd3-sankey';
import { configureSvgSize } from '../../setupGraphViewbox.js';
import { Uid } from '../../rendering-util/uid.js';
-import type { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js';
+import type { SankeyNodeAlignment } from '../../config.type.js';
// Map config options to alignment functions
const alignmentsMap: Record<
@@ -62,10 +62,13 @@ export const draw = function (text: string, id: string, _version: string, diagOb
// 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!;
+ const width = conf?.width ?? defaultSankeyConfig.width!;
+ const height = conf?.height ?? defaultSankeyConfig.width!;
+ const useMaxWidth = conf?.useMaxWidth ?? defaultSankeyConfig.useMaxWidth!;
+ const nodeAlignment = conf?.nodeAlignment ?? defaultSankeyConfig.nodeAlignment!;
+ const prefix = conf?.prefix ?? defaultSankeyConfig.prefix!;
+ const suffix = conf?.suffix ?? defaultSankeyConfig.suffix!;
+ const showValues = conf?.showValues ?? defaultSankeyConfig.showValues!;
// FIX: using max width prevents height from being set, is it intended?
// to add height directly one can use `svg.attr('height', height)`
@@ -94,7 +97,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
const sankey = d3Sankey()
.nodeId((d: any) => d.id) // we use 'id' property to identify node
.nodeWidth(nodeWidth)
- .nodePadding(10)
+ .nodePadding(10 + (showValues ? 15 : 0))
.nodeAlign(nodeAlign)
.extent([
[0, 0],
@@ -130,6 +133,13 @@ export const draw = function (text: string, id: string, _version: string, diagOb
.attr('width', (d: any) => d.x1 - d.x0)
.attr('fill', (d: any) => colorScheme(d.id));
+ const getText = ({ id, value }: { id: string; value: number }) => {
+ if (!showValues) {
+ return id;
+ }
+ return `${id}\n${prefix}${Math.round(value * 100) / 100}${suffix}`;
+ };
+
// Create labels for nodes
svg
.append('g')
@@ -141,9 +151,9 @@ export const draw = function (text: string, id: string, _version: string, diagOb
.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('dy', `${showValues ? '0' : '0.35'}em`)
.attr('text-anchor', (d: any) => (d.x0 < width / 2 ? 'start' : 'end'))
- .text((d: any) => d.id);
+ .text(getText);
// Creates the paths that represent the links.
const link = svg
diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml
index 499771ed8..f85107c13 100644
--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -1859,6 +1859,20 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
default: justify
useMaxWidth:
default: false
+ showValues:
+ description: |
+ Toggle to display or hide values along with title.
+ default: true
+ prefix:
+ description: |
+ The prefix to use for values
+ type: string
+ default: ''
+ suffix:
+ description: |
+ The suffix to use for values
+ type: string
+ default: ''
FontCalculator:
title: Font Calculator
diff --git a/scripts/editor.bash b/scripts/editor.bash
new file mode 100755
index 000000000..3ae51ed33
--- /dev/null
+++ b/scripts/editor.bash
@@ -0,0 +1,21 @@
+#!/usr/bin/env bash
+
+set -euxo pipefail
+pnpm build
+
+# Clone the Mermaid Live Editor repository
+rm -rf mermaid-live-editor
+git clone --single-branch https://github.com/mermaid-js/mermaid-live-editor.git
+
+cd mermaid-live-editor
+
+# We have to use npm instead of yarn because it causes trouble in netlify
+# Install dependencies
+npm install
+
+# Link local mermaid to live editor
+npm link ../packages/mermaid
+
+# Force Build the site
+npm run build -- --force
+