diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index 3eb2a0432a..c2fd0b0119 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -99,7 +99,7 @@ describe('Flowchart v2', () => {
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
- expect(maxWidthValue).to.be.within(290 * 0.95 - 1, 290 * 1.05);
+ expect(maxWidthValue).to.be.within(446 * 0.95 - 1, 446 * 1.05);
});
});
it('8: should render a flowchart when useMaxWidth is false', () => {
@@ -118,7 +118,7 @@ describe('Flowchart v2', () => {
const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±5%
// expect(height).to.be.within(446 * 0.95, 446 * 1.05);
- expect(width).to.be.within(290 * 0.95 - 1, 290 * 1.05);
+ expect(width).to.be.within(446 * 0.95 - 1, 446 * 1.05);
expect(svg).to.not.have.attr('style');
});
});
@@ -1047,7 +1047,9 @@ end
A --lb3--> TOP --lb4--> B
B1 --lb5--> B2
`,
- { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
+ {
+ flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } },
+ }
);
});
});
diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index e4766e7923..d3a83ae5f2 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -733,7 +733,7 @@ describe('Graph', () => {
});
it('38: should render a flowchart when useMaxWidth is true (default)', () => {
renderGraph(
- `graph TD
+ `flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
@@ -751,7 +751,7 @@ describe('Graph', () => {
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
- expect(maxWidthValue).to.be.within(300 * 0.9, 300 * 1.1);
+ expect(maxWidthValue).to.be.within(446 * 0.9, 446 * 1.1);
});
});
it('39: should render a flowchart when useMaxWidth is false', () => {
@@ -770,7 +770,7 @@ describe('Graph', () => {
const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±10%
// expect(height).to.be.within(446 * 0.95, 446 * 1.05);
- expect(width).to.be.within(300 * 0.9, 300 * 1.1);
+ expect(width).to.be.within(446 * 0.9, 446 * 1.1);
expect(svg).to.not.have.attr('style');
});
});
@@ -905,13 +905,16 @@ graph TD
it('67: should be able to style default node independently', () => {
imgSnapshotTest(
`
- flowchart TD
+ flowchart TD
classDef default fill:#a34
hello --> default
style default stroke:#000,stroke-width:4px
`,
- { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+ {
+ flowchart: { htmlLabels: true },
+ securityLevel: 'loose',
+ }
);
});
});
diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts
index 623e22537c..0ef4c46871 100644
--- a/packages/mermaid/src/rendering-util/createText.ts
+++ b/packages/mermaid/src/rendering-util/createText.ts
@@ -224,7 +224,9 @@ export const createText = async (
const vertexNode = await addHtmlSpan(el, node, width, classes, addSvgBackground);
return vertexNode;
} else {
- const structuredText = markdownToLines(text.replace('
', '
'), config);
+ //sometimes the user might add br tags with 1 or more spaces in between, so we need to replace them with
+ const sanitizeBR = text.replace(/
/g, '
');
+ const structuredText = markdownToLines(sanitizeBR.replace('
', '
'), config);
const svgLabel = createFormattedText(
width,
el,
@@ -235,9 +237,13 @@ export const createText = async (
if (/stroke:/.exec(style)) {
style = style.replace('stroke:', 'lineColor:');
}
- select(svgLabel)
- .select('text')
- .attr('style', style.replace(/color:/g, 'fill:'));
+
+ const nodeLabelTextStyle = style
+ .replace(/stroke:[^;]+;?/g, '')
+ .replace(/stroke-width:[^;]+;?/g, '')
+ .replace(/fill:[^;]+;?/g, '')
+ .replace(/color:/g, 'fill:');
+ select(svgLabel).attr('style', nodeLabelTextStyle);
// svgLabel.setAttribute('style', style);
} else {
//On style, assume `stroke`, `stroke-width` are used for edge path, so remove them
diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.ts b/packages/mermaid/src/rendering-util/handle-markdown-text.ts
index 7f5b12a3fe..4b6a04428d 100644
--- a/packages/mermaid/src/rendering-util/handle-markdown-text.ts
+++ b/packages/mermaid/src/rendering-util/handle-markdown-text.ts
@@ -81,6 +81,8 @@ export function markdownToHTML(markdown: string, { markdownAutoWrap }: MermaidCo
return `${node.tokens?.map(output).join('')}`;
} else if (node.type === 'paragraph') {
return `
${node.tokens?.map(output).join('')}
`; + } else if (node.type === 'space') { + return ''; } else if (node.type === 'html') { return `${node.text}`; }