Incorrect Rendering of < in Mindmap

[nour0205]

Description

When rendering a < character inside a mindmap node in Mermaid, it gets incorrectly encoded as <, whereas > renders correctly. This results in the displayed text being incorrect.

Steps to reproduce

1. Open Mermaid's Live Editor.

2. Paste the following example code into the editor:

   mindmap
     root((Domain))
         Special Characters Test
           LessThan["A < B"]
           GreaterThan["A > B"]
   

3. Observe the rendering behavior:

   • The text "A < B" is displayed incorrectly as "A < B".
   • The text "A > B" is displayed correctly.

Screenshots

Code Sample

mindmap
  root((Domain))
      Special Characters Test
        LessThan["A < B"]
        GreaterThan["A > B"]

Setup

• Mermaid version: : 11.4.0
• Browser and Version: Edge 134.0

Suggested Solutions

• Ensure that < is not over-encoded when rendering text inside mindmap nodes.
• Verify if the same issue occurs in other diagram types (flowcharts, sequence diagrams, etc.).
• Implement a decoding fix to correctly interpret < inside text labels.

Additional Context

No response

[BambioGaming]

I can confirm this bug is present on multiple platforms:

The < character is incorrectly rendered as <. But in the image below, the > character is also incorrectly rendered as >, indicating the issue is within the core mindmap rendering logic of Mermaid.js.

[nour0205]

Bug Analysis: Incorrect Rendering of < in Mindmap Nodes

I've been actively investigating this issue.

Findings:

1. Decoding appears to work correctly:

   • Logs confirm that before rendering, text like "A < B" is properly decoded — i.e., < is turned into <.
   • This happens right after sanitizeText() and decodeEntities() are applied.

2. Rendering regression occurs at the SVG level:

   • Despite decoding, the final rendered <tspan> element contains "<" instead of <.
   • This suggests that the issue arises during or after appending text to SVG using .text() or .node().textContent.

3. Only mindmaps are affected:

   • Other diagram types (flowcharts, sequence diagrams, etc.) do not exhibit this issue.
   • The rendering logic for mindmaps differs as it uses <tspan> with nested content population, which may re-escape < unintentionally.

4. Tested rendering with multiple methods:

   • Both tspan.text('A < B') and tspan.node().textContent = 'A < B' yield the same issue.
   • Even manual decoding before rendering (replace(/&lt;/g, '<')) does not resolve the output — indicating an escaping side effect from the DOM or SVG rendering engine.

5. Browser behavior may be involved:

   • This issue was reproduced in Firefox and Edge.
   • The incorrect rendering persists across both when using innerText, textContent, or .text() from D3.

Conclusion:

This is likely a bug in how SVG text elements in mindmaps are handled. < may be getting re-escaped unintentionally when rendered into <tspan>. Further debugging around how text content is assigned to tspan elements is needed. @BambioGaming @hanyuhanyuhanyu

[BambioGaming]

Hello @nour0205 👋

I've submitted a fix for this issue in #6406. The problem was caused by .text() escaping characters like <, >, and & during SVG rendering inside mindmap <tspan> elements — even when they were already properly decoded upstream.

My PR modifies decodeEntities() utility that ensures these characters are displayed correctly. The decoding is now applied right before rendering the text node to prevent double-escaping.

Let me know if any changes or tests are needed.