VitePress Plugin Legend

Github

一个综合性的 VitePress 插件，集成了 Markmap 和 Mermaid 图表预览功能，为 Markdown 文档提供增强的图表支持。

特性

• Markmap 集成: Markdown 思维导图交互式预览
• Mermaid 集成: 交互式图表（流程图、时序图等）
• 可定制: 两个插件都支持灵活的配置选项
• 简单设置: 单个插件安装，统一配置
• 组件支持: 提供 Markmap 和 Mermaid 的 Vue 组件
• TypeScript: 完整的 TypeScript 支持和类型定义

安装

npm install vitepress-plugin-legend # 或 pnpm add vitepress-plugin-legend # 或 yarn add vitepress-plugin-legend 

快速开始

步骤 1：配置 VitePress

在 VitePress 配置中添加插件：

// .vitepress/config.ts import { defineConfig } from 'vitepress'; import { vitepressPluginLegend } from 'vitepress-plugin-legend'; export default defineConfig({ markdown: { config(md) { vitepressPluginLegend(md); }, }, }); 

步骤 2：注册组件

在主题中注册 Vue 组件：

// .vitepress/theme/index.ts import type { Theme } from 'vitepress'; import DefaultTheme from 'vitepress/theme'; import { initComponent } from 'vitepress-plugin-legend/component'; import 'vitepress-plugin-legend/dist/index.css'; export default { extends: DefaultTheme, enhanceApp({ app }) { initComponent(app); }, } satisfies Theme; 

高级配置

// .vitepress/config.ts import { defineConfig } from 'vitepress'; import { vitepressPluginLegend } from 'vitepress-plugin-legend'; export default defineConfig({ markdown: { config(md) { vitepressPluginLegend(md, { markmap: { showToolbar: true, // 其他 markmap 选项 }, mermaid: true, // 或 false 禁用 }); }, }, }); 

单独使用插件

如果你更喜欢单独使用插件：

// .vitepress/config.ts import { defineConfig } from 'vitepress'; import { vitepressMarkmapPreview, vitepressMermaidPreview, } from 'vitepress-plugin-legend'; export default defineConfig({ markdown: { config(md) { vitepressMarkmapPreview(md, { showToolbar: true }); vitepressMermaidPreview(md); }, }, }); 

// .vitepress/theme/index.ts import type { Theme } from 'vitepress'; import DefaultTheme from 'vitepress/theme'; import { initMarkmapComponent, initMermaidComponent, } from 'vitepress-plugin-legend/component'; export default { extends: DefaultTheme, enhanceApp({ app }) { initMarkmapComponent(app); initMermaidComponent(app); }, } satisfies Theme; 

在 Markdown 中使用

Markmap

从 Markdown 列表创建思维导图：

```markmap # 根节点 ## 分支 1 - 项目 1 - 项目 2 ## 分支 2 - 项目 A - 项目 B ``` <PreviewMarkmapPath path="./other.md" showToolbar /> <PreviewMarkmapPath /> 

Mermaid

创建各种图表：

```mermaid graph TD A[开始] --> B{决策} B -->|是| C[动作 1] B -->|否| D[动作 2] ``` <PreviewMermaidPath path="./other.mmd" /> 

配置选项

Markmap 选项

interface VitepressMarkmapPreviewOptions { showToolbar?: boolean; // 其他 markmap 配置选项 } 

插件选项

interface VitepressPluginLegendOptions { markmap?: VitepressMarkmapPreviewOptions | false; mermaid?: boolean; } 

子包

此插件集成了以下包：

包名	说明	版本
vitepress-markmap-preview	Markdown 思维导图预览插件
vitepress-mermaid-preview	Markdown Mermaid 图表预览插件

贡献

欢迎贡献！请随时提交 Pull Request 。

许可证

MIT License

由 flingyp 用 制作