Running Mermaid support locally

[klausbussekw]

I have installed the package with brew install mkdocs-material and now try to get Mermaid support up and running.

According to https://squidfunk.github.io/mkdocs-material/reference/diagrams/ this should be the whole setup in my yaml file:

site_name: MySite
site_description:
plugins:
  - search
nav:
  - Home: index.md
markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format

While mkdocs serve works nicely, all Mermaid code is still just rendered as source.

What am I missing here?

[facelessuser]

That's because the custom fence you are doing only formats the code for mermaid to be applied in the browser. If you wanted mermaid to generate diagrams on the backend, you would need a custom fence to call out to the external mermaid process.

[klausbussekw]

I probably wasn't clear enough: I don't see the diagrams in the browser, when using mkdocs serve, I just see the source code.

[facelessuser]

I, and anyone else assisting, would need a reproducible example. I didn't think Material requires mermaid installed locally, but it is included in the browser. I imagine there is something you are doing incorrectly, I just don't have enough context.

[kamilkrzyskow]

Hi @klausbussekw,
the snippet in OP doesn't include the theme activation:
https://squidfunk.github.io/mkdocs-material/creating-your-site/#configuration

And we don't know how you input the meramid code blocks in files.

Like Isaac said above, we need a more full reproduction, preferably using the info plugin:

• https://squidfunk.github.io/mkdocs-material/guides/creating-a-reproduction/
• https://squidfunk.github.io/mkdocs-material/plugins/info/

[klausbussekw]

Theme activation it was. So my initial yaml just needed those two lines to work:

theme:
  name: material

Thanks a ton.

[DatBlaueHus]

Complete Example:
MKDocsTest.zip

I navigate to the folder, and start mkdocs serve. Localhost:8000 shows the rendered document with the Mermaid display as source.

[kamilkrzyskow]

Like I mentioned you're not activating the material theme, I linked the setup guide in the comment above. mkdocs theme doesn't activate mermaid by default only this material adds mermaid activation.

theme:
  name: material

To add it to default mkdocs theme you need to add it yourself via extra_javascript and a CDN link or via external plugin:

• https://www.mkdocs.org/user-guide/configuration/#extra_javascript
• https://mermaid.js.org/config/usage.html#cdn
• https://github.com/fralau/mkdocs-mermaid2-plugin

Wait a second 👀 I see you've switched accounts

[kamilkrzyskow]

Also if you're planning to use the mkdocs theme and their defaults, better seek help on their discussion board:

• https://github.com/mkdocs/mkdocs/discussions/