不想为 Xmind 导出 Markdown 付费？我用 AI 花 2 小时撸了个免费工具

本文介绍了一个开源免费的Xmind转Markdown工具，解决了Xmind导出功能的三大痛点：会员限制、图片导出体验差和资源丢失问题。该工具采用React+Vite技术栈，支持一键转换、可视化预览和三种导出方式（复制Markdown、下载ZIP包、导出高清PNG）。作者详细分享了实现过程中的技术亮点和遇到的坑，包括解析Xmind文件、两种Markdown导出模式设计以及高清PNG导出方案。该项目通

qq_38605449

735人浏览 · 2026-01-28 09:09:04

qq_38605449 · 2026-01-28 09:09:04 发布

最近在分享Rust实战课程，我在整理之前学习基础知识大纲时遇到了一个让人抓狂的问题：Xmind 导出 Markdown 竟然要会员！而且导出图片还得手动展开每个节点… 于是我决定自己动手，用 AI 辅助开发了这个完全免费的 Xmind 转 Markdown 工具。

痛点：Xmind 导出功能的限制

作为画图小能手来说，我经常用 Xmind 整理知识体系和记录看书的知识图谱。但在分享时遇到了几个问题：

导出 Markdown 需要会员 💰 - 这个功能居然要付费
导出图片体验差 📸 - 必须手动展开所有节点才能完整导出
图片资源丢失 🖼️ - 导出的 Markdown 中图片引用是占位符，需要手动补充

这些限制让我在准备 Rust 实战课程时非常不便。既然如此，不如自己动手做一个！

解决方案：开源免费的 Xmind 转换工具

核心功能

✅ 完全免费 - 无需会员，本地运行 ✅ 一键转换 - 拖拽上传 .xmind 文件即可 ✅ 可视化预览 - 水平思维导图布局，自动绘制连接线 ✅ 智能导出 - 支持三种导出方式：

📋 复制 Markdown（图片内嵌 Data URL）
📦 下载 ZIP（Markdown + 独立图片文件夹）
🖼️ 导出高清 PNG（4倍分辨率，文字清晰）

技术栈

{
  "前端框架": "React + Vite",
  "样式": "Tailwind CSS",
  "核心库": [
    "jszip - 解析 .xmind 文件",
    "html-to-image - PNG 导出",
    "lucide-react - 图标"
  ]
}

实现亮点

1. 解析 Xmind 文件

Xmind 文件本质是一个 ZIP 压缩包，包含 content.json 和图片资源：

export const parseXmindFile = async (file) => {
  const zip = await JSZip.loadAsync(file);
  const contentFile = zip.file('content.json');
  const content = JSON.parse(await contentFile.async('text'));
  
  // 递归提取节点、图片、笔记
  return await extractNodes(content, zip);
};

关键点：

将图片转换为 Base64 Data URL，方便内存存储
递归遍历节点树，提取标题、笔记、图片

2. 两种 Markdown 导出模式

模式一：内嵌图片（Copy MD）

# Rust 所有权系统
![所有权规则](data:image/png;base64,iVBORw0KGgo...)
> 每个值都有一个所有者

优点：一键复制，粘贴即用 适用场景：快速分享到支持 Data URL 的编辑器（VS Code、Typora）

模式二：独立图片（Download ZIP）

# Rust 所有权系统
![所有权规则](images/node_123.png)
> 每个值都有一个所有者

优点：文件小，通用性强 适用场景：传统 Markdown 编辑器，博客发布

3. 高清 PNG 导出

这是最有技术含量的部分！如何导出高清晰度的思维导图？

const handleDownloadImage = async () => {
  // 1. 应用 2倍缩放变换
  treeRef.current.style.transform = 'scale(2)';
  
  // 2. 临时放大图片尺寸限制
  images.forEach(img => {
    img.style.maxWidth = '400px';
    img.style.maxHeight = '400px';
  });
  
  // 3. 使用 2倍像素比率捕获
  const dataUrl = await toPng(treeRef.current, {
    pixelRatio: 2  // 2x scale * 2x pixelRatio = 4x 分辨率！
  });
};

效果：导出的 PNG 放大后文字依然清晰，图片不模糊！

开发过程中的坑

坑 1：图片导出只有背景，没有内容

原因：克隆 DOM 元素会丢失 Tailwind CSS 的计算样式

解决：直接捕获原始元素，临时应用导出样式后恢复

// ❌ 错误做法：克隆元素
const clone = element.cloneNode(true);
await toPng(clone); // 样式丢失！
// ✅ 正确做法：直接捕获原始元素
const originalStyle = element.style.padding;
element.style.padding = '40px';
await toPng(element);
element.style.padding = originalStyle; // 恢复

坑 2：导出图片文字模糊

原因：单纯提高 pixelRatio 不够，原始字体太小

解决：使用 CSS transform: scale(2) 放大整个元素，再用高像素比率捕获

坑 3：图片清晰了，文字又看不见了

原因：移除图片尺寸限制后，图片过大挤压文字

解决：平衡策略 - 将图片限制从 200px 提升到 400px，既保证清晰度又不破坏布局

使用体验

体验地址，项目截图

https://xmind-to-md.dcrmb.com/
在这里插入图片描述

操作流程

启动应用

git clone <repo>
cd xmind-to-md
npm install
npm run dev

上传文件
- 拖拽 .xmind 文件到上传区域
- 或点击选择文件
查看预览
- 左侧：可视化思维导图
- 右侧：Markdown 源码
导出
- 点击 “Copy MD” - 复制带图片的 Markdown
- 点击 “Download .md” - 下载 ZIP 包
- 点击 “Export PNG” - 导出高清图片