mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
68.69k stars 6.07k forks source link

Parsing error when assigning a hex color value to the last attribute of a linkStyle #5498

Open chrisbloom7 opened 2 months ago

chrisbloom7 commented 2 months ago

Description

As the title says, trying to assign a hexadecimal color value to the last attribute of a linkStyle definition causes a parsing error. For example:

graph LR
  A --> B

  %% Assigning a hex color to the last attribute, parsing error
  linkStyle 0 stroke-width:4px,stroke:#FF69B4;
graph LR
  A --> B

  linkStyle 0 stroke-width:4px,stroke:#FF69B4;

The parsing error does not occur when you assign a hex color value to an attribute that is not the last attribute, nor if you assign a color name instead of a hex value to the last attribute 🤯

graph LR
  A --> B
  C --> D

  %% Assigning a hex color to an attribute that isn't the the last, works OK
  linkStyle 0 stroke:#FF69B4,stroke-width:4px;

  %% Assigning a color name instead of a hex value to the last attribute, works OK
  linkStyle 1 stroke-width:4px,stroke:HotPink;
graph LR
  A --> B
  C --> D

  linkStyle 0 stroke:#FF69B4,stroke-width:4px;
  linkStyle 1 stroke-width:4px,stroke:HotPink;

Steps to reproduce

  1. Recreate the graph definitions above in a mermaid compatible editor
  2. View the rendered output
  3. Observe the first graph generates a parsing error while the second does not

Screenshots

Screenshot of the parsing error when rendered:

screenshot of parsing error

Code Sample

Setup

I've confirmed this behavior in both https://mermaid.live (as of v10.9.0) and https://develop.git.mermaid.live (as of v11.0.0-alpha.7+e68125e).

Suggested Solutions

Based on the parsing error output, it appears to be an encoding problem while trying to parse the original hex value. I have verified that this is not a copy/paste issue from a corrupt source definition.

Parse error on line 4:
... linkStyle 0 stroke:fl°FF69B4¶ß
-----------------------^

Additional Context

No response