Mermaid no longer render links

[michaelvlach]

Select Topic Area

Bug

Body

This used to work at least few days ago but now all Mermaid diagrams allow only text and no HTML, links or clicking. Is this intentional? Has the global securityPolicy changed to 'strict' perhaps? Or Mermaid might have been updated and newly defaults to 'strict'?

Example:

This diagram is still working fine on crates.io:
https://crates.io/crates/agdb#decision-tree

But no longer on GitHub where it is coming from:
https://github.com/agnesoft/agdb?tab=readme-ov-file#decision-tree

Minimum reproduction (HTML nor markdown links work):

flowchart LR;
    GitHub[<a href='www.github.com'>GitHub</a>] --> mk["`[GitHub](www.github.com)`"]

Loading

[rhattersley]

It's not just links that have stopped working. Other HTML elements (other than <br>) that used to work have also stopped. For example:

flowchart TD
    Existing("<h2>The title</h2><i>Subtitle</i><br>Multi-line content<br>still works.")

Loading

[bewuethr]

Also breaks escaping double quotes:

[rhattersley]

It's working again. 🥳 Thank you to whoever in GitHub fixed this - you've saved us from having to port a bunch of diagrams to a different technology. 👍

[fogoplayer]

I'm also seeing this issue

[thorimur]

Got bitten by this as well.

It seems that using mermaid's click functionality provides a partial workaround for links specifically: oddly, the cursor hand shows up and the url is shown on mouseover, but clicking does nothing. Command/ctrl clicking, however (to open in a new tab), does work.

This of course wouldn't address the formatting issue, but on the topic of links, it would be nice if the click functionality worked as well. (However, whereas formatting was working fine and suddenly broke, I'm not sure click functionality ever worked on github.)

[michaelvlach]

Clicking & links absolutely did work before. It worked fine and exactly as on crates.io in my OP link. It broke few days ago along with the HTML formatting etc. Unless there is a bug I believe the default securityPolicy changed to strict which disallow HTML (and links & clicking). Oddly the clicking syntax works as you say:

flowchart LR
        A-->B
        click A "https://www.github.com" "This is a link"
        click B "https://www.github.com" "This is a link"

Loading

[thorimur]

Ah, I should be clear: when I say "click functionality" above, I only mean click functionality, i.e. the click A "<link>" syntax. Clicking on HTML-based links did indeed work previously in the breakage that caused me to comment here. :)

[rrrutledge]

Was there some release that broke this functionality? What is the right way to report it to GitHub as a bug?

[bewuethr]

Reporting here and upvoting is one way, and you can create a ticket via https://support.github.com/, too

[sidharthv96]

This seems to be some change by GitHub internally, as the version of mermaid they are using is still 10.0.2, which is almost a year old.

info

Loading

[therealryan]

Possibly rolled into the same regression, but I've also just noticed that the background of edge labels is now translucent, which really damages readability.

For example:

graph LR
  source -- The background should be opaque --> sink

Loading

[jeffabailey]

It looks like exposing securityLevel='loose' in some way would alleviate this problem.

https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams#creating-mermaid-diagrams

https://mermaid.js.org/syntax/flowchart.html#interaction

[uuf6429]

I'm struggling to understand how those two links relate to you comment.

[jeffabailey]

Do you mean how the two links relate to the topic?

[thorimur]

HTML Links are apparently thankfully working now, but it seems markdown links still aren't:

graph TB
  node1["<a href='https://github.com/'>A link to GitHub</a>"] --> node2["`[Unfortunately not a link to GitHub](https://github.com/)`"]

Loading

Source:

graph TB
  node1["<a href='https://github.com/'>A link to GitHub</a>"] --> node2["`[Unfortunately not a link to GitHub](https://github.com/)`"]

Is this an intentional decision on GitHub's part? Or is it something to do with mermaid?

[jaguillette]

I'm also seeing text with a link that is not formatted as a markdown link getting interpreted as a markdown link, which then fails to render. For example:

flowchart TD
  gh("This should be the url for github.com: https://github.com")--should be-->ghspace("h ttps://github.com<br/>but without the space.")

Loading

flowchart TD
  gh("This should be the url for github.com: https://github.com")--should be-->ghspace("h ttps://github.com<br/>but without the space.")

In my case, I want the URL to appear literally, not as a link, and I haven't found a way to do that because it's automatically getting picked up and translated into a non-functioning format.

[Yann39]

You can use an invisible unicode character instead of a space, so that it looks the same :)

[Yann39]

I came across the same problem when displaying a link in a text of a relation.

This does not work :

flowchart LR
CLIENT((client)) ---->|"http://myapp.example.com"| BROWSER

flowchart LR
CLIENT((client)) ---->|"http://myapp.example.com"| BROWSER

Loading

To bypass the limitation, I simply added an invisible character after "http" (for example a Left-to-right-mark), and that's it ! :

flowchart LR
CLIENT((client)) ---->|"http‎://myapp.example.com"| BROWSER

flowchart LR
CLIENT((client)) ---->|"http‎://myapp.example.com"| BROWSER

Loading