Update: There is a more recent and better configurable plugin for this: https://lume-mermaid.willcraft.software/

---

How to use

In your _config.ts file, add these lines:

import mermaid from "@ooker777/lume-mermaid-plugin/";
// or
// import mermaid from "https://deno.land/x/lume_mermaid_plugin/mod.ts";

site.use(mermaid())

How it works

After the rendering of Lume, the rendered Mermaid block will be:

<pre>
  <code class="language-mermaid">
    Mermaid code
  </code>
</pre>

While Mermaid API only look for the <div> or <pre> tags with class="mermaid".

This plugin will:

• Use correct <pre class="mermaid">Mermaid code</pre> element
• Inject Mermaid API once for every page containing Mermaid code