pengzhanbo 385059f214
docs: update en docs (#708)
* docs: update en docs

* chore: tweak

* chore: tweak

* chore: tweak
2025-10-09 15:46:05 +08:00

91 lines
1.7 KiB
Markdown

---
title: markmap
icon: ri:mind-map
createTime: 2025/10/08 14:35:59
permalink: /en/guide/chart/markmap/
---
## Overview
The theme supports embedding [markmap](https://markmap.js.org/) mind maps within articles.
This feature is powered by [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/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
```sh
npm i markmap-lib markmap-toolbar markmap-view
```
:::
Then, enable the feature in the `.vuepress/config.ts` configuration file:
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
markdown: {
markmap: true, // [!code ++]
},
})
})
```
::: note
The following documentation is forked from [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/markmap.html),
licensed under [MIT](https://github.com/vuepress/ecosystem/blob/main/LICENSE).
:::
## Syntax
````md
```markmap
<!-- Place content here -->
```
````
Configuration via Frontmatter syntax is supported.
## Example
::: demo markdown title="markmap"
`````md
````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
````
`````
:::