VitePress Plugin Legend
一个综合性的 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 。
许可证
由 flingyp 用 制作
Select Language