From 160c7d399a0ae80b73546e1cfdd4c8fdb3fd40c8 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 4 Dec 2023 11:36:07 +0530
Subject: [PATCH 1/2] fix: #5100 Add viewbox to sankey

---
 demos/sankey.html                                      |  1 +
 packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts | 10 +++-------
 packages/mermaid/src/setupGraphViewbox.js              |  1 +
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/demos/sankey.html b/demos/sankey.html
index 5a76f476ab..22ec849c7c 100644
--- a/demos/sankey.html
+++ b/demos/sankey.html
@@ -33,6 +33,7 @@ <h2>Energy flow</h2>
       ---
       config:
         sankey:
+          useMaxWidth: true
           showValues: false
           width: 1200
           height: 600
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index 0179e715b7..7433f2b9ce 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -16,7 +16,7 @@ import {
   sankeyCenter as d3SankeyCenter,
   sankeyJustify as d3SankeyJustify,
 } from 'd3-sankey';
-import { configureSvgSize } from '../../setupGraphViewbox.js';
+import { setupGraphViewbox } from '../../setupGraphViewbox.js';
 import { Uid } from '../../rendering-util/uid.js';
 import type { SankeyNodeAlignment } from '../../config.type.js';
 
@@ -70,12 +70,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   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)`
-  //
-  // @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:
   //
@@ -208,6 +202,8 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .attr('d', d3SankeyLinkHorizontal())
     .attr('stroke', coloring)
     .attr('stroke-width', (d: any) => Math.max(1, d.width));
+
+  setupGraphViewbox(undefined, svg, 0, useMaxWidth);
 };
 
 export default {
diff --git a/packages/mermaid/src/setupGraphViewbox.js b/packages/mermaid/src/setupGraphViewbox.js
index d3df6db7cf..1803412f47 100644
--- a/packages/mermaid/src/setupGraphViewbox.js
+++ b/packages/mermaid/src/setupGraphViewbox.js
@@ -45,6 +45,7 @@ export const configureSvgSize = function (svgElem, height, width, useMaxWidth) {
   d3Attrs(svgElem, attrs);
 };
 
+// TODO v11: Remove the graph parameter. It is not used.
 export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth) {
   const svgBounds = svgElem.node().getBBox();
   const sWidth = svgBounds.width;

From 11affc32ee60fea9c8523954591f79acfe5b955f Mon Sep 17 00:00:00 2001
From: futzmonitor <cgonzalez.smdc@gmail.com>
Date: Mon, 4 Dec 2023 15:47:58 -0500
Subject: [PATCH 2/2] Changes to .prettierignore 1. Added 'demos/dev/**' to be
 ignored by Prettier. 2. Added '!/demos/dev/example.html' so that Prettier
 ensures no one changes the example.html in a way that doesn't obey the
 Prettier code formatting rules.

---
 .prettierignore | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.prettierignore b/.prettierignore
index 8a9086315e..fb9b694b75 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -10,3 +10,6 @@ stats
 .nyc_output
 # Autogenerated by `pnpm run --filter mermaid types:build-config`
 packages/mermaid/src/config.type.ts
+# Ignore the files creates in /demos/dev except for example.html
+demos/dev/**
+!/demos/dev/example.html
\ No newline at end of file