Mermaid diagrams are not rendering when viewed via file://

[camold]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I've found a bug and checked that ...

• ... the problem doesn't occur with the mkdocs or readthedocs themes
• ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
• ... the documentation does not mention anything about my problem
• ... there are no open or closed issues that are related to my problem

Description

I have tried the configuration of the docs (https://squidfunk.github.io/mkdocs-material/reference/diagrams/#configuration) but the diagram does not render.
The math formulas do render though.

Expected behaviour

Rendered diagrams.

Actual behaviour

No rendering of the mermaid diagram. No matter if the external javascript is additionally enabled or not (the docs mention it should not be necessary to add this javascript entry).

Steps to reproduce

# my index

Here are the next steps to $b > \frac{1}{n} \sum_{i=1}^n x_i$.

\``` mermaid
graph LR
  A[Start] --> B{Error?};
  B -->|Yes| C[Hmm...];
  C --> D[Debug];
  D --> B;
  B ---->|No| E[Yay!];
\```
Note that the \ are just for correct viewing of the code in markdown.

Then run

mkdocs build --no-directory-urls
# INFO     -  Cleaning site directory
# INFO     -  Building documentation to directory: /home/camo/Projects/mkdocs_test/site
# INFO     -  Documentation built in 0.40 seconds

Package versions

• Python 3.8.0
• MkDocs: 1.2.3
• Material: 8.1.10+insiders.4.8.1

Configuration

site_name: Site name
site_description: Site description
site_author: Site author

nav:
  - home: index.md

theme:
  name: material

markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format
  - pymdownx.arithmatex:
      generic: true
  - toc:
      permalink: "¤"

extra_javascript:
  # - https://unpkg.com/mermaid/dist/mermaid.min.js

  - javascripts/mathjax.js
  - https://polyfill.io/v3/polyfill.min.js?features=es6
  - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js

System information

• Operating system: Linux 5.4.0-87-generic Add documentation how to install using Chocolatey #98~18.04.1-Ubuntu SMP Wed Sep 22 10:45:04 UTC 2021 x86_64 x86_64 x86_64 GNU/Linux

• Browser: Firefox 93.0 (64-bit)

[squidfunk]

Thanks for reporting. Does the browser console show any errors or warnings?

[camold]

This is what I see:

Unfortunately, I am a complete beginner when it comes to debugging such things. Sorry for that.
Thanks for getting back so quickly.

[squidfunk]

Thanks. That's not related to Material for MkDocs. Sounds like misconfiguration then. Are you sure you are using Insiders? Please check the generator meta tag in the browser. It's located in the head and should print:

[squidfunk]

I tried reproducing your issue with the exact configuration you provided, to no avail:

[camold]

Yes, using insiders.

[camold]

I've attached the rendered static website. Maybe that helps so you can have a deep look yourself. Hope the upload doesn't violate any github rules.
site.zip

[squidfunk]

Thanks. I've found the problem:

Fetch API cannot load file:///Users/squidfunk/Downloads/site%202/assets/stylesheets/vendor/mermaid.53552a32.min.css. URL scheme "file" is not supported.

You're viewing it locally and the current integration doesn't work on file://. I'll see if and how we can fix that.

[squidfunk]

Fixed in 23dc629. This was tough.

Explanation: the problem was that the CSS was loaded dynamically using fetch which doesn't work for file:// locations. For search, we can use iframe-worker to make it work offline, by injecting the scripts in an isolated iframe. Sadly, it's not possible to load the CSS in the way we need it dynamically for file:// at all, because we must extract the sources to pass them directly to Mermaid, in order to apply the custom primary and accent colors as set in mkdocs.yml, which is forbidden by CSP. Thus, there's no other way than to bundle the CSS, adding 888b (min-zipped) to the bundle. This is a compromise we must make in order to provide a universal working Mermaid.js integration at the cost of a slightly bigger bundle.

[squidfunk]

Released as part of 8.1.11-insiders-4.8.3.

[camold]

Just getting back to this now. Looks nice. Thanks for the quick fix!