Mermaid diagrams not working

[JamesRivers]

I am running mkdocs-material Version: 8.1.9
I have added

markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format

to my mkdocs.yml file.

In an MD I have

```mermaid
graph TD;
A["MXF (example)"] -->|Delivered to Storage Server| B(NAS);
C["WF Manager "]--> |spy and Scrape data from media| B{NAS};
C["WF Manager"]--> |updates| D{ Content Service};
D[" Content Portal"]--> E["PG DataBase"];

But the diagrams are not being rendered - what have I missed?

[squidfunk]

Mermaid diagram are still exclusively in Insiders. When the funding level reaches $5,000, they will be released for everyone. If you want to use them now, you can sponsor @squidfunk with $10/month, and you'll get access to Mermaid diagrams and many other features.

[chraebslight]

Is this answer still true? I think with version 0.8.2 native support for Mermaid.js was added.

[squidfunk]

Mermaid diagrams have since been released and are available in the community edition for free ☺️

[JamesRivers]

Thanks Martin, apologies I thought it was in version 8 already. Thanks for confirming, will look at insiders programme.

[bennypotter]

I know this issue is pretty old, but Im seeing this problem. I read from the docs this should work out of the box with the applied configuration:

markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format

What am i missing?

My Mermaid code:

```mermaid
graph LR
  A[Start] --> B{Error?};
  B -->|Yes| C[Hmm...];
  C --> D[Debug];
  D --> B;
  B ---->|No| E[Yay!];

I'm using:

mkdocs, version 1.5.3 (Python 3.9)

mkdocs-material==9.4.14
mkdocs-material-extensions==1.3.1
mkdocs-mermaid2-plugin==1.1.1

[kamilkrzyskow]

Hi @bennypotter,

• you're using an older version of mkdocs-material,
• you're using the mermaid2 plugin that has its own mermaid implementation, which could conflict (?) with the theme's implementation
• the example code blocks is missing ``` at the bottom, but I will assume it was done on purpose here
• you didn't specify how you run the page, with mkdocs serve or do you open the index.html from the file system

The diagrams are converted with JavaScript, so maybe the mermaid.js gets somehow blocked, by adblock, other extension? Check the console in the browser developer tools.

Best to troubleshoot with a minimal reproduction using the info plugin, and once you have a .zip with the issue then share it here ✌️

This is a minimal example not from the info plugin, but works for me with 9.5.11
mermaid-test.zip

[bennypotter]

Thanks for responding @kamilkrzyskow I think bullet 2 was the problem. I was using the techdocs-core plugin, removing that made it work!

[DarkFM]

Bullet 2 was the issue for me as well. Since I needed to use both plugins, I added this config inside markdown_extensions and that did the trick:

- pymdownx.extra:
      pymdownx.superfences:
        custom_fences:
          - name: mermaid
            class: mermaid
            format: !!python/name:pymdownx.superfences.fence_code_format

SOURCE

[ady642]

Thank you @DarkFM you saved my day/week