diff --git a/src/diagrams/flowchart/flowRenderer-v2.js b/src/diagrams/flowchart/flowRenderer-v2.js
index 0a8e1d857..481f6cb02 100644
--- a/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/src/diagrams/flowchart/flowRenderer-v2.js
@@ -142,7 +142,9 @@ export const addVertices = function (vert, g, svgId, root, doc) {
         _shape = 'rect';
     }
     const labelText = vertexText.replace(/\$\$(.*)\$\$/g, (r, c) =>
-      katex.renderToString(c, { throwOnError: true, displayMode: true }).replace(/\n/g, ' ')
+      katex
+        .renderToString(c, { throwOnError: true, displayMode: true, output: 'html' })
+        .replace(/\n/g, ' ')
     );
     console.log(labelText);
     // Add the node
diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
index 241f08faa..5300da5ad 100644
--- a/src/diagrams/flowchart/flowRenderer.js
+++ b/src/diagrams/flowchart/flowRenderer.js
@@ -65,7 +65,9 @@ export const addVertices = function (vert, g, svgId, root, _doc) {
         label: vertexText
           .replace(/fa[lrsb]?:fa-[\w-]+/g, (s) => `<i class='${s.replace(':', ' ')}'></i>`)
           .replace(/\$\$(.*)\$\$/g, (r, c) =>
-            katex.renderToString(c, { throwOnError: true, displayMode: true }).replace(/\n/g, ' ')
+            katex
+              .renderToString(c, { throwOnError: true, displayMode: true, output: 'html' })
+              .replace(/\n/g, ' ')
           ),
       };
       vertexNode = addHtmlLabel(svg, node).node();
@@ -245,7 +247,7 @@ export const addEdges = function (edges, g) {
           .replace(/fa[lrsb]?:fa-[\w-]+/g, (s) => `<i class='${s.replace(':', ' ')}'></i>`)
           .replace(/\$\$(.*)\$\$/g, (r, c) =>
             katex
-              .renderToString(c, { output: 'mathml', throwOnError: true, displayMode: true })
+              .renderToString(c, { throwOnError: true, displayMode: true, output: 'html' })
               .replace(/\n/g, ' ')
           )}</span>`;
       } else {