vitepress mermaid

VitePress 是 Vue.js 官方提供的静态网站生成器，它支持使用 Mermaid 来创建流程图、时序图等。

要在 VitePress 中使用 Mermaid，需要在 Markdown 文件中使用类似以下的语法：

graph LR
A-->B
B-->C
C-->D

这里的 `mermaid` 就是 Mermaid 的语法标记，接下来的代码块中就是 Mermaid 的语法了。

需要注意的是，VitePress 默认是启用了 Sanitize HTML 的，如果 Mermaid 的渲染效果不如预期，可以尝试取消 Sanitize HTML，方法是在 `.vuepress/config.js` 文件中添加以下配置：

module.exports = {
  markdown: {
    // 取消渲染时对 HTML 的过滤
    sanitize: false
  }
}

这样就可以在 VitePress 中愉快地使用 Mermaid 了。

相关问题

vitepress 安装mermaid插件

要在 VitePress 中使用 Mermaid 插件，需要进行以下步骤：

1. 安装 mermaid 插件

在终端中进入你的 VitePress 项目的根目录，然后运行以下命令来安装 mermaid 插件：

npm install @vuepress-reco/vuepress-plugin-mermaidjs -D

2. 配置 mermaid 插件

在 `.vuepress/config.js` 文件中添加以下配置：

module.exports = {
  themeConfig: {
    // ...
  },
  plugins: [
    [
      '@vuepress-reco/vuepress-plugin-mermaidjs',
      {
        mermaid: {
          theme: 'default'
        }
      }
    ]
  ]
}

这个配置会将 mermaid 插件添加到你的项目中，并设置默认主题为 `default`。

3. 在 Markdown 文件中使用 Mermaid

在你的 Markdown 文件中，使用以下方式来使用 mermaid：

graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图] -->|条件a| G[纵向流程]

以上就是在 VitePress 中安装和使用 Mermaid 插件的步骤。

我使用的 vitepress 安装 markdown-it-mermaid报错 Cannot read properties of undefined (reading 'document') at d3.js:8:26

这个错误通常是由于在服务器端（如使用 Node.js 或 Vitepress）执行 Mermaid 时，由于缺少浏览器 API 导致的。您可以尝试使用 mermaid.cli 渲染 Mermaid 图表，而不是在浏览器中渲染。以下是使用 mermaid.cli 的步骤：

1. 安装 mermaid.cli：

npm install -g mermaid.cli

2. 在 Markdown 文件中，使用以下代码块语法来代替 Mermaid 代码块：

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

3. 在构建或预览 Vitepress 网站之前，在命令行中运行以下命令：

mermaid -p node_modules/mermaid/dist/ -w 1024 -H 768 -i markdown < your_markdown_file.md > your_markdown_file_rendered.md

此命令将使用 mermaid.cli 将 Mermaid 代码块转换为 SVG，并将其输出到名为 `your_markdown_file_rendered.md` 的新文件中。

4. 在 Vitepress 中，在您的 Markdown 文件中，将原始 Mermaid 代码块替换为新生成的 Markdown 文件中的 SVG 代码块。

请注意，这种方法不支持动态更新 Mermaid 图表。如果您需要动态图表，您将需要使用服务器端渲染（SSR）或启用客户端渲染（CSR）。