`>` and `<` are not being escaped properly when `"flowchart": {"htmlLabels": false}` is used #4390

bentito · 2022-03-24T19:06:15Z

Describe the bug
A less-than "<" symbol causes bad output when using the "flowchart": {"htmlLabels": false} mermaid config option.

To Reproduce
Steps to reproduce the behavior:

Render this mermaid script:

```mermaid
%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
  classDef head fill:#ffbfcf;
  classDef installed fill:#34ebba;

  subgraph servicemeshoperator
    subgraph 1.0 channel
      servicemeshoperator.v2.0.7.1-1.0(2.0.7-1)
      servicemeshoperator.v2.0.7.1-1.0(2.0.7-1) --> servicemeshoperator.v2.0.8-1.0(2.0.8-0)
      servicemeshoperator.v2.0.8-1.0(2.0.8-0) --> servicemeshoperator.v2.1.0-1.0(2.1.0-0)
      servicemeshoperator.v2.1.0-1.0(2.1.0-0) --> servicemeshoperator.v2.1.1-1.0(2.1.1-0):::head
      servicemeshoperator.v2.0.7.1-1.0(2.0.7-1) o--o | >=1.0.2 <2.0.8-0 | servicemeshoperator.v2.0.8-1.0(2.0.8-0)
      servicemeshoperator.v2.0.7.1-1.0(2.0.7-1) o--o | >=1.0.2 <2.1.0-0 | servicemeshoperator.v2.1.0-1.0(2.1.0-0)
      servicemeshoperator.v2.0.7.1-1.0(2.0.7-1) o--o | >=1.0.2 <2.1.1-0 | servicemeshoperator.v2.1.1-1.0(2.1.1-0):::head
      servicemeshoperator.v2.0.8-1.0(2.0.8-0) o--o | >=1.0.2 <2.1.0-0 | servicemeshoperator.v2.1.0-1.0(2.1.0-0)
      servicemeshoperator.v2.0.8-1.0(2.0.8-0) o--o | >=1.0.2 <2.1.1-0 | servicemeshoperator.v2.1.1-1.0(2.1.1-0):::head
      servicemeshoperator.v2.1.0-1.0(2.1.0-0) o--o | >=1.0.2 <2.1.1-0 | servicemeshoperator.v2.1.1-1.0(2.1.1-0):::head
    end
    subgraph stable channel - default
      servicemeshoperator.v2.0.7.1-stable(2.0.7-1)
      servicemeshoperator.v2.0.7.1-stable(2.0.7-1) --> servicemeshoperator.v2.0.8-stable(2.0.8-0)
      servicemeshoperator.v2.0.8-stable(2.0.8-0) --> servicemeshoperator.v2.1.0-stable(2.1.0-0)
      servicemeshoperator.v2.1.0-stable(2.1.0-0) --> servicemeshoperator.v2.1.1-stable(2.1.1-0):::head
      servicemeshoperator.v2.0.7.1-stable(2.0.7-1) o--o | >=1.0.2 <2.0.8-0 | servicemeshoperator.v2.0.8-stable(2.0.8-0)
      servicemeshoperator.v2.0.7.1-stable(2.0.7-1) o--o | >=1.0.2 <2.1.0-0 | servicemeshoperator.v2.1.0-stable(2.1.0-0)
      servicemeshoperator.v2.0.7.1-stable(2.0.7-1) o--o | >=1.0.2 <2.1.1-0 | servicemeshoperator.v2.1.1-stable(2.1.1-0):::head
      servicemeshoperator.v2.0.8-stable(2.0.8-0) o--o | >=1.0.2 <2.1.0-0 | servicemeshoperator.v2.1.0-stable(2.1.0-0)
      servicemeshoperator.v2.0.8-stable(2.0.8-0) o--o | >=1.0.2 <2.1.1-0 | servicemeshoperator.v2.1.1-stable(2.1.1-0):::head
      servicemeshoperator.v2.1.0-stable(2.1.0-0) o--o | >=1.0.2 <2.1.1-0 | servicemeshoperator.v2.1.1-stable(2.1.1-0):::head
    end
  end
```

Output from https://mermaid.live for Mermaid v10.1.0

This renders properly without the "flowchart": {"htmlLabels": false} bit. With cli images since minlag/mermaid-cli:20210503120233a6e5e8 (most recent checked and found not to have the problem) it renders improperly, using > etc for the characters whenever a < less-than is included in the line labeling text.

Expected behavior

Both "flowchart": {"htmlLabels": false} and "flowchart": {"htmlLabels": true} act similarly.

Desktop (please complete the following information):

OS: MacOS
Browser: Firefox
Version: 98.0.2 (64-bit)

Additional context
This problem did not exist as of minlag/mermaid-cli:20210503120233a6e5e8

Edited by @aloisklink to add more information from #4390 (comment)

The text was updated successfully, but these errors were encountered:

MindaugasLaganeckas · 2022-03-25T10:04:26Z

Would a solution be to use the newest image? We do not provide bugfixes for the old releases. 😄

bentito · 2022-03-25T13:39:32Z

This is a problem on latest tag. I was giving an older, known working, tag as an aid to debugging this problem.

MindaugasLaganeckas · 2022-03-26T09:29:52Z

Ok. Thanks for clarification 🙂

aloisklink · 2023-05-10T19:56:06Z

I've tried to recently test this, since I thought a recent commit (mermaid-js/mermaid-cli@ec8559c) might have fixed this issue, but I can't seem to replicate this issue.

I put the above diagram into a file called unescaped.mmd and ran the following commands:

`minlag/mermaid-cli:20210806131951c9b679`

(from 2021-08-06, which you listed as working)

podman run --rm -v ./test:/data minlag/mermaid-cli:20210806131951c9b679 -i /data/unescape.mmd -o /data/unescape-working.svg

`minlag/mermaid-cli:20220321073436a699c8`

(from 2022-03-21 (I just picked a version close to when you made this PR))

podman run --rm -v ./test:/data minlag/mermaid-cli:20220321073436a699c8 -i /data/unescape.mmd -o /data/unescape-should-be-broken.svg

`minlag/mermaid-cli:10.1.1-beta.11`

(from 2023-05-08, current :latest version)

podman run --rm -v ./test:/data minlag/mermaid-cli:10.1.1-beta.11 -i /data/unescape.mmd -o /data/unescape-latest.svg

@bentito, I'm hoping the bug should be fixed with the current master branch (aka the pending v10.2.0 release), but if this is a still an issue with the :latest version of mermaid-cli, is there any chance you can also give us the command you ran and the output .svg/.png/.pdf! It should help in debugging exactly where the issue is.

bentito · 2023-05-11T13:47:01Z

@aloisklink sorry it's still broken and sorry this command line isn't really a minimal necessary to cause the problem, but it's what I have been running from a pipeline from another tool:

docker run \
		--privileged \
		-v /tmp/mermaid.mer:/mermaid.mer \
		-v /tmp/mermaid.mer.svg:/tmp/mermaid.mer.svg \
		-v /tmp/config.json:/config.json \
		-v /tmp:/app/.cache/yarn \
		-it \
		docker.io/minlag/mermaid-cli:latest \
		-c /config.json -i /mermaid.mer -o /tmp/mermaid.mer.svg

where mermaid.mer is:

flowchart LR
  classDef head fill:#ffbfcf;
  classDef installed fill:#34ebba;

  subgraph servicemeshoperator
    subgraph 1.0 channel
      servicemeshoperator.v2.0.7.1-1.0(2.0.7-1)
      servicemeshoperator.v2.0.7.1-1.0(2.0.7-1) --> servicemeshoperator.v2.0.8-1.0(2.0.8-0)
      servicemeshoperator.v2.0.8-1.0(2.0.8-0) --> servicemeshoperator.v2.1.0-1.0(2.1.0-0)
      servicemeshoperator.v2.1.0-1.0(2.1.0-0) --> servicemeshoperator.v2.1.1-1.0(2.1.1-0)
      servicemeshoperator.v2.1.1-1.0(2.1.1-0) --> servicemeshoperator.v2.1.2-1.0(2.1.2-0)
      servicemeshoperator.v2.1.2-1.0(2.1.2-0) --> servicemeshoperator.v2.1.3-1.0(2.1.3-0):::head
      servicemeshoperator.v2.0.7.1-1.0(2.0.7-1) o--o | >=1.0.2 <2.0.8-0 | servicemeshoperator.v2.0.8-1.0(2.0.8-0)
      servicemeshoperator.v2.0.7.1-1.0(2.0.7-1) o--o | >=1.0.2 <2.1.0-0 | servicemeshoperator.v2.1.0-1.0(2.1.0-0)
      servicemeshoperator.v2.0.7.1-1.0(2.0.7-1) o--o | >=1.0.2 <2.1.1-0 | servicemeshoperator.v2.1.1-1.0(2.1.1-0)
      servicemeshoperator.v2.0.7.1-1.0(2.0.7-1) o--o | >=1.0.2 <2.1.2-0 | servicemeshoperator.v2.1.2-1.0(2.1.2-0)
      servicemeshoperator.v2.0.7.1-1.0(2.0.7-1) o--o | >=1.0.2 <2.1.3-0 | servicemeshoperator.v2.1.3-1.0(2.1.3-0):::head
      servicemeshoperator.v2.0.8-1.0(2.0.8-0) o--o | >=1.0.2 <2.1.0-0 | servicemeshoperator.v2.1.0-1.0(2.1.0-0)
      servicemeshoperator.v2.0.8-1.0(2.0.8-0) o--o | >=1.0.2 <2.1.1-0 | servicemeshoperator.v2.1.1-1.0(2.1.1-0)
      servicemeshoperator.v2.0.8-1.0(2.0.8-0) o--o | >=1.0.2 <2.1.2-0 | servicemeshoperator.v2.1.2-1.0(2.1.2-0)
      servicemeshoperator.v2.0.8-1.0(2.0.8-0) o--o | >=1.0.2 <2.1.3-0 | servicemeshoperator.v2.1.3-1.0(2.1.3-0):::head
      servicemeshoperator.v2.1.0-1.0(2.1.0-0) o--o | >=1.0.2 <2.1.1-0 | servicemeshoperator.v2.1.1-1.0(2.1.1-0)
      servicemeshoperator.v2.1.0-1.0(2.1.0-0) o--o | >=1.0.2 <2.1.2-0 | servicemeshoperator.v2.1.2-1.0(2.1.2-0)
      servicemeshoperator.v2.1.0-1.0(2.1.0-0) o--o | >=1.0.2 <2.1.3-0 | servicemeshoperator.v2.1.3-1.0(2.1.3-0):::head
      servicemeshoperator.v2.1.1-1.0(2.1.1-0) o--o | >=1.0.2 <2.1.2-0 | servicemeshoperator.v2.1.2-1.0(2.1.2-0)
      servicemeshoperator.v2.1.1-1.0(2.1.1-0) o--o | >=1.0.2 <2.1.3-0 | servicemeshoperator.v2.1.3-1.0(2.1.3-0):::head
      servicemeshoperator.v2.1.2-1.0(2.1.2-0) o--o | >=1.0.2 <2.1.3-0 | servicemeshoperator.v2.1.3-1.0(2.1.3-0):::head
    end
    subgraph stable channel - default
      servicemeshoperator.v2.0.7.1-stable(2.0.7-1)
      servicemeshoperator.v2.0.7.1-stable(2.0.7-1) --> servicemeshoperator.v2.0.8-stable(2.0.8-0)
      servicemeshoperator.v2.0.8-stable(2.0.8-0) --> servicemeshoperator.v2.1.0-stable(2.1.0-0)
      servicemeshoperator.v2.1.0-stable(2.1.0-0) --> servicemeshoperator.v2.1.1-stable(2.1.1-0)
      servicemeshoperator.v2.1.1-stable(2.1.1-0) --> servicemeshoperator.v2.1.2-stable(2.1.2-0)
      servicemeshoperator.v2.1.2-stable(2.1.2-0) --> servicemeshoperator.v2.1.3-stable(2.1.3-0):::head
      servicemeshoperator.v2.0.7.1-stable(2.0.7-1) o--o | >=1.0.2 <2.0.8-0 | servicemeshoperator.v2.0.8-stable(2.0.8-0)
      servicemeshoperator.v2.0.7.1-stable(2.0.7-1) o--o | >=1.0.2 <2.1.0-0 | servicemeshoperator.v2.1.0-stable(2.1.0-0)
      servicemeshoperator.v2.0.7.1-stable(2.0.7-1) o--o | >=1.0.2 <2.1.1-0 | servicemeshoperator.v2.1.1-stable(2.1.1-0)
      servicemeshoperator.v2.0.7.1-stable(2.0.7-1) o--o | >=1.0.2 <2.1.2-0 | servicemeshoperator.v2.1.2-stable(2.1.2-0)
      servicemeshoperator.v2.0.7.1-stable(2.0.7-1) o--o | >=1.0.2 <2.1.3-0 | servicemeshoperator.v2.1.3-stable(2.1.3-0):::head
      servicemeshoperator.v2.0.8-stable(2.0.8-0) o--o | >=1.0.2 <2.1.0-0 | servicemeshoperator.v2.1.0-stable(2.1.0-0)
      servicemeshoperator.v2.0.8-stable(2.0.8-0) o--o | >=1.0.2 <2.1.1-0 | servicemeshoperator.v2.1.1-stable(2.1.1-0)
      servicemeshoperator.v2.0.8-stable(2.0.8-0) o--o | >=1.0.2 <2.1.2-0 | servicemeshoperator.v2.1.2-stable(2.1.2-0)
      servicemeshoperator.v2.0.8-stable(2.0.8-0) o--o | >=1.0.2 <2.1.3-0 | servicemeshoperator.v2.1.3-stable(2.1.3-0):::head
      servicemeshoperator.v2.1.0-stable(2.1.0-0) o--o | >=1.0.2 <2.1.1-0 | servicemeshoperator.v2.1.1-stable(2.1.1-0)
      servicemeshoperator.v2.1.0-stable(2.1.0-0) o--o | >=1.0.2 <2.1.2-0 | servicemeshoperator.v2.1.2-stable(2.1.2-0)
      servicemeshoperator.v2.1.0-stable(2.1.0-0) o--o | >=1.0.2 <2.1.3-0 | servicemeshoperator.v2.1.3-stable(2.1.3-0):::head
      servicemeshoperator.v2.1.1-stable(2.1.1-0) o--o | >=1.0.2 <2.1.2-0 | servicemeshoperator.v2.1.2-stable(2.1.2-0)
      servicemeshoperator.v2.1.1-stable(2.1.1-0) o--o | >=1.0.2 <2.1.3-0 | servicemeshoperator.v2.1.3-stable(2.1.3-0):::head
      servicemeshoperator.v2.1.2-stable(2.1.2-0) o--o | >=1.0.2 <2.1.3-0 | servicemeshoperator.v2.1.3-stable(2.1.3-0):::head
    end
  end

config.json looks like this:

{
  "startOnLoad": true,
  "maxTextSize": 1000000,
  "flowchart": {
    "useMaxWidth": false,
    "htmlLabels": false
  },
  "sequence": {
    "height": 40,
    "actorMargin": 80,
    "mirrorActors": false,
    "bottomMarginAdj": 1
  },
  "theme": "default"
}

and the SVG looks like this:

Problem seems to be with something in the config.json, b/c just tried it myself without and it works properly.

aloisklink · 2023-05-11T23:01:31Z

Thanks for the clarification!

It seems like the issue is with the "flowchart": {"htmlLabels": false} part of the Mermaid config. This seems like a problem with Mermaid core project, since the same thing happens on https://mermaid.live/, so I'll move this issue to that project.

As a temporary measure, you can try setting "htmlLabels": true, although that will mean your SVGs will only work in a web browser.

Example diagram here:

Source

```mermaid
%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
  classDef head fill:#ffbfcf;
  classDef installed fill:#34ebba;

  subgraph servicemeshoperator
    subgraph 1.0 channel
      servicemeshoperator.v2.0.7.1-1.0(2.0.7-1)
      servicemeshoperator.v2.0.7.1-1.0(2.0.7-1) --> servicemeshoperator.v2.0.8-1.0(2.0.8-0)
      servicemeshoperator.v2.0.8-1.0(2.0.8-0) --> servicemeshoperator.v2.1.0-1.0(2.1.0-0)
      servicemeshoperator.v2.1.0-1.0(2.1.0-0) --> servicemeshoperator.v2.1.1-1.0(2.1.1-0):::head
      servicemeshoperator.v2.0.7.1-1.0(2.0.7-1) o--o | >=1.0.2 <2.0.8-0 | servicemeshoperator.v2.0.8-1.0(2.0.8-0)
      servicemeshoperator.v2.0.7.1-1.0(2.0.7-1) o--o | >=1.0.2 <2.1.0-0 | servicemeshoperator.v2.1.0-1.0(2.1.0-0)
      servicemeshoperator.v2.0.7.1-1.0(2.0.7-1) o--o | >=1.0.2 <2.1.1-0 | servicemeshoperator.v2.1.1-1.0(2.1.1-0):::head
      servicemeshoperator.v2.0.8-1.0(2.0.8-0) o--o | >=1.0.2 <2.1.0-0 | servicemeshoperator.v2.1.0-1.0(2.1.0-0)
      servicemeshoperator.v2.0.8-1.0(2.0.8-0) o--o | >=1.0.2 <2.1.1-0 | servicemeshoperator.v2.1.1-1.0(2.1.1-0):::head
      servicemeshoperator.v2.1.0-1.0(2.1.0-0) o--o | >=1.0.2 <2.1.1-0 | servicemeshoperator.v2.1.1-1.0(2.1.1-0):::head
    end
    subgraph stable channel - default
      servicemeshoperator.v2.0.7.1-stable(2.0.7-1)
      servicemeshoperator.v2.0.7.1-stable(2.0.7-1) --> servicemeshoperator.v2.0.8-stable(2.0.8-0)
      servicemeshoperator.v2.0.8-stable(2.0.8-0) --> servicemeshoperator.v2.1.0-stable(2.1.0-0)
      servicemeshoperator.v2.1.0-stable(2.1.0-0) --> servicemeshoperator.v2.1.1-stable(2.1.1-0):::head
      servicemeshoperator.v2.0.7.1-stable(2.0.7-1) o--o | >=1.0.2 <2.0.8-0 | servicemeshoperator.v2.0.8-stable(2.0.8-0)
      servicemeshoperator.v2.0.7.1-stable(2.0.7-1) o--o | >=1.0.2 <2.1.0-0 | servicemeshoperator.v2.1.0-stable(2.1.0-0)
      servicemeshoperator.v2.0.7.1-stable(2.0.7-1) o--o | >=1.0.2 <2.1.1-0 | servicemeshoperator.v2.1.1-stable(2.1.1-0):::head
      servicemeshoperator.v2.0.8-stable(2.0.8-0) o--o | >=1.0.2 <2.1.0-0 | servicemeshoperator.v2.1.0-stable(2.1.0-0)
      servicemeshoperator.v2.0.8-stable(2.0.8-0) o--o | >=1.0.2 <2.1.1-0 | servicemeshoperator.v2.1.1-stable(2.1.1-0):::head
      servicemeshoperator.v2.1.0-stable(2.1.0-0) o--o | >=1.0.2 <2.1.1-0 | servicemeshoperator.v2.1.1-stable(2.1.1-0):::head
    end
  end
```

Output from https://mermaid.live for Mermaid v10.1.0

bentito mentioned this issue Mar 24, 2022

mv latest tag to working for mermaid-cli image operator-framework/index-mermaid-graph#28

Merged

aloisklink changed the title ~~Text is not being properly escaped~~ > and < are not being escaped properly when "flowchart": {"htmlLabels": false} is used May 11, 2023

aloisklink transferred this issue from mermaid-js/mermaid-cli May 11, 2023

github-actions bot added the Status: Triage Needs to be verified, categorized, etc label May 11, 2023

aloisklink added Type: Bug / Error Something isn't working or is incorrect Graph: Flow labels May 11, 2023

Nor-s mentioned this issue Jul 31, 2024

"<" symbol causes bad output with "uftrace dump --mermaid" namhyung/uftrace#1943

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`>` and `<` are not being escaped properly when `"flowchart": {"htmlLabels": false}` is used #4390

`>` and `<` are not being escaped properly when `"flowchart": {"htmlLabels": false}` is used #4390

bentito commented Mar 24, 2022 •

edited by aloisklink

Loading

MindaugasLaganeckas commented Mar 25, 2022

bentito commented Mar 25, 2022 •

edited

Loading

MindaugasLaganeckas commented Mar 26, 2022

aloisklink commented May 10, 2023

bentito commented May 11, 2023 •

edited

Loading

aloisklink commented May 11, 2023

> and < are not being escaped properly when "flowchart": {"htmlLabels": false} is used #4390

> and < are not being escaped properly when "flowchart": {"htmlLabels": false} is used #4390

Comments

bentito commented Mar 24, 2022 • edited by aloisklink Loading

Output from https://mermaid.live for Mermaid v10.1.0

MindaugasLaganeckas commented Mar 25, 2022

bentito commented Mar 25, 2022 • edited Loading

MindaugasLaganeckas commented Mar 26, 2022

aloisklink commented May 10, 2023

minlag/mermaid-cli:20210806131951c9b679

minlag/mermaid-cli:20220321073436a699c8

minlag/mermaid-cli:10.1.1-beta.11

bentito commented May 11, 2023 • edited Loading

aloisklink commented May 11, 2023

Source

Output from https://mermaid.live for Mermaid v10.1.0

`>` and `<` are not being escaped properly when `"flowchart": {"htmlLabels": false}` is used #4390

`>` and `<` are not being escaped properly when `"flowchart": {"htmlLabels": false}` is used #4390

bentito commented Mar 24, 2022 •

edited by aloisklink

Loading

bentito commented Mar 25, 2022 •

edited

Loading

`minlag/mermaid-cli:20210806131951c9b679`

`minlag/mermaid-cli:20220321073436a699c8`

`minlag/mermaid-cli:10.1.1-beta.11`

bentito commented May 11, 2023 •

edited

Loading