VitePress Plugin Legend

A comprehensive VitePress plugin that integrates Markmap and Mermaid chart preview functionality, providing enhanced chart support for Markdown documents.

✨ Features

• 🗺️ Markmap Integration: Interactive preview of Markdown mind maps
• 🏞️ Mermaid Integration: Interactive charts (flowcharts, sequence diagrams, etc.)
• 🎨 Customizable: Both plugins support flexible configuration options
• 🔧 Simple Setup: Single plugin installation with unified configuration
• 📁 Component Support: Provides Vue components for both Markmap and Mermaid
• 🚀 TypeScript: Full TypeScript support and type definitions

📦 Installation

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

🚀 Quick Start

Step 1: Configure VitePress

Add the plugin to your VitePress configuration:

// .vitepress/config.ts
import { defineConfig } from 'vitepress';
import { vitepressPluginLegend } from 'vitepress-plugin-legend';

export default defineConfig({
  markdown: {
    config(md) {
      vitepressPluginLegend(md);
    },
  },
});

Step 2: Register Components

Register Vue components in your theme:

// .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;

Advanced Configuration

// .vitepress/config.ts
import { defineConfig } from 'vitepress';
import { vitepressPluginLegend } from 'vitepress-plugin-legend';

export default defineConfig({
  markdown: {
    config(md) {
      vitepressPluginLegend(md, {
        markmap: {
          showToolbar: true,
          // other markmap options
        },
        mermaid: true, // or false to disable
      });
    },
  },
});

Using Plugins Separately

If you prefer to use plugins separately:

// .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;

📖 Usage in Markdown

Markmap

Create mind maps from Markdown lists:

```markmap
# Root Node
## Branch 1
- Item 1
- Item 2
## Branch 2
- Item A
- Item B
```

<PreviewMarkmapPath path="./other.md" showToolbar />
<PreviewMarkmapPath />

Mermaid

Create various types of charts:

```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
```

<PreviewMermaidPath path="./other.mmd" />

⚙️ Configuration Options

Markmap Options

interface VitepressMarkmapPreviewOptions {
  showToolbar?: boolean;
  // other markmap configuration options
}

Plugin Options

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

📦 Sub-packages

This plugin integrates the following packages:

Package Name	Description	Version
vitepress-markmap-preview	Markdown mind map preview plugin
vitepress-mermaid-preview	Markdown Mermaid chart preview plugin

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License

---

Made with ❤️ by flingyp