给 vitepress 安装 脑图 vitepress-plugin-mindmap

vitepress-plugin-mindmap

npm

将思维导图无缝集成到你的 VitePress 文档中！这个插件允许你通过简单的 Markdown 语法展示交互式思维导图。

安装

npm install @dhlx/vitepress-plugin-mindmap

使用方式

1. 配置 VitePress

在你的 VitePress 配置文件 (docs/.vitepress/config.js 或 docs/.vitepress/config.ts) 中添加插件：

import { defineConfig } from 'vitepress'
import { withMindMap } from '@dhlx/vitepress-plugin-mindmap'

export default withMindMap(defineConfig({
  title: "VitePress Mindmap",
  description: "思维导图集成示例",
  themeConfig: {
    nav: [
      { text: '首页', link: '/' },
    ],
  }
}))

2. 在 Markdown 中使用

方式一：图片语法（自动转换外部脑图）

# 图片语法示例

![示例脑图](./path/to/your.md){mindmap}

方式二：代码块语法（内联定义脑图）

# 代码块语法示例

```mindmap
## 核心功能
- **思维导图集成**
- 拖拽交互
- 缩放控制
- 主题支持
  - 深色模式
  - 浅色模式

## 安装方式
- `npm install vitepress-plugin-mindmap`
- `yarn add vitepress-plugin-mindmap`
- `pnpm add vitepress-plugin-mindmap`

## 使用场景
1. 技术文档
2. 项目规划
3. 知识整理
4. 会议记录
```