VitePress Plugin Legend 是一款强大的 VitePress 插件，它无缝集成了 Markmap 和 Mermaid 图表功能，极大地增强了 Markdown 文档的可视化能力。该插件支持交互式思维导图预览和多种类型的图表（如流程图、时序图等）的动态渲染。通过简单的配置，开发者可以为 VitePress 项目添加丰富的图表支持，并提供灵活的定制选项，包括是否显示 Markmap 工具栏等。此外，它还提供了 Vue 组件，方便在 Markdown 中直接嵌入和预览图表，让内容呈现更具吸引力和条理性。

🗺️ **Markmap 思维导图集成**：该插件能够将 Markdown 列表转换为交互式的思维导图，并提供预览功能。开发者可以通过特定的 Markdown 语法或 Vue 组件 `` 来嵌入和展示思维导图，同时支持配置 `showToolbar` 等选项，增强用户交互体验。

🏞️ **Mermaid 图表支持**：插件集成了 Mermaid，允许用户在 Markdown 中直接编写和渲染各种图表，包括流程图、时序图等。通过 `mermaid` 配置项或 `` 组件，可以轻松地将文本描述的图表转化为可视化的图形，丰富文档内容。

🔧 **统一且灵活的配置**：该插件提供了一个集中的配置入口 `vitepressPluginLegend`，允许用户一次性启用 Markmap 和 Mermaid 功能，并支持为每个子插件进行独立的配置。例如，可以单独启用或禁用 Mermaid，或调整 Markmap 的特定选项，满足不同项目的需求。

🚀 **简便的安装与使用**：插件支持 npm、pnpm 和 yarn 等多种包管理器安装，安装后只需在 VitePress 的 `config.ts` 和 `theme/index.ts` 中进行简单的配置和组件注册，即可快速为项目添加图表功能，大大降低了集成成本。

📦 **子包独立化与组件化**：插件内部包含 `vitepress-markmap-preview` 和 `vitepress-mermaid-preview` 两个子包，允许用户根据需要单独引入和使用。同时，提供了 `initComponent`、`initMarkmapComponent` 和 `initMermaidComponent` 等 Vue 组件初始化函数，方便在 Markdown 中便捷地使用图表功能。

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.tsimport { defineConfig } from 'vitepress';import { vitepressPluginLegend } from 'vitepress-plugin-legend';export default defineConfig({  markdown: {    config(md) {      vitepressPluginLegend(md);    },  },});

步骤 2：注册组件

在主题中注册 Vue 组件：

// .vitepress/theme/index.tsimport 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.tsimport { 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.tsimport { 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.tsimport 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

创建各种图表：

```mermaidgraph 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 用 ❤️ 制作