VuePress EcosystemVuePress Ecosystem
  • Theme Guidelines
  • theme-default
  • Hope Theme
  • Plume Theme
  • Reco Theme
  • Feature Plugins
  • Markdown Plugins
  • Search Plugins
  • Blog Plugins
  • PWA Plugins
  • Analytics Plugins
  • SEO Plugins
  • Development Plugins
  • Tool Plugins
  • AI Plugins
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • Theme Guidelines
  • theme-default
  • Hope Theme
  • Plume Theme
  • Reco Theme
  • Feature Plugins
  • Markdown Plugins
  • Search Plugins
  • Blog Plugins
  • PWA Plugins
  • Analytics Plugins
  • SEO Plugins
  • Development Plugins
  • Tool Plugins
  • AI Plugins
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • append-date
  • markdown-chart
    • markdown-chart
    • Chart.js
    • ECharts
    • Flowchart
    • Markmap
    • Mermaid
    • PlantUML
  • markdown-container
  • markdown-ext
  • markdown-image
  • markdown-include
  • markdown-hint
  • markdown-math
  • markdown-preview
  • markdown-stylize
  • markdown-tab
  • links-check
  • prismjs
  • revealjs
    • revealjs
    • Slide Demo
    • Reveal.js Themes
  • shiki

Markmap

Add Markmap support to the Markdown files in your VuePress site.

Installation

Install markmap-lib, markmap-toolbar and markmap-view in your project:

pnpm
pnpm add -D markmap-lib markmap-toolbar markmap-view
yarn
yarn add -D markmap-lib markmap-toolbar markmap-view
npm
npm i -D markmap-lib markmap-toolbar markmap-view

Then enable it via:

.vuepress/config.ts
import { markdownChartPlugin } from '@vuepress/plugin-markdown-chart'

export default {
  plugins: [
    markdownChartPlugin({
      // Enable Markmap
      markmap: true,
    }),
  ],
}

Syntax

```markmap
<!-- contents here -->
```

Configuring through frontmatter syntax is supported.

Demo

::: preview

:::

Edit this page on GitHub
Last Updated: 6/7/25, 8:43 AM
Contributors: Mister-Hope
Prev
Flowchart
Next
Mermaid