思维导图编辑器
这是一个功能完整的思维导图编辑器，类似 ProcessOn，支持创建、编辑、保存和导出思维导图。
使用方法
在 Markdown 文件中直接使用 <MindMapEditor> 组件：
html
<MindMapEditor />功能特性
1. 工具栏功能
- 新建：创建新的思维导图
- 打开：从文件加载思维导图（支持 .jm 和 .json 格式）
- 保存：将思维导图保存为 .jm 文件
- 导出图片：导出为 PNG 图片
- 导出JSON：导出为 JSON 格式
- 放大/缩小：调整视图大小
- 重置视图：恢复默认视图
- 全屏：全屏编辑模式
2. 编辑功能
- 双击节点：编辑节点文本
- 右键菜单：添加子节点、删除节点等
- 键盘快捷键：
Insert：添加子节点Enter：添加兄弟节点F2：编辑节点Delete：删除节点Space：展开/折叠节点- 方向键：移动选中节点
3. 交互操作
- 拖拽：可以拖拽节点调整位置
- 缩放：使用鼠标滚轮或工具栏按钮缩放
- 选择：点击节点进行选择
- 编辑：双击节点或按 F2 编辑文本
使用示例
基础用法
html
<MindMapEditor />在文档中嵌入
你可以在任何 Markdown 文档中使用思维导图编辑器：
markdown
# 我的文档
这里是一些说明文字...
<MindMapEditor />
继续其他内容...文件格式
思维导图使用 JSON 格式保存，文件扩展名为 .jm。文件结构如下：
json
{
"meta": {
"name": "思维导图名称",
"author": "作者",
"version": "1.0"
},
"format": "node_tree",
"data": {
"id": "root",
"topic": "中心主题",
"children": [
{
"id": "node1",
"topic": "分支1",
"children": []
}
]
}
}工作流程
- 创建思维导图：点击"新建"按钮创建空白思维导图
- 编辑内容：双击节点编辑文本，使用工具栏或快捷键添加/删除节点
- 保存文件：点击"保存"按钮将思维导图保存到本地
- 打开文件：点击"打开"按钮加载之前保存的思维导图
- 导出分享：使用"导出图片"或"导出JSON"功能分享思维导图
快捷键说明
| 快捷键 | 功能 |
|---|---|
| Insert | 添加子节点 |
| Enter | 添加兄弟节点 |
| F2 | 编辑节点 |
| Delete | 删除节点 |
| Space | 展开/折叠节点 |
| ←↑→↓ | 移动选中节点 |
注意事项
- 浏览器兼容性：建议使用现代浏览器（Chrome、Firefox、Edge、Safari）
- 文件保存：思维导图数据保存在本地文件，不会自动保存到服务器
- 数据安全：定期保存你的工作，避免数据丢失
- 性能优化：大型思维导图（节点数 > 1000）可能影响性能
技巧提示
- 快速编辑：双击节点可以快速编辑文本
- 批量操作：使用键盘快捷键可以提高编辑效率
- 视图调整：使用缩放功能可以更好地查看大型思维导图
- 全屏模式：全屏模式下可以更专注地编辑思维导图