VitePress Mermaid Preview

一个用于在 VitePress 中展示 Mermaid 图表的插件。

✨ 特性

• 🗺️ Mermaid 集成: 在 Markdown 中直接渲染 Mermaid 图例
• 🎨 可定制: 支持 mermaid 的所有配置选项
• 🔧 简单设置: 一键安装，快速配置
• 📁 组件支持: 提供 Vue 组件用于思维导图渲染
• 🚀 TypeScript: 完整的 TypeScript 支持和类型定义

📦 安装

npm install vitepress-mermaid-preview
# or
yarn add vitepress-mermaid-preview
# or
pnpm add vitepress-mermaid-preview

🚀 快速开始

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

// .vitepress/config.ts
import { defineConfig } from 'vitepress';
import { vitepressMermaidPreview } from 'vitepress-mermaid-preview';

export default defineConfig({
  markdown: {
    config: (md) => {
      vitepressMermaidPreview(md, {
        showToolbar: false, // 全局设置：是否默认显示工具栏
      });
    },
  },
});

在 .vitepress/theme/index.ts 中注册全局组件：

// .vitepress/theme/index.ts
import type { Theme } from 'vitepress';
import DefaultTheme from 'vitepress/theme';
import { initComponent } from 'vitepress-mermaid-preview/component';
import 'vitepress-mermaid-preview/dist/index.css';

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    initComponent(app);
  },
} satisfies Theme;

📖 使用方法

📝 基本用法

可以直接在 Markdown 中使用 mermaid 代码块来创建图表：

🔧 工具栏控制

可以在代码块中使用 frontmatter 控制工具栏显示：

📂 读取文件

使用 PreviewMermaidPath 组件可以读取指定的 Mermaid 文件内容并展示为图表：

<!-- 基本用法（默认隐藏工具栏） -->
<PreviewMermaidPath path="./other.mmd" />

<!-- 显示工具栏 -->
<PreviewMermaidPath path="./other.mmd" showToolbar />

<!-- 读取当前文件内容 -->
<PreviewMermaidPath showToolbar />

⚙️ 配置

详见 配置指南（含插件选项、代码块 frontmatter、PreviewMermaidPath 组件属性等）。

📄 License

MIT License

🙏 致谢

• mermaid
• VitePress
• markdown-it

---

Made with ❤️ by flingyp