hexo-markdown-mermaid

Hexo 插件，用于在文章中渲染 Mermaid 图表。

安装

npm install hexo-markdown-mermaid

快速开始

在文章中添加 mermaid 代码块：

```mermaid
graph TD
A-->B
A-->C
B-->D
C-->D
```

配置

使用语法高亮器（推荐）

仅支持 highlight.js。需排除 mermaid 以便 Mermaid.js 渲染：

highlight:
  enable: true
  exclude_languages:
    - mermaid

:::warning PrismJS 不支持，因为没有 exclude_languages 选项。 :::

Mermaid 选项

mermaid:
  version: 11
  startOnLoad: true
  theme: default
  # 其他 mermaid 配置选项...

可用选项

| 选项 | 描述 | 默认值 | |------|------|--------| | version | Mermaid 版本 | 11 | | startOnLoad | 页面加载时自动渲染 | true | | 其他选项 | 参阅 Mermaid 配置 | - |

许可

MIT

技术细节

为什么在浏览器端渲染而非构建时？

Mermaid CLI 可以在构建时预渲染图表，但它依赖较重（需要 Puppeteer 或类似工具），不适合大多数 Hexo 环境。

本插件选择浏览器端渲染，以保持简洁和广泛兼容性。

为什么要排除 mermaid？

使用 highlight.js 且 Hexo 配置 highlight.enable: true 时，代码块会被预渲染为 HTML，每行被包装在 <span class="line"> 中：

<pre><span class="line">graph TD</span>
<span class="line">A--&gt;B</span></pre>

Mermaid.js 查找 class 为 .mermaid 的元素。排除后，代码块会渲染为：

<pre><code class="highlight mermaid">graph TD\nA--&gt;B</code></pre>

这样 Mermaid.js 就能正确找到并渲染图表。

Mermaid 选择器

本插件使用 Mermaid 默认的查询选择器 .mermaid。参阅 Mermaid RunOptions。