在VitePress中无缝集成Drawio图表：vitepress-plugin-drawio使用指南在VitePres

在VitePress中无缝集成Drawio图表：vitepress-plugin-drawio使用指南

为什么需要这个插件？

在技术文档中，图表是解释复杂系统的最佳工具之一。Drawio作为强大的免费图表工具，其.drawio格式已成为开发者常用的图表格式。vitepress-plugin-drawio让您直接在VitePress项目中渲染Drawio图表，无需手动导出图片，极大提升文档编写效率！

快速安装

通过npm一键安装：

npm install @dhlx/vitepress-plugin-drawio

配置指南

在.vitepress/config.ts中添加插件配置：

// .vitepress/config.ts
import { defineConfig } from 'vitepress'
import withDrawio from '@dhlx/vitepress-plugin-drawio'

export default withDrawio(defineConfig({
  // 您的VitePress配置
}), {
    // 默认页面配置
    // 设置默认宽度（默认：100%）
    width: "100%",
    // 设置默认高度（默认：600px）
    height: "600px",
    // 起始页码（默认：0）
    page: 0,
    // 设置页面标题
    // 暗色模式（默认：auto，选项：light, dark, auto）
    "darkMode": "auto",
    
    // 启用工具栏调整大小功能（默认：false）
    resize: true,

    // 启用工具栏页面切换功能（默认：false）
    pages: true,
    // 启用工具栏缩放功能（默认：false）
    zoom: true,

    // 启用工具栏图层功能（默认：false）
    layers: true,

    // 启用工具栏灯箱功能（默认：false）
    lightbox: true,
    
    // 设置高亮颜色（默认：#0000FF）
    highlight: "#0000ff",
    
    // 设置透明背景（默认：false）
    transparent: true,
    })

在Markdown中使用

在md文件中直接引用.drawio文件，并通过{}添加属性：

<!-- 基础用法 -->
![](./architecture.drawio)

<!-- 带参数的进阶用法 -->
![](./img/hmr.drawio){edit=_blank transparent=true nav=true}

参数说明：

参数	作用	示例值
`edit`	点击编辑行为（推荐`_blank`新标签页）	`_blank`
`transparent`	透明背景（1启用）	true
`nav`	显示导航栏（1启用）	true
`page`	指定显示页码	0
`darkMode`	单独设置暗黑模式	light/dark

💡 提示：{}中的参数会覆盖全局配置，未指定的参数保持全局默认值

实际效果展示

最佳实践建议

版本控制友好：.drawio文件是XML格式，适合Git版本管理
响应式适配：设置width: "100%"让图表自适应移动端
按需加载工具栏：生产环境建议关闭所有工具栏（resize/pages/zoom=false）
暗黑模式适配：使用darkMode: "auto"自动跟随系统主题

结语

vitepress-plugin-drawio消除了图表导出步骤，让您专注于内容创作。通过实时渲染.drawio文件，确保文档中的图表始终与源文件同步，大幅提升技术文档的维护效率！

项目地址：https://github.com/LiDengHui/vitepress-plugin-drawio 立即安装体验，让您的技术文档图表焕然一新！🚀