AI + 思维导图：我做了一个开源免费的本地思维导图工具，一条命令出图

用户84670636159
17 阅读4分钟

为什么做这个

市面上思维导图工具很多，但都有各自的痛点：

  • XMind 好看但付费，协作还要额外买
  • ProcessOn 在线好用但免费版只能存 9 张图
  • 幕布 大纲笔记转导图很爽，但样式单一
  • 各种在线工具 数据放别人服务器上，敏感内容不敢放

更大的问题是：这些工具跟 AI 之间有一道鸿沟。我让 Claude 帮我整理知识，Claude 输出了完美的结构化大纲，但我还得手动把它拖进思维导图工具里，一个一个节点地画。AI 干完了 90% 的脑力活，剩下 10% 的体力活反而最磨人。

所以我做了这个项目——一个跟 AI 无缝衔接的本地思维导图工具。

项目亮点

一句话出图

不需要手动拖拽节点。直接对 Claude 说：

帮我把 Python 学习路线整理成思维导图

Claude 生成 JSON → 一行命令打开：

./mindmap python-learning.json

浏览器自动打开，导图已经画好了。从想法到导图，30 秒。

智能导入：7 种格式自动识别

AI 输出的 JSON 格式千奇百怪。有时包一层 meta 和 nodes，有时用 name 而不是 topic，有时嵌套在 root 或 data 下面。

我的导入逻辑会自动识别并转换这些格式：

function tryExtract(obj) {
  if (obj.nodeData) return obj.nodeData;           // { nodeData: {...} }
  if (obj.topic || obj.name || obj.title)          // 裸节点树
    return normalizeNode(obj);
  if (obj.nodes?.length > 0)                       // { nodes: [...] }
    return normalizeNode(obj.nodes[0]);
  if (obj.root) return normalizeNode(obj.root);    // { root: {...} }
  if (obj.data) return tryExtract(obj.data);       // { data: {...} } 递归
  // mindmap / mindMap / map 包装... 等等
}

你不用关心 AI 输出什么格式，丢进去就行。

数据完全私有

所有数据存在浏览器的 localStorage 里，不联网上传。你的知识、笔记、规划，永远在你的电脑上。

零安装

整个项目核心就是一个 index.html 文件（约 900 行），内嵌 CSS 和 JS，双击就能用。没有 npm install，没有 webpack，没有注册流程。

技术架构

一个 index.html
├── CSS（内嵌）
│   ├── 浅色/深色主题变量
│   └── 响应式布局
├── HTML（内嵌）
│   ├── 工具栏（保存/导出/导入/主题/语言）
│   ├── 左侧导图列表
│   └── 导图画布
└── JavaScript（内嵌，IIFE 模块模式）
    ├── Mind Elixir v5 渲染引擎（CDN）
    ├── html2canvas PNG 导出（CDN）
    ├── 多导图管理 + localStorage 持久化
    ├── 7 种格式智能导入解析
    ├── 中英文 i18n 系统
    └── 500ms 防抖自动保存

没有后端，没有数据库，没有构建工具。存储键值对：

Key内容
mindmap_app应用状态（导图列表、当前ID、主题、语言）
mindmap_data_<id>每张导图的节点数据

CLI 工具

除了网页版，还附带了一个命令行工具：

./mindmap your-mindmap.json

背后做了什么：

  1. 把 JSON 文件复制为 auto-load.json
  2. 启动 Python HTTP 服务器
  3. 浏览器打开 localhost:8765
  4. 页面启动时自动 fetch('./auto-load.json') 并导入

关闭浏览器后服务器继续在后台运行，Ctrl+C 停止。

中英文双语

首次加载自动检测浏览器语言，也支持手动切换。实现方式很简单——所有文案抽到一个字典里：

const I18N = {
  zh: { save: '保存', exportPng: '导出图片', ... },
  en: { save: 'Save', exportPng: 'Export PNG', ... },
};

function t(key) {
  return I18N[LANG][key] || I18N.en[key] || key;
}

HTML 用 data-i18n 属性标记需要翻译的元素，applyI18n() 一次性替换。

完整功能

  • 创建/切换/删除/重命名导图
  • 节点编辑（Tab 加子节点、Enter 加兄弟、Space 编辑、Delete 删除）
  • 节点折叠/展开（Mind Elixir 自带，点击节点旁圆形按钮）
  • 画布拖拽平移 + 滚轮缩放
  • 撤销/重做（Ctrl+Z / Ctrl+Y）
  • 手动保存（Ctrl+S）+ 自动保存（500ms 防抖）
  • JSON 导入/导出
  • PNG 图片导出
  • 深色/浅色主题
  • 键盘快捷键面板

安装与使用

git clone https://github.com/ShuaiXianghui/mindmap.git
cd mindmap
open index.html

或者直接把 index.html 发给朋友，双击即用。

CLI 模式需要 Python 3（macOS 自带）：

./mindmap your-file.json

添加到 PATH 方便全局调用：

export PATH="$PATH:/path/to/mindmap"

写在最后

这个项目不大，前后也就写了不到一千行代码。但它解决了一个真实痛点：AI 产出结构化内容的能力，和思维导图工具之间，少了一个连接器。

如果你经常用 AI 整理知识、做学习规划、梳理工作思路，希望这个工具能帮到你。

项目 MIT 开源，任何建议和 PR 都欢迎。

GitHub：github.com/ShuaiXiangh…

如果觉得有用，给个 Star ⭐

avatar
文章
阅读
粉丝