vuepress-theme-plume/en/guide/chart/markmap/index.md

url

url
/en/guide/chart/markmap/index.md

Overview

The theme supports embedding markmap mind maps within articles.

This feature is powered by @vuepress/plugin-markdown-chart.

Configuration

This feature is disabled by default in the theme.

You need to install markmap-lib, markmap-toolbar and markmap-view in your project:

::: npm-to

npm i markmap-lib markmap-toolbar markmap-view

:::

Then, enable the feature in the .vuepress/config.ts configuration file:

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      markmap: true, // [!code ++]
    },
  })
})

::: note The following documentation is forked from @vuepress/plugin-markdown-chart, licensed under MIT. :::

Syntax

```markmap
<!-- Place content here -->
```

Configuration via Frontmatter syntax is supported.

Example

::: demo markdown title="markmap"

````markmap
---
markmap:
  colorFreezeLevel: 2
---

# markmap

## Links

- <https://markmap.js.org/>
- [GitHub](https://github.com/markmap/markmap)

## Features

- Links
- **Strong** ~~Strikethrough~~ *Italic* ==Highlight==
- Multi-line
  text
- `Inline code`
-
    ```js
    console.log('code block');
    ```
- Katex
  - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
- Now we can wrap very very very very very very very very very very long text automatically with `maxWidth` option
````

:::