VitePress Diagrams Plugin

一个使用 Kroki 服务支持各种图表类型的 VitePress 插件。该插件自动将图表代码块转换为 SVG 图像，在本地缓存，并提供清晰、可自定义的显示效果，支持可选的标题。

使用外部服务需要在构建期间连接互联网，但与在客户端创建图像（包大小巨大和性能下降）和在服务器端创建图像（复杂性 - 例如 mermaid 需要 puppeteer）相比，它提供了显著的优势。

https://www.npmjs.com/package/vitepress-plugin-diagrams
https://github.com/vuesence/vitepress-plugin-diagrams

安装

npm

npm install -D vitepress-plugin-diagrams

yarn

yarn add -D vitepress-plugin-diagrams

pnpm

pnpm add -D vitepress-plugin-diagrams

bun

bun add -D vitepress-plugin-diagrams

配置

App Config

// .vitepress/config.mts
import { defineConfig } from 'vitepress';

import { configureDiagramsPlugin } from "vitepress-plugin-diagrams";; 

export default defineConfig({
  markdown: {
    config: (md) => {
      configureDiagramsPlugin(md, { 
        diagramsDir: "docs/public/diagrams", // 可选：自定义 SVG 文件目录
        publicPath: "/diagrams", // 可选：自定义公共路径
      }); 
    },
  },
});

使用

```mermaid
graph TD
    A[开始] --> B{决策}
    B -->|是| C[确定]
    B -->|否| D[取消]
```
<!-- diagram id="1" caption: "系统流程图" -->

```mermaid
@startmindmap
skinparam monochrome true
+ OS
++ Ubuntu
+++ Linux Mint
+++ Kubuntu
+++ Lubuntu
+++ KDE Neon
++ LMDE
++ SolydXK
++ SteamOS
++ Raspbian
-- Windows 95
-- Windows 98
-- Windows NT
--- Windows 8
--- Windows 10
@endmindmap
```
<!-- diagram id="2" caption: "思维导图" -->

完整支持的图表列表，请参考 Kroki 官方文档。