Fix: Properly decode <, >, and & in mindmap node labels by BambioGaming · Pull Request #6406 · mermaid-js/mermaid

BambioGaming · 2025-03-22T23:54:46Z

📑 Summary

This pull request fixes a rendering bug in Mermaid mindmap diagrams where characters like <, >, and & were incorrectly displayed as <, >, and & inside SVG elements.

This issue occurred because .text() in D3/SVG escapes HTML entities even when the decoded content is passed in. This PR addresses it by decoding these entities right before rendering.

Resolves #6396

📏 Design Decisions

Modified decodeEntities() function in utils.ts to replace common HTML entities (<, >, &) with their correct characters.

Applied decodeEntities() immediately before inserting text content into <tspan> elements via .text() in the updateTextContentAndStyles() function of createText.ts.

This approach ensures that the final text rendered in the SVG node is accurate and unescaped while maintaining full safety.

Screenshots

Before

After

📋 Tasks

Make sure you

📖 have read the contribution guidelines
💻 have added necessary unit/e2e tests.
📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
🦋 If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

changeset-bot · 2025-03-22T23:54:49Z

⚠️ No Changeset found

Latest commit: 7776ce1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

netlify · 2025-03-22T23:55:02Z

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	`7776ce1`
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/67e2cfc9d358bd0008c0796c
😎 Deploy Preview	https://deploy-preview-6406--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

pkg-pr-new · 2025-03-22T23:55:49Z

Open in Stackblitz

npm i https://pkg.pr.new/mermaid-js/mermaid@6406

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/mermaid-zenuml@6406

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/layout-elk@6406

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@6406

commit: 7776ce1

codecov · 2025-03-22T23:57:21Z

Codecov Report

❌ Patch coverage is 0% with 9 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.86%. Comparing base (936d107) to head (7776ce1).
⚠️ Report is 1853 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/mermaid/src/utils.ts	0.00%	7 Missing ⚠️
packages/mermaid/src/rendering-util/createText.ts	0.00%	2 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##           develop   #6406   +/-   ##
=======================================
  Coverage     3.86%   3.86%           
=======================================
  Files          412     411    -1     
  Lines        43189   43184    -5     
  Branches       664     664           
=======================================
  Hits          1670    1670           
+ Misses       41519   41514    -5

Flag	Coverage Δ
unit	`3.86% <0.00%> (+<0.01%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
packages/mermaid/src/rendering-util/createText.ts	`0.50% <0.00%> (ø)`
packages/mermaid/src/utils.ts	`17.89% <0.00%> (-0.20%)`	⬇️

... and 1 file with indirect coverage changes

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

argos-ci · 2025-03-25T14:52:48Z

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	⚠️ Changes detected (Review)	114 changed	Mar 25, 2025, 4:01 PM

…bug/6396_mindmap-decode

…ming/mermaid into bug/6396_mindmap-decode

BambioGaming · 2025-03-25T15:59:49Z

I’ve confirmed that decodeEntities() is only used in mindmap rendering logic. Other diagram types are unaffected. The Argos visual changes are expected and limited to corrected rendering in mindmap node labels.

knsv · 2026-02-27T09:01:34Z

[sisyphus-bot] Thanks for the clean fix, @BambioGaming — the intent here makes sense and the implementation is close.

One important correction though: extending decodeEntities() is not the right place to solve this, and it can be security-sensitive. In our current pipeline we can end up calling decodeEntities() multiple times and sometimes after sanitizeText(). That means decoding additional sequences (including nested/encoded forms like &lt;) risks re-introducing markup after sanitization and could open an XSS footgun if anything slips past DOMPurify.

Could you please update the PR to avoid expanding decodeEntities() and instead address decoding in a way that preserves the invariant:
• We should not decode in a way that can turn sanitized text back into HTML.
• Ideally: decode/normalize at most once, and ensure the final output is still treated as text (or re-sanitized if decoding could introduce markup).

Before we can merge, could you please:
1. Adjust the approach so we’re not expanding decodeEntities() (or otherwise ensure decoding can’t produce HTML after sanitization).
2. Add unit tests covering the relevant cases (including double-encoded inputs like &lt;) and asserting the sanitize/decode ordering is safe.
3. Add a changeset (pnpm changeset — patch). Suggested message: fix: mindmap label entity handling (feel free to tweak).
4. (Optional) PR title in conventional format, e.g. fix(mindmap): handle encoded entities in node labels.

Appreciate the contribution — this is a subtle edge case and your work is definitely moving it forward.

P.S. This comment was generated with the help of an AI assistant and may be wrong; please sanity-check the review feedback against the code + Argos output.

When creating labels using `htmlLabels: false`, e.g. ```mermaid --- config: htmlLabels: false --- flowchart TD A[2 < 4 && 12 > 14] ``` The SVG node label gets rendered as `2 < 4 && 12 > 14`. This is fine for HTML text, where we use `.innerHTML` to set the value. But for non-HTML Labels, we use `.textContent`, so we need to pass the unescaped values. Ideally we would stop calling DOMPurify on this label when `.textContent` is used, since the content doesn't need to be sanitized, but adding a quick `<`/`>`/`&`-> `<`/`>`/`&` also works. I've adapted this commit from mermaid-js#6406. Closes: mermaid-js#6406 Co-authored-by: khalil <5alil.landolsi@gmail.com>

When creating labels using `htmlLabels: false`, e.g. ```mermaid --- config: htmlLabels: false --- flowchart TD A[2 < 4 && 12 > 14] ``` The SVG node label gets rendered as `2 < 4 && 12 > 14`. This is fine for HTML text, where we use `.innerHTML` to set the value. But for non-HTML Labels, we use `.textContent`, so we need to pass the unescaped values. Ideally we would stop calling DOMPurify on this label when `.textContent` is used, since the content doesn't need to be sanitized, but adding a quick `<`/`>`/`&`-> `<`/`>`/`&` also works. I've adapted this commit from mermaid-js#6406 and from mermaid-js#7039 Closes: mermaid-js#6406 Co-authored-by: khalil <5alil.landolsi@gmail.com> Co-authored-by: Samarth <115448290+SAMARTHAGARWAL77@users.noreply.github.com>

fix(mindmap): decode <, >, and & correctly in mindmap node labels

7d82170

github-actions bot added the Type: Bug / Error Something isn't working or is incorrect label Mar 22, 2025

BambioGaming closed this Mar 23, 2025

BambioGaming deleted the bug/6396_mindmap-decode branch March 23, 2025 00:31

BambioGaming restored the bug/6396_mindmap-decode branch March 23, 2025 00:32

BambioGaming reopened this Mar 23, 2025

BambioGaming closed this Mar 23, 2025

BambioGaming reopened this Mar 23, 2025

BambioGaming mentioned this pull request Mar 23, 2025

Incorrect Rendering of < in Mindmap #6396

Closed

Merge branch 'develop' into bug/6396_mindmap-decode

c707f81

BambioGaming added 3 commits March 25, 2025 16:28

test(mindmap): add unit test to ensure < > & are decoded correctly

236a5d3

Merge branch 'develop' of https://github.com/mermaid-js/mermaid into …

40408c7

…bug/6396_mindmap-decode

Merge branch 'bug/6396_mindmap-decode' of https://github.com/BambioGa…

d9335ea

…ming/mermaid into bug/6396_mindmap-decode

BambioGaming force-pushed the bug/6396_mindmap-decode branch from 6360dd7 to d9335ea Compare March 25, 2025 15:44

remove unit test for mindmap decode

7776ce1

knsv mentioned this pull request Feb 27, 2026

fix(mindmap): decode <, >, and & characters in node labels #6414

Open

aloisklink mentioned this pull request Mar 2, 2026

fix: prevent escaping < and & when htmlLabels: false #7436

Merged

4 tasks

knsv closed this in #7436 Mar 3, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix: Properly decode <, >, and & in mindmap node labels#6406

Fix: Properly decode <, >, and & in mindmap node labels#6406
BambioGaming wants to merge 6 commits intomermaid-js:developfrom
BambioGaming:bug/6396_mindmap-decode

BambioGaming commented Mar 22, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Mar 22, 2025 •

edited

Loading

Uh oh!

netlify bot commented Mar 22, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Mar 22, 2025 •

edited

Loading

Uh oh!

codecov bot commented Mar 22, 2025 •

edited

Loading

Uh oh!

argos-ci bot commented Mar 25, 2025 •

edited

Loading

Uh oh!

BambioGaming commented Mar 25, 2025

Uh oh!

knsv commented Feb 27, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

BambioGaming commented Mar 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📑 Summary

📏 Design Decisions

Screenshots

📋 Tasks

Uh oh!

changeset-bot bot commented Mar 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

netlify bot commented Mar 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for mermaid-js ready!

Uh oh!

pkg-pr-new bot commented Mar 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Mar 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

argos-ci bot commented Mar 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

BambioGaming commented Mar 25, 2025

Uh oh!

knsv commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

BambioGaming commented Mar 22, 2025 •

edited

Loading

changeset-bot bot commented Mar 22, 2025 •

edited

Loading

netlify bot commented Mar 22, 2025 •

edited

Loading

pkg-pr-new bot commented Mar 22, 2025 •

edited

Loading

codecov bot commented Mar 22, 2025 •

edited

Loading

argos-ci bot commented Mar 25, 2025 •

edited

Loading

knsv commented Feb 27, 2026 •

edited

Loading