企业官网建设流程全解析

MindMup 是一款经典的网页思维导图工具，本文带你完整解析 legacy-mindmup 项目中的导出管道：从浏览器端一键导出 mup、mm、html、png、txt，到服务端转换生成 PNG、PDF、PPTX（PowerPoint）、DOCX（Word）与 Markdown 大纲的完整链路。无论你是想把思维导图存成图片、打印成 PDF，还是转成演讲幻灯片和 Markdown 文档，这份指南都能帮你快速上手。

📌 说明：这是 MindMup v1 的遗留代码库（README.md 显示该版本已于 2017 年 1 月停止维护），但其导出架构设计依然值得学习。

两条导出管道：先搞清楚 MindMup 的导出架构

MindMup 的导出能力分为两条完全不同的管道：

本地导出由 remote-export-widget.js 实现，服务端导出由核心类 LayoutExportController 驱动。两条管道在顶栏菜单中统一入口。

顶栏导出菜单：所有导出操作的入口

在编辑器顶栏点击 "Export To Local Disk"，即可看到全部导出选项，包括 MindMup (.mup)、FreeMind (.mm)、Image (PNG)、PDF、Outline (Word/Markdown/Text)、Storyboard (PDF/PPT/Word) 等，定义在 topbar.erb 中。

• 本地格式：直接触发下载
• 服务端格式（PNG、PDF、Outline、Storyboard）：弹出对应的模态窗口，例如 modal_pdf_export.erb、modal_image_export.erb、modal_outline_export.erb、modal_presentation_export.erb

各格式到导出函数的注册映射在 main.js 中完成，是整个导出系统的"总调度台"。

浏览器本地导出：mup、mm、html、png、txt 一步到位

本地导出无需上传任何数据到服务器，适合离线备份与格式互换：

• mup（MindMup 格式）：地图内容序列化为带缩进的 JSON，可再次导入
• mm（FreeMind 格式）：通过MM.freemindExport导出为 FreeMind XML，方便迁移
• html：MM.exportToHtmlDocument生成带嵌套列表样式的完整 HTML 文档
• png：由地图渲染库 mapjs 的MAPJS.pngExport在浏览器内直接绘制位图
• txt：TabSeparatedTextExporter 按节点层级输出 Tab 缩进纯文本，换行符会被替换为空格，可直接粘贴进表格软件

一个巧妙的设计是自动降级：如果浏览器不支持本地下载（如部分移动端浏览器），widget 会自动切换到"远端回显"模式——把文件上传到临时存储并返回下载链接，同时提示用户更换浏览器或升级 Gold 授权来提升上传限制（见 remote-export-widget.js）。

服务端导出管道：请求令牌、上传、轮询三步走

PNG、PDF、PPTX、DOCX、Markdown 的转换都在服务器端完成，LayoutExportController 用三步工作流协调了整个流程：

第 1 步：请求上传令牌。客户端通过 Gold API 为指定格式申请导出配置，服务器返回 S3 上传凭证、结果文件签名 URL 和错误文件签名 URL。

第 2 步：上传源内容。不同类型的格式需要不同的"原料"：

• PNG / PDF：上传布局文件（layout）——即浏览器中已排好位置的节点坐标，由 buildMapLayoutExporter 生成，并会把节点图标 URL 翻译成可访问的资源地址
• 大纲（docx/md/txt）与幻灯片：上传地图内容或场景数据，由 buildMapContentExporter 和 buildStoryboardExporter 生成

第 3 步：轮询结果与错误。上传完成后，客户端每 2.5 秒轮询一次结果 URL，每 15 秒轮询一次错误 URL；结果文件出现即下载成功，错误文件出现或超时则终止。整个流程在界面中显示 "Setting up the export → Uploading → Processing your export" 的进度提示。

导出成功后会额外做"结果装饰"：layout-export.js 中的装饰器会自动生成 Twitter、Facebook、Email、Gmail 等分享链接，以及嵌入用的 iframe 代码，让导出成果一键分享。

PDF 导出参数详解：页面大小、方向与文字排布

打开 PDF 导出窗口（modal_pdf_export.erb）后，可配置三项参数：

• Orientation（页面方向）：landscape 横向 / portrait 纵向
• Page Size（页面大小）：支持 A0–A5，以及 US Letter、US Legal、US Tabloid，默认 A4
• Text direction（文字排布）：ltr 从左到右 / rtl 从右到左，适合阿拉伯语、希伯来语地图

生成的 PDF 是矢量文件，放大不模糊，适合打印和会议展示。导出完成后会得到一个24 小时有效的下载链接。

PPTX、DOCX 幻灯片导出：把思维导图变成演讲

选择 Storyboard 导出（modal_presentation_export.erb）时，可切换三种幻灯片格式：

幻灯片的每一页对应地图中的一个"场景"，buildStoryboardExporter 会为每个场景计算 800×600 画布下的尺寸信息后一并上传。注意：场景为空时会提示 "There are no slides in this storyboard"，需要先添加幻灯片再导出。

导出完成后窗口还提供三个后续操作：直接下载、保存到 Google Drive、邮件/Gmail 分享链接，其中 Drive 保存流程由sendToGoogleDriveWidget接管（main.js）。

Markdown 大纲导出：思维导图秒变文档骨架

Outline 导出是内容创作者的隐藏利器，在 modal_outline_export.erb 中支持两个关键设置：

• 格式：outline.docx（MS Word/Google Writer）、outline.md（Markdown）、outline.txt（Tab 缩进文本）
• 标题层级（maxheading）：从 0（纯项目符号）到 5 级标题，例如选 "2 heading levels + bullet points" 表示前两层节点渲染为 Markdown 标题（#、##），其余为列表项

这意味着你可以把一张脑图快速变成一篇结构清晰的 Markdown 文章骨架，再粘贴进任意支持 Markdown 的写作工具中续写。

常见错误与排查技巧

服务端导出失败时，窗口会显示对应的错误区块（各 modal 模板中的error部分），常见错误及对策如下：

完整的轮询、超时、失败分支逻辑可在测试用例 layout-export-spec.js 中对照阅读，是理解整条管道的最好"活文档"。

iOS 端的导出适配

iOS 应用内的导出采用事件驱动方式：原生端发出exportRequest事件，ios-modal-export-widget.js 按data-mm-format匹配对应模态窗口动态挂载并展示（iOS 不支持 DOM 中预置的 Bootstrap 弹窗），服务端转换流程与 Web 端完全一致。

总结

MindMup 的导出系统设计可以概括为"本地直出 + 服务端转换"双管道：轻量格式在浏览器内瞬间完成，重型格式（PDF、PPTX、DOCX、Markdown 大纲）通过"令牌 → 上传 → 轮询"三步管道在服务端生成，并自动附带分享装饰链接。无论是把脑图打印成 A4 PDF、转成 PPTX 开演讲，还是一键生成 Markdown 文档骨架，整个流程都只需在顶栏菜单中选择格式、设置参数、点击 Export 即可。核心实现集中在 public/lib/layout-export.js、public/lib/tabular-export.js 与 public/main.js 中，值得做类似功能的项目参考借鉴。