Mermaid diagram does not render

[Urhengulas]

Current Behavior

We want to use mermaid for a diagram in our README of defmt.

Since #6587 is merged since two weeks ago I assumed that the support for it is already live on crates.io. First question: Is this true or is it not live yet?

Expected Behavior

In any case, the diagram unfortunately does no render on crates.io, but it does render on GitHub.

• github
• crates.io
• code

When opening the page, crates.io shows a warning popup with "Failed to render mermaid diagram." and in the console it prints "WARN: Could not find the language 'mermaid', did you forget to load/include a language module?".

How can I fix this?

Steps To Reproduce

Go to crates.io/defmt and open the developer console.

Environment

• Browser: Firefox 115.0
• OS: Fedora 38

Anything else?

No response

[Turbo87]

Refused to frame '' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.

I think this might be the relevant error in the dev tools.

To answer your questions: Yes, it is live in production. No, I personally hadn't tested it on production yet. Yes, it is broken... 😅

It looks like the reason why it works in development mode but not production is (yet again) our Content Security Policy header, which is set by nginx, which is not running in frontend development mode 🙈

@ToBinio do you have time to take a look at this? first step would be to try and reproduce this locally, and then find a CSP header that allows the mermaid stuff to render correctly.

[ToBinio]

Shure, I can try.
But I will only be able to do something in the evening.

another note:
could it be that because the rendered README's get stored. the old ones like natural-xml-diff don't get mermaid support?
if so, these should probaly get rerendered

[Urhengulas]

@Turbo87 @ToBinio Thank you for the quick response. Please let me know if I can support you in any way.

[ToBinio]

I discovered a new problem... mermaid did not work on my local machine even without the CSP header. Why? firefox...
not sure why but I wasn't able to get the sandbox mode running with Firefox (with Chrome everything was fine)

so I didn't really play around with the CSP header any longer.

a fix for both would be to use strict mode instead of sandbox. this worked with the CSP header and on Firefox

note:
sandbox is still in beta

[Turbo87]

hmm, if I understand their docs correctly then strict should be as safe as the sandbox mode, but the sandbox mode would potentially enable a few more features. given all that, I guess strict should work fine for us.

[Urhengulas]

Thank you for fixing it! It does render now!