Skip to content

fix/label-escaping-htmlLabels-false - #7039

Closed
SAMARTHAGARWAL77 wants to merge 3 commits into
mermaid-js:developfrom
SAMARTHAGARWAL77:fix/label-escaping-htmlLabels-false
Closed

SAMARTHAGARWAL77 wants to merge 3 commits into
mermaid-js:developfrom
SAMARTHAGARWAL77:fix/label-escaping-htmlLabels-false

Conversation

@SAMARTHAGARWAL77

Copy link
Copy Markdown

📑 Summary

Fixes escaping of special characters (<, >, &, \) in node labels when flowchart.htmlLabels is set to false.

Previously, these characters were either stripped or not rendered correctly, breaking the expected output when htmlLabels: false.

Resolves #7016


📏 Design Decisions

  • Updated sanitizeText() in common.ts to handle label escaping manually when htmlLabels: false.

  • When htmlLabels: true, existing DOMPurify logic remains unchanged.

  • Escaping covers:

    • & → &amp;
    • < → &lt;
    • > → &gt;
    • \ → \\
  • Added test cases to verify that escaping works correctly and nothing breaks in htmlLabels: true mode.

  • No breaking changes; default behavior is preserved for users who rely on HTML labels.


📋 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:.

@netlify

netlify Bot commented Oct 4, 2025 •

Copy link
Copy Markdown

✅ Deploy Preview for mermaid-js ready!

Name Link
🔨 Latest commit 93c55d5
🔍 Latest deploy log https://app.netlify.com/projects/mermaid-js/deploys/68e5d9f92094290008e26852
😎 Deploy Preview https://deploy-preview-7039--mermaid-js.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@changeset-bot

changeset-bot Bot commented Oct 4, 2025 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 93c55d5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages
Name Type
@mermaid-js/examples Patch
mermaid Patch
@mermaid-js/layout-elk Patch
@mermaid-js/layout-tidy-tree Patch
@mermaid-js/mermaid-zenuml Patch
@mermaid-js/parser Patch
@mermaid-js/tiny Patch

Not sure what this means? Click here to learn what changesets are.

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

@github-actions github-actions Bot added the Type: Bug / Error Something isn't working or is incorrect label Oct 4, 2025
@pkg-pr-new

pkg-pr-new Bot commented Oct 4, 2025 •

Copy link
Copy Markdown

Open in StackBlitz

@mermaid-js/examples

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

mermaid

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

@mermaid-js/layout-elk

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

@mermaid-js/layout-tidy-tree

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/layout-tidy-tree@7039

@mermaid-js/mermaid-zenuml

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

@mermaid-js/parser

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

@mermaid-js/tiny

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

commit: 93c55d5

@codecov

codecov Bot commented Oct 4, 2025 •

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 57.14286% with 6 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.56%. Comparing base (c728d86) to head (93c55d5).
⚠️ Report is 448 commits behind head on develop.

Files with missing lines Patch % Lines
packages/mermaid/src/diagrams/common/common.ts 57.14% 6 Missing ⚠️
Additional details and impacted files

Impacted file tree graph

@@           Coverage Diff           @@
##           develop   #7039   +/-   ##
=======================================
  Coverage     3.55%   3.56%           
=======================================
  Files          473     473           
  Lines        47454   47462    +8     
  Branches       730     734    +4     
=======================================
+ Hits          1687    1690    +3     
- Misses       45767   45772    +5     
Flag Coverage Δ
unit 3.56% <57.14%> (+<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/diagrams/common/common.ts 31.95% <57.14%> (+0.19%) ⬆️
🚀 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.

@SAMARTHAGARWAL77

Copy link
Copy Markdown
Author

Hi @darshanr0107 @dijitali , can you both review this. Thanks for your time.

@SAMARTHAGARWAL77

Copy link
Copy Markdown
Author

Hi @shubhamparikh2704 @darshanr0107, Can you review this once. Thanks for your time.

@argos-ci

argos-ci Bot commented Oct 8, 2025 •

Copy link
Copy Markdown

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

Build Status Details Updated (UTC)
default (Inspect) ⚠️ Changes detected (Review) 171 changed Oct 8, 2025, 3:43 AM

aloisklink added a commit to aloisklink/mermaid that referenced this pull request Mar 2, 2026
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 &lt; 4 &amp;&amp; 12 &gt; 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 `&lt;`/`&gt;`/`&amp;`-> `<`/`>`/`&` 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>
@knsv knsv closed this in #7436 Mar 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Type: Bug / Error Something isn't working or is incorrect

Projects

None yet

Development

Successfully merging this pull request may close these issues.

\, &, < and > have chaotic behaviors with htmlLabels: false

1 participant