How to use markdown-it-mermaid?

[qdbest]

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

[sampullman]

I couldn't get the markdown-it plugin to work, so I did a hacky workaround by registering a custom Vue component that loads mermaid and replaces the input diagram description with a generated SVG. In the end, we found that mermaid is pretty bulky (800kB+), so it made more sense to pre-generate images with mermaid-cli. Our setup is:

"scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "mermaid": "glob-run mmdc -i mermaid/\\*.mmd -o docs/img/\\*.svg"
},

[kiaking]

Please post questions to the discord 👍 I think any markdown-it plugin can be registered through markdown config, though if something is not working, then please open another issue with reproduction code 🙌