From c2e8cb75bd4530a8a7fb7f71684adf9b338fc6d4 Mon Sep 17 00:00:00 2001 From: Nicolas Newman Date: Mon, 28 Feb 2022 16:20:17 -0500 Subject: [PATCH] chore: added katex rendering to flowcharts v1 & 2 --- src/diagrams/flowchart/flowRenderer-v2.js | 24 ++++++++++++++++------- src/diagrams/flowchart/flowRenderer.js | 23 ++++++++++++---------- src/diagrams/flowchart/styles.js | 6 ++++++ src/mermaid.js | 1 + 4 files changed, 37 insertions(+), 17 deletions(-) diff --git a/src/diagrams/flowchart/flowRenderer-v2.js b/src/diagrams/flowchart/flowRenderer-v2.js index ae58a0212..0a8e1d857 100644 --- a/src/diagrams/flowchart/flowRenderer-v2.js +++ b/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,10 +57,11 @@ 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( - /fa[lrsb]?:fa-[\w-]+/g, - (s) => `` - ), + label: vertexText + .replace(/fa[lrsb]?:fa-[\w-]+/g, (s) => ``) + .replace(/\$\$(.*)\$\$/g, (r, c) => + katex.renderToString(c, { throwOnError: true, displayMode: true }).replace(/\n/g, ' ') + ), }; vertexNode = addHtmlLabel(svg, node).node(); vertexNode.parentNode.removeChild(vertexNode); @@ -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 = `${edge.text}`; // } 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;'; diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js index 7cc07e242..241f08faa 100644 --- a/src/diagrams/flowchart/flowRenderer.js +++ b/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,10 +62,11 @@ 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( - /fa[lrsb]?:fa-[\w-]+/g, - (s) => `` - ), + label: vertexText + .replace(/fa[lrsb]?:fa-[\w-]+/g, (s) => ``) + .replace(/\$\$(.*)\$\$/g, (r, c) => + katex.renderToString(c, { throwOnError: true, displayMode: true }).replace(/\n/g, ' ') + ), }; vertexNode = addHtmlLabel(svg, node).node(); vertexNode.parentNode.removeChild(vertexNode); @@ -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,10 +241,13 @@ export const addEdges = function (edges, g) { if (evaluate(getConfig().flowchart.htmlLabels)) { edgeData.labelType = 'html'; - edgeData.label = `${edge.text.replace( - /fa[lrsb]?:fa-[\w-]+/g, - (s) => `` - )}`; + edgeData.label = `${edge.text + .replace(/fa[lrsb]?:fa-[\w-]+/g, (s) => ``) + .replace(/\$\$(.*)\$\$/g, (r, c) => + katex + .renderToString(c, { output: 'mathml', throwOnError: true, displayMode: true }) + .replace(/\n/g, ' ') + )}`; } else { edgeData.labelType = 'text'; edgeData.label = edge.text.replace(common.lineBreakRegex, '\n'); @@ -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 diff --git a/src/diagrams/flowchart/styles.js b/src/diagrams/flowchart/styles.js index abaecb0b4..02d153b34 100644 --- a/src/diagrams/flowchart/styles.js +++ b/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; } diff --git a/src/mermaid.js b/src/mermaid.js index 5d7a0090f..757a91e2a 100644 --- a/src/mermaid.js +++ b/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