Using click with MermaidJS in markdown causes "This content is blocked. Contact the site owner to fix the issue"

[skoblenick]

Select Topic Area

Question

Body

I have started adding diagrams (using mermaid) within markdown files in my repo. I was expecting to be able to leverage the interactive functionality as described here. However, if I provide a full URL and click the elements it goes to a This content is blocked. Contact the site owner to fix the issue.

Example that produces the above:

flowchart TB
   user --> dashboard

   click dashboard "https://github.com/skoblenick/skoblenick/blob/main/README.md" _blank

Loading

flowchart TB
   user --> dashboard

   click dashboard "https://github.com/skoblenick/skoblenick/blob/main/README.md" _blank

If, I click node it produces the issues above, but I right-click and open in new window/tab it loads the expected page without 404ing.

I have also tried using a relative path on the URL, but that 404s due to the diagram being served in an iframe with a different URL (https://viewscreen.githubusercontent.com/markdown/dashboard/README.md)

flowchart TB
   user --> dashboard

   click dashboard "./dashboard/README.md" _parent

Loading

flowchart TB
   user --> dashboard

   click dashboard "./dashboard/README.md" _parent

The only method I've found that works as expected is by putting an anchor in the node's label like:

flowchart TB
  A[<a href='https://google.com'>works</a>]

Loading

flowchart TB
  A[<a href='https://google.com'>works</a>]

While it works... It has the undesired effect of only the label being clickable and not the entire node element.

Is there a method to make this work correctly strictly using click?

[jge162]

Hello @skoblenick thanks for your detailed post, here is the issue the URLs you're trying to link to are being blocked by the Github content security policy. The only workaround is to use an anchor tag within the node label to make it clickable. Unfortunately, it doesn't seem that there's a way to make the entire node element clickable using just the click command in mermaid. I don't think you can do it.

[skoblenick]

It's unfortunate if there is no solution. All URLs I'm linking to are GitHub URLs. I was really hoping to link between README.md's in the same repo so each graph (and document) could be more scoped down to the architecture of each component.

[electroly]

On roughly the one year anniversary of this suggestion, using an anchor tag within the node label no longer works. Now it simply shows the literal HTML. Until very recently this worked. Here's an example that worked at the time but no longer does: mermaid-js/mermaid#467 (comment)

[QuintinWillison]

I'm experiencing this issue too.

A "content security policy" that prevents opening links to GitHub itself?
It's clearly a bug in GitHub's adoption of Mermaid and should be fixed.
Using Mermaid diagrams as an index/jump-off point to lead to other documentation is a blindingly obvious use case for this technology.

Given Mermaid support was announced nearly a year and a half ago then I am really surprised that such a massive gap in functionality is still not fixed.

[kencrismoncw]

Come on GitHub, This is a fundamental feature of Mermaid and in my case makes the entire Documentation As Code now very limited.

BTW: The fix above by putting the "Anchor" in the "Click Event" is no longer working or at least in my GitHub Organization crismonicwave.

Is there an Org Setting to at least allow "Within the same repo" markdown navigation from a Mermaid document Node to a markdown within the repo?

This example below does NOT work.

Main github pages for CrismonicWave

flowchart TB
   user --> dashboard

   click dashboard "./SECURITY.md" _parent

Loading

I get the message shown in the attached screen shot.

[rrrutledge]

I feel the same way - want to link to other MD files in my same repo.

[cellcoresystems]

Yes and it would give us the ability to make a mind map instead of a TOC or even a sequence diagram in which we can link the code producing the sequence.
So much more possibilities and living documentation.

Come on Github at least an answer would be appreciated.

[wuleninja]

Thanks for posting this. This is obviously needed.

Maybe the answer is called "GitLab" ?

[ttomdewit]

I am experiencing a similar issue. I am documenting an infrastructure architecture with MermaidJS flowchart abilities and each node represents a GitHub repository and I want to link them as such (so far all internal GH links, that is).

Commenting here to address 1) that more people are affected, and 2) subscribing myself to updates.

Example console error

Refused to load https://github.com/org/repo because it does not appear in the frame-src directive of the Content Security Policy.

Example Mermaid graph

---
title: Infrastructure architecture
---

flowchart LR
    subgraph design 
        repo1 --> repo2
    end

    click repo1 href "https://github.com/org/repo1" _blank
    click repo2 href "https://github.com/org/repo2" _blank

Loading

[ttomdewit]

I am experiencing a similar issue. I am documenting an infrastructure architecture with MermaidJS flowchart abilities and each node represents a GitHub repository and I want to link them as such (so far all internal GH links, that is).

Commenting here to address 1) that more people are affected, and 2) subscribing myself to updates.

Example console error

Refused to load https://github.com/org/repo because it does not appear in the frame-src directive of the Content Security Policy.

Example Mermaid graph

---
title: Infrastructure architecture
---

flowchart LR
    subgraph design 
        repo1 --> repo2
    end

    click repo1 href "https://github.com/org/repo1" _blank
    click repo2 href "https://github.com/org/repo2" _blank

Loading

This seems to work now.

[maharg101]

Adding a +1 here for this issue. Mermaid support is great, but not having hyperlinks is very limiting.

I should add that I just want to be able to link to an anchor in the same markdown document.

[dhirschfeld]

I also require this. Posting to subscribe to updates...

[alfonso-ramirezTGCS]

I am also experiencing this issue and am tagging along to subscribe to any updates

[lukeholman]

Same here - I would love to add hyperlinks to nodes (or the node text), and am tagging in hopes of an update.

[utybo]

It seems that even <a> links no longer work now...

[sebmestrallet]

Indeed...

I also found #106690

[tirsomartinezreyes]

Please Github, enable click interaction on mermaidJS.

At this time, anchor on label is the only way to make it works

[jaanli]

This would be super helpful!

[hackers267]

Does the mindmap support the link or href?

[kyle-winkelman]

For those still watching this, click in Flowchart and Class Diagrams work. Gantt appears to appropriately set the class to clickable, but doesn't actually create an href. I believe these are the only diagrams that Mermaid currently allows click in.

The biggest thing for me is that relative links do not work still as they are relative to https://viewscreen.githubusercontent.com/markdown which is where GitHub renders the iFrame instead of being relative to the source.

```mermaid
flowchart LR
  Google --- GitHub
  click Google href "https://www.google.com"
  click GitHub href "https://www.github.com"
```

flowchart LR
  Google --- GitHub
  click Google href "https://www.google.com"
  click GitHub href "https://www.github.com"

Loading

```mermaid
gantt
  dateFormat  YYYY-MM-DD

  section Clickable
    Google :active, cl1, 2014-01-07, 3d
    GitHub :cl2, after cl1, 3d

  click cl1 href "https://www.google.com"
  click cl2 href "https://www.github.com"
```

gantt
  dateFormat  YYYY-MM-DD

  section Clickable
    Google :g1, 2014-01-07, 3d
    GitHub :g2, after g1, 3d

  click g1 href "https://www.google.com"
  click g2 href "https://www.github.com"

Loading

```mermaid
classDiagram
  class Google
  class GitHub
  Google --> GitHub
  click Google href "https://www.google.com"
  click GitHub href "https://www.github.com"
```

classDiagram
  class Google
  class GitHub
  Google --> GitHub
  click Google href "src"
  click GitHub href "https://www.github.com"

Loading

[ajoefield]

still a problem for me as well - would be nice to have tbh