Mermaid in MkDocs

[voliveira-tmx]

I've configured mermaid on my mkdocs.yaml file like this:

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

However when I try this example:

architecture-beta
    group api(logos:aws-lambda)[API]

    service db(logos:aws-aurora)[Database] in api
    service disk1(logos:aws-glacier)[Storage] in api
    service disk2(logos:aws-s3)[Storage] in api
    service server(logos:aws-ec2)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db

Loading

I get a bunch of interrogation marks, on the UI, how can I modify my mkdocs.yaml to correctly render the logos?

Thank you!

[rmorshea]

That's because the icons aren't loaded. You have to manually register them. Given that, you might consider renaming this discussion to something like "How to registerIconPacks in MkDocs".

For my part, I can't seem to figure this out either. I tried adding:

extra_javascript:
    - https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs
    # Ensure imported packages use the same versions listed above
    - path: js/register-mermaid-icons.js
      type: module

With register-mermaid-icons.js:

import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";

mermaid.registerIconPacks([
    {
        name: "simple-icons",
        loader: () =>
            fetch("https://unpkg.com/@iconify-json/logos/icons.json").then((res) =>
                res.json()
            ),
    },
]);

I'm kind of guessing that the mermaid markdown block has already been translated into the chart by the time this gets run.

[rmorshea]

Reposted here: facelessuser/pymdown-extensions#2499