vitepress-markmap-preview

vitepress-markmap-preview

A VitePress plugin for previewing Markmap mind maps in Markdown.

🚀 Installation

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

⚙️ Configuration

Add the plugin in .vitepress/config.ts:

// .vitepress/config.ts
import { defineConfig } from 'vitepress';
import { vitepressMarkmapPreview } from 'vitepress-markmap-preview';

export default defineConfig({
  markdown: {
    config: (md) => {
      vitepressMarkmapPreview(md);
    },
  },
});

Register the global component in .vitepress/theme/index.ts:

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

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

📖 Usage

📝 Basic Usage

You can directly use markmap code blocks in Markdown to create mind maps:

---
title: markmap
markmap:
  colorFreezeLevel: 2
---

## Links

- [Website](https://markmap.js.org/)
- [GitHub](https://github.com/gera2ld/markmap)

## Features

- **strong** ~~del~~ _italic_ ==highlight==
- `inline code`
- Lists support
- And more...

📂 Load from External File

Use the PreviewMarkmapPath component to load and display mind maps from a specified Markdown file:

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

If you don't want to show the toolbar, simply omit the showToolbar prop.

📄 Load Current File

If the path prop is not specified, the current Markdown file will be used:

<PreviewMarkmapPath />

⚙️ Component Options

PreviewMarkmapPath Props

Prop	Type	Default	Description
path	string	-	Path to the Markdown file to load
showToolbar	boolean	false	Whether to show the toolbar

📄 License

• MIT

🙏 Acknowledgments

• markmap
• VitePress
• markdown-it

---

Made with ❤️ by flingyp