思维导图示例

基础用法

在 Markdown 中使用 <MindMap> 组件来显示思维导图。

由于 Markdown 解析限制，多行内容需要使用 HTML 实体编码的换行符 
：

<MindMap content="# 根节点&#10;&#10;## 分支1&#10;- 子节点1&#10;- 子节点2&#10;  - 子子节点1&#10;  - 子子节点2&#10;&#10;## 分支2&#10;- 子节点3&#10;- 子节点4" />

可编辑模式

使用 editable 属性启用编辑功能：

<MindMap content="# 我的思维导图&#10;&#10;## 主题1&#10;- 要点1&#10;- 要点2&#10;&#10;## 主题2&#10;- 要点3" editable />

自定义高度

使用 height 属性设置思维导图的高度：

<MindMap content="# 技术栈&#10;&#10;## 前端&#10;- Vue.js&#10;- React&#10;- Angular&#10;&#10;## 后端&#10;- Node.js&#10;- Java&#10;- Python&#10;&#10;## 数据库&#10;- MySQL&#10;- MongoDB&#10;- Redis" height="600px" />

Markdown 语法说明

思维导图使用 Markdown 格式：

• # 表示根节点
• ## 表示一级分支
• ### 表示二级分支
• - 或 * 表示列表项（子节点）
• 缩进表示层级关系

示例结构

# 根节点

## 一级分支1
- 子节点1
- 子节点2
  - 子子节点1
  - 子子节点2

## 一级分支2
- 子节点3
- 子节点4

功能特性

• ✅ 支持查看模式（默认）
• ✅ 支持编辑模式（editable 属性）
• ✅ 支持导出 SVG 图片
• ✅ 支持导出 Markdown 文件
• ✅ 支持自定义高度
• ✅ 响应式设计，适配移动端
• ✅ 支持深色模式

使用技巧

1. 编辑模式：点击"编辑"按钮可以修改思维导图内容
2. 导出功能：在查看模式下可以导出 SVG 或 Markdown
3. 交互操作：可以拖拽、缩放思维导图
4. 节点点击：点击节点可以展开/折叠子节点

快速生成工具

为了方便使用，你可以使用在线工具将多行 Markdown 转换为单行格式：

1. 编写你的思维导图 Markdown 内容
2. 将换行符替换为 

3. 粘贴到 <MindMap> 组件的 content 属性中