思维导图在线
基于 mind-elixir 的可视化思维导图编辑器，支持拖拽编辑、导出 PNG 和 JSON
关于思维导图在线
- 基于 mind-elixir 的可视化思维导图编辑器，适用于知识整理、技术选型、项目规划、头脑风暴等场景
- 支持无限层级节点，可自由拖拽调整节点位置和层级关系
- 导出的 JSON 文件可在下次导入继续编辑，PNG 图片可直接用于文档和分享
操作说明
- 双击节点可编辑节点文字；单击节点选中后可进行子节点/同级节点/删除操作
- 快捷键：Tab 添加子节点，Enter 添加同级节点，Delete 删除节点，F2 编辑节点
- 点击「示例」按钮加载内置场景示例；点击「导出图片」下载 PNG；点击「导出 JSON」保存设计稿（可重新导入）；点击「导出 MD」导出 Markdown 大纲（可导入 Notion / Obsidian 等工具）
- 鼠标滚轮缩放画布，拖拽空白区域平移视图；点击 按钮居中所有节点
注意事项
- 当前编辑内容自动保存到浏览器 localStorage，刷新页面不会丢失；清除浏览器数据会导致内容丢失，建议定期导出 JSON 备份
- 导出 PNG 时画布内容越多，生成时间越长，请耐心等待
- 所有处理均在浏览器本地完成，不会上传任何数据
思维导图知识详解
思维导图的核心价值
| 应用场景 | 说明 | 典型示例 |
|---|---|---|
| 知识整理 | 将碎片化知识结构化，建立知识体系 | 技术栈学习路线图 |
| 项目规划 | 分解项目目标为可执行的任务节点 | 迭代计划 / WBS 分解 |
| 技术选型 | 对比多个方案的优缺点，辅助决策 | 前端框架对比 |
| 头脑风暴 | 快速记录发散思维，不受格式约束 | 产品功能头脑风暴 |
| 会议记录 | 实时记录讨论要点，形成结构化输出 | 技术评审会议纪要 |
mind-elixir 与主流工具对比
| 工具 | 优势 | 劣势 | 适用场景 |
|---|---|---|---|
| mind-elixir（本工具） | 开源免费、纯前端、无需注册 | 功能相对基础 | 快速绘图、开发者使用 |
| XMind | 功能丰富、模板多、导出格式全 | 高级功能需付费 | 专业思维导图制作 |
| MindNode | 界面美观、macOS/iOS 原生体验 | 仅限 Apple 生态 | 苹果用户日常使用 |
| draw.io | 图形类型丰富、支持多种图表 | 思维导图体验不专注 | 综合绘图需求 |
JSON 数据格式说明
mind-elixir 导出的 JSON 结构如下，可用于程序化生成或修改思维导图：
{
"nodeData": {
"id": "root",
"topic": "根节点标题",
"children": [
{
"id": "node-1",
"topic": "子节点文字",
"direction": 0, // 0=右侧, 1=左侧
"children": []
}
]
}
}
快捷键速查
| 快捷键 | 功能 |
|---|---|
| Tab | 为选中节点添加子节点 |
| Enter | 为选中节点添加同级节点 |
| Delete / Backspace | 删除选中节点（根节点不可删除） |
| F2 | 编辑选中节点文字 |
| Ctrl+Z | 撤销上一步操作 |
| 鼠标滚轮 | 缩放画布 |
| 拖拽空白区域 | 平移画布 |
场景示例 — 点击「填入」自动加载示例导图
技术选型导图
前端框架对比：React / Vue / Angular 的核心特性与适用场景
项目规划导图
软件项目阶段分解：需求 / 设计 / 开发 / 测试 / 上线各阶段任务
组织架构图
技术部门结构：前端 / 后端 / 运维 / 测试各组人员分布（切换「向右」布局效果更佳）
学习路线图
全栈开发学习路径：基础 → 前端 → 后端 → 部署运维
问题分析导图
线上故障分析：现象 → 原因排查 → 解决方案 → 预防措施