From c432aec2f6cbd28a1dcfd5c45ef129dbb76e3aa6 Mon Sep 17 00:00:00 2001
From: saurabhg772244 <saurabh@mermaidchart.com>
Date: Mon, 20 Jan 2025 20:05:51 +0530
Subject: [PATCH 1/5] fix: styles for Sankey, Gantt, and User Journey diagrams

---
 packages/mermaid/src/diagrams/gantt/styles.js        | 12 ++++++------
 .../mermaid/src/diagrams/sankey/sankeyDiagram.ts     |  2 ++
 .../mermaid/src/diagrams/sankey/sankeyRenderer.ts    |  1 -
 packages/mermaid/src/diagrams/sankey/styles.js       |  6 ++++++
 packages/mermaid/src/diagrams/user-journey/styles.js |  6 ++----
 5 files changed, 16 insertions(+), 11 deletions(-)
 create mode 100644 packages/mermaid/src/diagrams/sankey/styles.js

diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js
index 626ed4e0f..dcb75939d 100644
--- a/packages/mermaid/src/diagrams/gantt/styles.js
+++ b/packages/mermaid/src/diagrams/gantt/styles.js
@@ -1,7 +1,7 @@
 const getStyles = (options) =>
   `
   .mermaid-main-font {
-    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
+        font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
   }
 
   .exclude-range {
@@ -45,7 +45,7 @@ const getStyles = (options) =>
 
   .sectionTitle {
     text-anchor: start;
-    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
+    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
   }
 
 
@@ -58,7 +58,7 @@ const getStyles = (options) =>
   }
 
   .grid .tick text {
-    font-family: ${options.fontFamily};
+    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
     fill: ${options.textColor};
   }
 
@@ -86,13 +86,13 @@ const getStyles = (options) =>
 
   .taskText {
     text-anchor: middle;
-    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
+    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
   }
 
   .taskTextOutsideRight {
     fill: ${options.taskTextDarkColor};
     text-anchor: start;
-    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
+    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
   }
 
   .taskTextOutsideLeft {
@@ -248,7 +248,7 @@ const getStyles = (options) =>
     text-anchor: middle;
     font-size: 18px;
     fill: ${options.titleColor || options.textColor};
-    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
+    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
   }
 `;
 
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
index 6fed435ac..54aa40a78 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
@@ -4,11 +4,13 @@ import parser from './parser/sankey.jison';
 import db from './sankeyDB.js';
 import renderer from './sankeyRenderer.js';
 import { prepareTextForParsing } from './sankeyUtils.js';
+import sankeyStyles from './styles.js';
 
 const originalParse = parser.parse.bind(parser);
 parser.parse = (text: string) => originalParse(prepareTextForParsing(text));
 
 export const diagram: DiagramDefinition = {
+  styles: sankeyStyles,
   parser,
   db,
   renderer,
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index a981a346e..5e3f04173 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -136,7 +136,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   svg
     .append('g')
     .attr('class', 'node-labels')
-    .attr('font-family', 'sans-serif')
     .attr('font-size', 14)
     .selectAll('text')
     .data(graph.nodes)
diff --git a/packages/mermaid/src/diagrams/sankey/styles.js b/packages/mermaid/src/diagrams/sankey/styles.js
new file mode 100644
index 000000000..bb70bfbd2
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/styles.js
@@ -0,0 +1,6 @@
+const getStyles = (options) =>
+  `.label {
+      font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+    }`;
+
+export default getStyles;
diff --git a/packages/mermaid/src/diagrams/user-journey/styles.js b/packages/mermaid/src/diagrams/user-journey/styles.js
index 998a73894..87edee576 100644
--- a/packages/mermaid/src/diagrams/user-journey/styles.js
+++ b/packages/mermaid/src/diagrams/user-journey/styles.js
@@ -1,7 +1,6 @@
 const getStyles = (options) =>
   `.label {
-    font-family: 'trebuchet ms', verdana, arial, sans-serif;
-    font-family: var(--mermaid-font-family);
+    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
     color: ${options.textColor};
   }
   .mouth {
@@ -79,8 +78,7 @@ const getStyles = (options) =>
     text-align: center;
     max-width: 200px;
     padding: 2px;
-    font-family: 'trebuchet ms', verdana, arial, sans-serif;
-    font-family: var(--mermaid-font-family);
+    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
     font-size: 12px;
     background: ${options.tertiaryColor};
     border: 1px solid ${options.border2};

From 7bbebff583111c45679fb01b1818f707f0022c2d Mon Sep 17 00:00:00 2001
From: saurabhg772244 <saurabh@mermaidchart.com>
Date: Mon, 20 Jan 2025 20:30:28 +0530
Subject: [PATCH 2/5] Updated styles implementation

---
 packages/mermaid/src/diagrams/gantt/styles.js        | 12 ++++++------
 packages/mermaid/src/diagrams/sankey/styles.js       |  4 ++--
 packages/mermaid/src/diagrams/user-journey/styles.js |  4 ++--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js
index dcb75939d..1f670a16d 100644
--- a/packages/mermaid/src/diagrams/gantt/styles.js
+++ b/packages/mermaid/src/diagrams/gantt/styles.js
@@ -1,7 +1,7 @@
 const getStyles = (options) =>
   `
   .mermaid-main-font {
-        font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+        font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
   }
 
   .exclude-range {
@@ -45,7 +45,7 @@ const getStyles = (options) =>
 
   .sectionTitle {
     text-anchor: start;
-    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
   }
 
 
@@ -58,7 +58,7 @@ const getStyles = (options) =>
   }
 
   .grid .tick text {
-    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
     fill: ${options.textColor};
   }
 
@@ -86,13 +86,13 @@ const getStyles = (options) =>
 
   .taskText {
     text-anchor: middle;
-    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
   }
 
   .taskTextOutsideRight {
     fill: ${options.taskTextDarkColor};
     text-anchor: start;
-    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
   }
 
   .taskTextOutsideLeft {
@@ -248,7 +248,7 @@ const getStyles = (options) =>
     text-anchor: middle;
     font-size: 18px;
     fill: ${options.titleColor || options.textColor};
-    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
   }
 `;
 
diff --git a/packages/mermaid/src/diagrams/sankey/styles.js b/packages/mermaid/src/diagrams/sankey/styles.js
index bb70bfbd2..f2e31651a 100644
--- a/packages/mermaid/src/diagrams/sankey/styles.js
+++ b/packages/mermaid/src/diagrams/sankey/styles.js
@@ -1,6 +1,6 @@
-const getStyles = (options) =>
+const getStyles = () =>
   `.label {
-      font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+      font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
     }`;
 
 export default getStyles;
diff --git a/packages/mermaid/src/diagrams/user-journey/styles.js b/packages/mermaid/src/diagrams/user-journey/styles.js
index 87edee576..81aef1180 100644
--- a/packages/mermaid/src/diagrams/user-journey/styles.js
+++ b/packages/mermaid/src/diagrams/user-journey/styles.js
@@ -1,6 +1,6 @@
 const getStyles = (options) =>
   `.label {
-    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
     color: ${options.textColor};
   }
   .mouth {
@@ -78,7 +78,7 @@ const getStyles = (options) =>
     text-align: center;
     max-width: 200px;
     padding: 2px;
-    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
     font-size: 12px;
     background: ${options.tertiaryColor};
     border: 1px solid ${options.border2};

From 32a68d489ed83a5b79f516d6b2fb3a7505c5eb24 Mon Sep 17 00:00:00 2001
From: saurabhg772244 <saurabh@mermaidchart.com>
Date: Tue, 21 Jan 2025 11:35:23 +0530
Subject: [PATCH 3/5] Added changeset

---
 .changeset/stupid-dots-do.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/stupid-dots-do.md

diff --git a/.changeset/stupid-dots-do.md b/.changeset/stupid-dots-do.md
new file mode 100644
index 000000000..594fa9536
--- /dev/null
+++ b/.changeset/stupid-dots-do.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Gantt, Sankey and User Journey diagram are now able to pick font-family from mermaid config.

From 46c16c963b8b8e57f97a8e30408fed0dba13c22d Mon Sep 17 00:00:00 2001
From: saurabhg772244 <saurabh@mermaidchart.com>
Date: Tue, 21 Jan 2025 15:32:53 +0530
Subject: [PATCH 4/5] Minor change.

---
 packages/mermaid/src/diagrams/gantt/styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js
index 1f670a16d..14cbb2430 100644
--- a/packages/mermaid/src/diagrams/gantt/styles.js
+++ b/packages/mermaid/src/diagrams/gantt/styles.js
@@ -58,7 +58,7 @@ const getStyles = (options) =>
   }
 
   .grid .tick text {
-    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
+    font-family: ${options.fontFamily};
     fill: ${options.textColor};
   }
 

From ee6fb832651bb64a0663cc3cc240ea759ad6df97 Mon Sep 17 00:00:00 2001
From: saurabhg772244 <saurabh@mermaidchart.com>
Date: Tue, 21 Jan 2025 18:27:05 +0530
Subject: [PATCH 5/5] Used 'options' instead of 'var(--mermaid-font-family)'

---
 packages/mermaid/src/diagrams/gantt/styles.js        | 10 +++++-----
 packages/mermaid/src/diagrams/sankey/styles.js       |  4 ++--
 packages/mermaid/src/diagrams/user-journey/styles.js |  4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js
index 14cbb2430..5b53a1b07 100644
--- a/packages/mermaid/src/diagrams/gantt/styles.js
+++ b/packages/mermaid/src/diagrams/gantt/styles.js
@@ -1,7 +1,7 @@
 const getStyles = (options) =>
   `
   .mermaid-main-font {
-        font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
+        font-family: ${options.fontFamily};
   }
 
   .exclude-range {
@@ -45,7 +45,7 @@ const getStyles = (options) =>
 
   .sectionTitle {
     text-anchor: start;
-    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
+    font-family: ${options.fontFamily};
   }
 
 
@@ -86,13 +86,13 @@ const getStyles = (options) =>
 
   .taskText {
     text-anchor: middle;
-    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
+    font-family: ${options.fontFamily};
   }
 
   .taskTextOutsideRight {
     fill: ${options.taskTextDarkColor};
     text-anchor: start;
-    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
+    font-family: ${options.fontFamily};
   }
 
   .taskTextOutsideLeft {
@@ -248,7 +248,7 @@ const getStyles = (options) =>
     text-anchor: middle;
     font-size: 18px;
     fill: ${options.titleColor || options.textColor};
-    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
+    font-family: ${options.fontFamily};
   }
 `;
 
diff --git a/packages/mermaid/src/diagrams/sankey/styles.js b/packages/mermaid/src/diagrams/sankey/styles.js
index f2e31651a..eafb62b05 100644
--- a/packages/mermaid/src/diagrams/sankey/styles.js
+++ b/packages/mermaid/src/diagrams/sankey/styles.js
@@ -1,6 +1,6 @@
-const getStyles = () =>
+const getStyles = (options) =>
   `.label {
-      font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
+      font-family: ${options.fontFamily};
     }`;
 
 export default getStyles;
diff --git a/packages/mermaid/src/diagrams/user-journey/styles.js b/packages/mermaid/src/diagrams/user-journey/styles.js
index 81aef1180..9cdbcd12e 100644
--- a/packages/mermaid/src/diagrams/user-journey/styles.js
+++ b/packages/mermaid/src/diagrams/user-journey/styles.js
@@ -1,6 +1,6 @@
 const getStyles = (options) =>
   `.label {
-    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
+    font-family: ${options.fontFamily};
     color: ${options.textColor};
   }
   .mouth {
@@ -78,7 +78,7 @@ const getStyles = (options) =>
     text-align: center;
     max-width: 200px;
     padding: 2px;
-    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
+    font-family: ${options.fontFamily};
     font-size: 12px;
     background: ${options.tertiaryColor};
     border: 1px solid ${options.border2};