lume_mermaid_plugin@v0.0.2

In your _config.ts file, add these:

import mermaidPlugin from "./mermaidPlugin.ts";

site.use(mermaidPlugin())

How it does under the hood

After the rendering, special characters will be HTML-encoded. This makes Mermaid unable to parse the syntax. Also, the rendered Mermaid block will be

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

This library is the same with adding this processor into your _config.ts:

site.process([".html"], (pages) => {
  for (const page of pages) {
    const mermaidBlocks = page.document?.getElementsByClassName("language-mermaid");
    if (!mermaidBlocks) continue
    addMermaidScript(page);
    processMermaidBlock(mermaidBlocks, page);
  }
});