chore: added katex rendering to flowcharts v1 & 2

src/diagrams/flowchart/flowRenderer-v2.js

@@ -1,5 +1,6 @@
 import graphlib from 'graphlib';
 import { select, curveLinear, selectAll } from 'd3';
+import katex from 'katex';
 
 import flowDb from './flowDb';
 import flow from './parser/flow';
@@ -56,9 +57,10 @@ export const addVertices = function (vert, g, svgId, root, doc) {
     if (evaluate(getConfig().flowchart.htmlLabels)) {
       // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
       const node = {
-        label: vertexText.replace(
+        label: vertexText
-          /fa[lrsb]?:fa-[\w-]+/g,
+          .replace(/fa[lrsb]?:fa-[\w-]+/g, (s) => `<i class='${s.replace(':', ' ')}'></i>`)
-          (s) => `<i class='${s.replace(':', ' ')}'></i>`
+          .replace(/\$\$(.*)\$\$/g, (r, c) =>
+            katex.renderToString(c, { throwOnError: true, displayMode: true }).replace(/\n/g, ' ')
           ),
       };
       vertexNode = addHtmlLabel(svg, node).node();
@@ -139,11 +141,15 @@ export const addVertices = function (vert, g, svgId, root, doc) {
       default:
         _shape = 'rect';
     }
+    const labelText = vertexText.replace(/\$\$(.*)\$\$/g, (r, c) =>
+      katex.renderToString(c, { throwOnError: true, displayMode: true }).replace(/\n/g, ' ')
+    );
+    console.log(labelText);
     // Add the node
     g.setNode(vertex.id, {
       labelStyle: styles.labelStyle,
       shape: _shape,
-      labelText: vertexText,
+      labelText,
       rx: radious,
       ry: radious,
       class: classStr,
@@ -164,7 +170,7 @@ export const addVertices = function (vert, g, svgId, root, doc) {
     log.info('setNode', {
       labelStyle: styles.labelStyle,
       shape: _shape,
-      labelText: vertexText,
+      labelText,
       rx: radious,
       ry: radious,
       class: classStr,
@@ -309,7 +315,11 @@ export const addEdges = function (edges, g) {
     //   edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}">${edge.text}</span>`;
     // } else {
     edgeData.labelType = 'text';
-    edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');
+    edgeData.label = edge.text
+      .replace(common.lineBreakRegex, '\n')
+      .replace(/\$\$(.*)\$\$/g, (r, c) =>
+        katex.renderToString(c, { throwOnError: true, displayMode: true }).replace(/\n/g, ' ')
+      );
 
     if (typeof edge.style === 'undefined') {
       edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;';

src/diagrams/flowchart/flowRenderer.js

@@ -1,5 +1,6 @@
 import graphlib from 'graphlib';
 import { select, curveLinear, selectAll } from 'd3';
+import katex from 'katex';
 
 import flowDb from './flowDb';
 import flow from './parser/flow';
@@ -61,9 +62,10 @@ export const addVertices = function (vert, g, svgId, root, _doc) {
     if (evaluate(getConfig().flowchart.htmlLabels)) {
       // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
       const node = {
-        label: vertexText.replace(
+        label: vertexText
-          /fa[lrsb]?:fa-[\w-]+/g,
+          .replace(/fa[lrsb]?:fa-[\w-]+/g, (s) => `<i class='${s.replace(':', ' ')}'></i>`)
-          (s) => `<i class='${s.replace(':', ' ')}'></i>`
+          .replace(/\$\$(.*)\$\$/g, (r, c) =>
+            katex.renderToString(c, { throwOnError: true, displayMode: true }).replace(/\n/g, ' ')
           ),
       };
       vertexNode = addHtmlLabel(svg, node).node();
@@ -73,7 +75,6 @@ export const addVertices = function (vert, g, svgId, root, _doc) {
       svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
 
       const rows = vertexText.split(common.lineBreakRegex);
-
       for (let j = 0; j < rows.length; j++) {
         const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan');
         tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
@@ -240,9 +241,12 @@ export const addEdges = function (edges, g) {
 
       if (evaluate(getConfig().flowchart.htmlLabels)) {
         edgeData.labelType = 'html';
-        edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}">${edge.text.replace(
+        edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}">${edge.text
-          /fa[lrsb]?:fa-[\w-]+/g,
+          .replace(/fa[lrsb]?:fa-[\w-]+/g, (s) => `<i class='${s.replace(':', ' ')}'></i>`)
-          (s) => `<i class='${s.replace(':', ' ')}'></i>`
+          .replace(/\$\$(.*)\$\$/g, (r, c) =>
+            katex
+              .renderToString(c, { output: 'mathml', throwOnError: true, displayMode: true })
+              .replace(/\n/g, ' ')
           )}</span>`;
       } else {
         edgeData.labelType = 'text';
@@ -438,7 +442,6 @@ export const draw = function (text, id) {
   const svgBounds = svg.node().getBBox();
   const width = svgBounds.width + padding * 2;
   const height = svgBounds.height + padding * 2;
-
   configureSvgSize(svg, height, width, conf.useMaxWidth);
 
   // Ensure the viewBox includes the whole svgBounds area with extra space for padding

src/diagrams/flowchart/styles.js

@@ -46,6 +46,12 @@ const getStyles = (options) =>
     stroke-width: 1px;
   }
 
+  .node .katex path {
+    fill: #000;
+    stroke: #000;
+    stroke-width: 1px;
+  }
+
   .node .label {
     text-align: center;
   }

src/mermaid.js

@@ -5,6 +5,7 @@
 import { log } from './logger';
 import mermaidAPI from './mermaidAPI';
 import utils from './utils';
+import 'katex/dist/katex.css';
 
 /**
  * ## init