在浏览器中解析和渲染 XMind 文件

思维导图软件可以帮助我们完成非常多的事情，包括不限于项目任务管理、知识管理、计划管理、思路脑爆和整理、结构架构梳理、快速演示等等。国产老牌思维导图软件 XMind 和 2017 年的新秀 MindMaster 基本上是这个领域普及程度市场占有率最高的软件，所以这算是难得的国产软件领先的领域。

但除了幕布、ProcessOn、钉钉脑图之类的新型思维导图服务以外，传统的思维导图软件是桌面软件，有非常多的存量文件，必须要先下载安装对应软件才能打开，这对于很多用户而言是有负担的。在线的、免安装打开思维导图软件是一个现实的、还在增长的需求。

本文以 XMind 文件为例，讲解如何在 Web 前端解析和渲染思维导图文件。

要在 Web 前端合理合法地打开一个 XMind 文件，首选的方案是自行解析其文件格式，并且自行布局渲染。具体来说每个步骤可以这么去拆解：

XMind 的文件格式遵循 OpenDocument Format（ODF）规范，是一种基于 XML 并使用 ZIP 压缩的文件格式。

这个说法准确地说适用于 XMind 8 update3 之前的版本，在这次升级之后，.xmind 文件依然是一个 ZIP 压缩包，但内容由 content.xml 变成了 content.json，个人猜测有两个原因，第一个是 JSON 格式已经可以获得事实上的最好性能和最佳平台兼容性；第二个是从 2017 年开始，XMind 的团队转投 JavaScript 阵营，核心的思维导图渲染引擎（Snowbrush）完全由 JavaScript 开发

新版 JSON 格式无需多言，从压缩包里拿到 content.json 的文件内容之后，直接 JSON.parse 即可。难点在于老版本的、严格遵循 ODF 规范的 XMind 文档。按照 ODF 的定义，我们解压文件可以得到以下产出：

这是非常规范的 ODF 格式，包含有附件、缩略图的定义，并且文件的内容、元信息和样式分别在不同的 XML 文件中定义。不过在实际操作中，脑图并不像 Excel、PPT 那样，需要去扩展强大的宏定义、脚本和排版系统等能力，慢慢地 XMind 发展产品功能的过程中，绝大部分和样式相关的定义都耦合到了 content.xml 文件中，meta.xml 更是名存实亡。最后新版本中只保留了 content.js 也就不足为奇了。需要解析出最核心的节点树信息，我们去解析 content.xml 就已经满足需求。

XML 的解析在 Node.js 端和浏览器端分别有成熟的方案。浏览器中就是成熟的DOMParser和XMLSerializerAPI，Node.js 里是使用三方包xmldom实现的等同的 API 能力（完整支持 DOM level2 规范，并且支持部分 DOM level3 规范）。因此解析和生成 XMind 文件可以实现跨平台的统一接口。

这两个项目，xml-lite实现了一套浏览器和 Node.js 端通用的 XML 文件格式处理库：

xml-lite 的能力基本上是以上 XML 格式解析、序列化的能力加上可以很方便地维护 XML DOM 内容的各种 API，譬如遍历、CRUD、格式化等等

而xmind-sdk-javascript则是基于xml-lite的 XML DOM 操作能力高效地维护 XMind 文件，并且抽象出 Workbook、Sheet、Topic、Relationship 等思维导图相关的基础实体，为 XMind 文件提供好用的 CRUD 接口。这个库在 XMind 公司更新了 .xmind 文件格式，并且正式接手这个 npm 包之前，一直就是 npm 包 xmind 背后持续更新发布的库，“民间的官方库”。

思维导图布局是非常典型的二维平面直角坐标系下树的布局。前面我们分享过，确保树结构在 x、y 两个维度同时紧凑的布局，自从 2014 的一篇论文问世后，其复杂度已经降低到 O(n) 线性时间复杂度，而思维导图的布局甚至不需要确保 y 维度的紧凑、x 维度的分层，因此我们可以轻而易举实现比 XMind 官方更好的布局性能。伪代码如下：

完成上一步之后，就剩最后一个动作，就是在浏览器中把带包围盒信息（尺寸）、带坐标的节点绘制出来，并继续绘制连线。最后这一步反而是最简单的，使用 SVG 来完成就可以了。创建一个 SVG Doc 节点，插入两个图层（g），分别存储节点和边。从根节点（RootTopic）开始遍历 Workbook 当前 Sheet 的内容，把每个 Topic 绘制出来，并设置其坐标为布局后坐标，插入节点图层。然后再一次遍历，把节点和子节点之间连上连线，插入边图层。最后再一次遍历 Relationships 数组，把非树结构关联的节点之间的关系画出来，插入边图层。节点简单点用矩形 Rect 来绘制；边和关系都是 Path，锚点和关键点的信息参考 XMind 软件即可。

最后基本上就可以造出这样的轮子了：

补上交互，基本可以再造一个简易版本的 ZMind 出来。不过目前为止的工作，最大的槽点就是“我想要打开 XMind，最后你打开长得不像 XMind”。这是选择“合理合法”路径最大的问题。如果不满足于此，可以尝试以下邪门歪道方案 2 和方案 3。

这个方案是国内某在线文档产品采取的方案。事实上是违法的。原理异常简单，并且具备非常强的成本优势和通用性（违法成本较低）。

MacOS 有一套脚本语言 AppleScript，它可以操作 GUI 软件。遵从 MacOS 软件设计规范、有相对完善的应用 Menu 的软件都可以复用这个方法。使用 AppleScript，把文件放到指定路径（也可以运行时输入），就可以用脚本唤起 XMind.app，然后把 .xmind 文件导出为 pdf（或者 svg）了：

一台 Mac Mini，一根网线，结合 AppleScript + Node.js 接口，你就拥有了非常多只有 GUI 软件界面操作才能完成的在线功能服务。以 XMind 文件转换导出为例，Node.js 接口只需要接受 upload 文件，把文件转存到某个特定文件夹，然后使用类似shelljs之类的库，从命令行执行 AppleScript 的转换脚本即可获得高还原、高清版本的 pdf 或者 svg 文件，就可以直接在浏览器端展示了。

至于要不要把转换任务接入 MQ 之类的，要不要把转换后的文件存入 CDN，这些都是毫不起眼的细节，不值一提。用这个方法，全文档预览支持不在话下，成本比租用云服务器、购买 Office365 Web API 服务诸如此类，低了不止一个档次。就是不宜扩散不宜推广不宜高调。

方案 2 虽然很刑，但对于个人服务而言，实在太香了。有法外狂徒某在线文档产品在前面顶着，我们大可以各种姿势个人项目里尽情探索这个方案的可能性。

最后这个方法更隐秘，但难度更高，风险相当大，并且不具备通用性。

XMind 从 2017 年起倾力打造的新一代 XMind 渲染引擎，库名称叫 Snowbrush。这个库相比原来 Native 桌面应用的版本有一些槽点，譬如性能有所下降，譬如 JavaScript 源码有一股 Java 社区的味道（有可能主导开发引擎的技术团队是 Java 出身，换技术栈没换人）等等，但不可否认，这是官方唯一未来持续支持的渲染引擎，XMind 文件长什么样是由这个引擎决定的，并且一直在成长发展中，交互视觉体验各方面也都领先于同行。

这个团队做云服务比较晚，原本想像幕布一样，把思维导图做成云存储的、跨端的，可惜 beta 阶段有一些问题和客诉，最终暂停（最近他们注册了 xmind.ai 站点开始做在线版 XMind 了，恭喜 XMind 团队）。而之前他们在线分享脑图模板的服务 xmind.net 有个无伤大雅的问题，把 Snowbrush 的源码通过 sourcemap 文件暴露了。拿到这份破解版的源码（或者就混淆后的文件），开发者就可以几乎 100% 还原 XMind.app 的体验。

方案 3 除技术研究以外，任何用途均不推荐。