mermaid.js diagram with math typesetting

[haykh]

hello people! i'm trying to make a mermaid diagram with math equations in it (i'm using katex for rendering them). mermaid natively supports katex, but seems like the version currently in mkdocs-material does not.

```mermaid
flowchart LR
    A-->B[a + $$b$$]
    B-->D(text)
    class A cssClass
```

so i tried to also include the mermaid cdn to the .md file

<script src=" https://cdn.jsdelivr.net/npm/mermaid@10.9.0/dist/mermaid.min.js "></script>

and now it actually shows the math typesetting but does not adapt the color to the theme. my attempts on using custom css classes as suggested here did not work. wanted to ask if there is a workaround (or perhaps if i'm doing something wrong).

[squidfunk]

Currently not supported, as this is kind of a mixup of two integrations. I'm not sure how this could be pulled off with a proper dark mode integration, but if somebody can cook something up, we can consider it.

[haykh]

thanks for the answer! as a temporary workaround, is there an easy way to simply disable the built-in mermaid interpreter? i can probably handle the theme transition separately.

[squidfunk]

Yes, you don't have to use our native integration if that doesn't fit your bill, you can use another one, e.g. the mermaid2 plugin ☺️

[haykh]

no i tried it, somehow it's even less configurable than the native one. i guess what i'm really asking is whether one could simply disable all the mermaid plugins that come with mkdocs and simply use and customize the upstream mermaid.js?

[squidfunk]

Yes, as said, I recommend not to use our native integration which is only enabled when a code block tagged with the CSS .mermaid class is found, but add your own integration similar to how we do it by using SuperFences:

markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid-custom # <- anything but "mermaid", which is used by our native integration
          format: !!python/name:pymdownx.superfences.fence_code_format

Then, in JavaScript, look for code blocks with the class .mermaid-custom and register Mermaid.js as needed.

[squidfunk]

Additionally, if the problem can be fixed by us just upgrading Mermaid, we're happy to do that!

[haykh]

thanks for suggestions! for now i think i can live without this, but in the future will definitely look a bit closer into it and try to come up with a reasonable solution (either just for myself, or if applicable, for mkdocs-material). closing this discussion for now, but will post here if/when i find something useful. thank you again :)

[vedranmiletic]

@haykh Can you try if this works with 9.5.21? It has new Mermaid.

[haykh]

thanks for the follow-up. now it does render, but the color is mismatched (essentially, the behavior is the same as with loading a custom mermaid)