diff --git a/.changeset/flowchart-math-edge-label-background.md b/.changeset/flowchart-math-edge-label-background.md new file mode 100644 index 0000000..7eb0057 --- /dev/null +++ b/.changeset/flowchart-math-edge-label-background.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +fix: paint the edge label background behind math in flowchart edge labels so the edge no longer shows through them diff --git a/e2e/rendering/flowchart/pr-check/flowchart-math-edge-label.spec.ts b/e2e/rendering/flowchart/pr-check/flowchart-math-edge-label.spec.ts new file mode 100644 index 0000000..ee173b5 --- /dev/null +++ b/e2e/rendering/flowchart/pr-check/flowchart-math-edge-label.spec.ts @@ -0,0 +1,25 @@ +import { expect, test, type Locator } from '@playwright/test'; +import { imgSnapshotTest } from '../../../helpers/util'; + +test.describe('Flowchart edge label with math', () => { + test('gets the same background as a plain edge label', async ({ page }, testInfo) => { + await imgSnapshotTest( + page, + testInfo, + `flowchart LR + A --- |"Ratio $$\\dfrac{a}{b}$$"| B + C --- |"plain label"| D`, + {}, + false, + async (svg: Locator) => { + const plainBackground = await svg + .locator('span.edgeLabel > p') + .evaluate((label) => getComputedStyle(label).backgroundColor); + await expect(svg.locator('span.edgeLabel > div')).toHaveCSS( + 'background-color', + plainBackground + ); + } + ); + }); +}); diff --git a/packages/mermaid/src/diagrams/flowchart/styles.ts b/packages/mermaid/src/diagrams/flowchart/styles.ts index e0286b7..8f77530 100644 --- a/packages/mermaid/src/diagrams/flowchart/styles.ts +++ b/packages/mermaid/src/diagrams/flowchart/styles.ts @@ -211,6 +211,10 @@ const getStyles = (options: FlowChartStyleOptions) => p { background-color: ${options.edgeLabelBackground}; } + /* Labels with math wrap each line in a
instead of a

*/ + > div { + background-color: ${options.edgeLabelBackground}; + } rect { opacity: 0.5; background-color: ${options.edgeLabelBackground};