marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-19 15:30:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: added katex rendering to flowcharts v1 & 2

Browse Source
This commit is contained in:
Nicolas Newman
2022-02-28 16:20:17 -05:00
parent b746747650
commit c2e8cb75bd
4 changed files with 37 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/diagrams/flowchart/flowRenderer-v2.js
View File

@@ -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(
/fa[lrsb]?:fa-[\w-]+/g,
(s) => `<i class='${s.replace(':', ' ')}'></i>`
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, ' ')
),
};
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;';

19
src/diagrams/flowchart/flowRenderer.js
View File

@@ -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(
/fa[lrsb]?:fa-[\w-]+/g,
(s) => `<i class='${s.replace(':', ' ')}'></i>`
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, ' ')
),
};
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(
/fa[lrsb]?:fa-[\w-]+/g,
(s) => `<i class='${s.replace(':', ' ')}'></i>`
edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}">${edge.text
.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 })
.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

6
src/diagrams/flowchart/styles.js
View File

@@ -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;
}

1
src/mermaid.js
View File

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