Skip to content

Sankey Diagram Parsing Failure: Special Characters in Node Names Trigger "Syntax error in text" (v11.12.1) #7528

@EmnaBarbouch

Description

@EmnaBarbouch

Description

The Sankey diagram renderer fails with a "Syntax error in text" when rendering the "FY20–21 Performance" diagram at localhost:9000/sankey.html. In v11.12.1, the parser appears unable to handle special characters within node names—particularly single quotes ('), ampersands (&), forward slashes (/), and hyphens (-). This results in a complete rendering failure, while the "Energy flow" diagram on the same page renders without issues, indicating inconsistent parsing behavior.

Steps to reproduce

  1. Open packages/mermaid/demos/sankey.html in the development environment.
  2. Navigate to the "FY20-21 Performance" diagram section at the top of the page.
  3. Observe that the diagram fails to render, showing a "Syntax error in text" message with mermaid version 11.12.1.
  4. Note that the "Energy flow" diagram directly below renders without any issue.
  5. Compare both diagram sources and identify special characters in node names as the likely cause.

Screenshots

Image

Code Sample

<!-- Original broken code -->

<pre class="mermaid">
sankey-beta

Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597
Bio-conversion,Losses,26.862
Bio-conversion,Solid,280.322
Bio-conversion,Gas,81.144
Biofuel imports,Liquid,35
Biomass imports,Solid,35
Coal imports,Coal,11.606
Coal reserves,Coal,63.965
Coal,Solid,75.571
District heating,Industry,10.639
District heating,Heating and cooling - homes,22.505
District heating,Heating and cooling - commercial,46.184
Electricity grid,Over generation / exports,104.453
Electricity grid,Lighting & appliances - commercial,113.726
Electricity grid,Lighting & appliances - homes,27.14
</pre>

<!-- Fixed code -->

<pre class="mermaid">
sankey-beta

Agricultural waste,Bio-conversion,124.729
Bio-conversion,Liquid,0.597
Bio-conversion,Losses,26.862
Bio-conversion,Solid,280.322
Bio-conversion,Gas,81.144
Biofuel imports,Liquid,35
Biomass imports,Solid,35
Coal imports,Coal,11.606
Coal reserves,Coal,63.965
Coal,Solid,75.571
District heating,Industry,10.639
District heating,Heating and cooling homes,22.505
District heating,Heating and cooling commercial,46.184
Electricity grid,Over generation exports,104.453
Electricity grid,Lighting and appliances commercial,113.726
Electricity grid,Lighting and appliances homes,27.14
</pre>


---

Setup

  • Mermaid version: 11.12.1
  • Browser: Edge
  • OS: Windows 11

Suggested Solutions

The issue is caused by the Sankey parser's inability to handle special characters inside node names.

  • Single quotes: Agricultural 'waste' — remove quotes or escape them in the parser
  • Ampersand: Lighting & appliances — replace & with and or escape in parser
  • Forward slash: Over generation / exports — replace / with or or escape in parser
  • Hyphen: Heating and cooling - homes — remove hyphen or escape in parser

Additional Context

This error was identified while testing the **sankey.html demo file using **pnpm run dev.
The "Energy flow" diagram on the same page renders correctly, confirming the issue is isolated to special character handling in the Sankey parser and not a global failure. Escaping or removing the problematic characters allows the diagram to render correctly.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: TriageNeeds to be verified, categorized, etcType: Bug / ErrorSomething isn't working or is incorrect

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions