2026年6月19日 · 指南页面 | 📝编辑于2026年6月26日

XMind 思维导图嵌入指南
纯前端查看与定制

将 XMind 文件轻松嵌入任何网站，支持暗色、布局、样式配置。

XMind Viewer 是什么？

XMind Viewer 是一个基于纯前端技术的 XMind 思维导图文件查看与导出工具，支持 XMind 8（XML）和 XMind 2020+（JSON）格式。它采用 SVG 矢量渲染，提供无损缩放、多布局、节点拖拽、暗色模式等丰富交互，并能以 单 HTML 文件 的形式嵌入到任何网站中。

本项目提供两个版本：完整版（带 GUI 界面，适合本地使用）和 嵌入版（适合作为 iframe 或组件嵌入网页）。本指南将重点介绍嵌入版的使用方法。

功能特性

多种布局模式：上下排列、左右单边、左右双边、圆环（含力导向引力布局）
节点折叠 / 展开：支持层级收放，平滑动画
节点拖拽移动：子节点自动跟随
画布操作：缩放、平移、适应屏幕、重置视图
全屏模式：支持网页全屏和系统全屏
暗色模式：自动保存偏好，保护眼睛
导出功能：JSON、Markdown、XMind 2020+、SVG、PNG，以及专为嵌入设计的 .embed.json 数据包
轻量嵌入：单 HTML 文件，通过 URL 参数或全局配置加载数据
响应式：适配桌面与移动端

嵌入版使用教程

1. 准备数据文件

嵌入版需要加载一个 .embed.json 数据文件，该文件包含思维导图的结构、样式、图片（base64 编码）等信息。你可以通过 完整版 的导出功能生成此文件：

打开 XmindViewer_full.html，导入你的 .xmind 文件。
点击 “导出” → 选择 “嵌入数据 (.embed.json)”。
工具会自动提取节点树、样式、关系、图片，并生成一个 JSON 文件。

你也可以手动构建此 JSON，但推荐使用完整版自动生成。

提示：导出的 .embed.json 文件包含了所有图片的 base64 数据，因此即使图片路径失效，嵌入版也能完整显示。

2. 嵌入方式

将 XmindViewer_embed.html 和你的 .embed.json 部署到同一服务器（或允许跨域），然后使用 <iframe> 嵌入。

基本 iframe 示例：

html

<div class="xmind-embed-wrapper">
  <iframe
    src="/path/to/XmindViewer_embed.html?data=/path/to/your.embed.json"
    class="xmind-embed-iframe"
    frameborder="0"
    allowfullscreen
    loading="lazy"
  ></iframe>
</div>

//style样式已经写入styles.css中，可直接调用
<style>
  .xmind-embed-wrapper {
    width: 100%;
    margin: 1rem 0;
    border-radius: 14px;
    overflow: hidden;
    background: #e8ecf1;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  }
  .xmind-embed-iframe {
    display: block;
    width: 100%;
    height: 600px;
    border: none;
  }
</style>

通过 URL 参数配置（支持以下参数）：

src：必填，XmindViewer_embed | XmindViewer_embed_forceDot（未优化但有引力布局）。
data：必填，指向 .embed.json 文件的 URL（相对或绝对）。
dark：可选，true | false，默认为 false。
layout：可选，top-down | left-right-one | left-right-both | radial，默认为 top-down。
linestyle：可选，ortho（正交）| curve（曲线），默认为 ortho。

示例：

url

/Xmind/XmindViewer_embed.html?dark=true&layout=radial&linestyle=curve&data=/data/mindmap.embed.json

通过全局配置（适合在宿主页面中直接嵌入脚本）：

你可以在宿主页面中设置 window.__EMBED_CONFIG__ 对象，然后动态加载嵌入版。

javascript

<script>
  window.__EMBED_CONFIG__ = {
    dataUrl: '/data/mindmap.embed.json',
    darkMode: true,
    layout: 'radial',
    lineStyle: 'curve'
  };
</script>
<!-- 然后以普通方式加载嵌入版 -->
<iframe src="/XmindViewer_embed.html" ...></iframe>

3. 实时演示

下面是一个实际运行的嵌入示例（数据来自 /Xmind/JSON/example.embed.json）：

注意：如果 iframe 中的内容无法加载，请确保 XmindViewer_embed.html 和 .embed.json 的路径正确，且服务器允许跨域（通常同域无问题）。

完整版与嵌入版对比

特性	完整版 (XmindViewer_full.html)	嵌入版 (XmindViewer_embed.html)
使用方式	本地打开，拖拽上传 .xmind	嵌入 iframe 或通过 URL 加载数据
数据来源	用户上传 .xmind 文件	预生成的 .embed.json（需提前准备）
界面	含侧边栏、标签页、工具栏	仅画布 + 控制按钮（精简）
导出功能	完整导出（JSON、MD、XMind、SVG、PNG、嵌入数据等）	无导出功能（仅查看）
配置方式	通过界面按钮	URL 参数或全局对象
适用场景	个人使用、本地编辑预览	网站内容展示、博客嵌入、文档集成

高级配置说明

支持的所有 URL 参数

data：数据文件 URL（必需）
dark：是否启用暗色模式（true/false）
layout：布局类型，可选 top-down（上下）、left-right-one（左右单边）、left-right-both（左右双边）、radial（圆环）
linestyle：连线样式，ortho 或 curve

如果同时使用 URL 参数和 window.__EMBED_CONFIG__，URL 参数的优先级更高。

自定义嵌入样式

你可以通过 CSS 控制 iframe 容器的大小、圆角、背景等，如上文示例所示。嵌入版自身会适应容器尺寸。

常见问题

1. 如何生成 .embed.json 文件？

使用完整版（XmindViewer_full.html）导入 .xmind 后，点击“导出” → “嵌入数据 (.embed.json)” 即可生成。

2. 嵌入版支持哪些浏览器？

所有现代浏览器（Chrome、Edge、Firefox、Safari）均支持，包括移动端。

3. 图片显示为 broken 怎么办？

检查 .embed.json 中的图片数据是否包含完整的 base64 字符串（导出的数据已内嵌）。如果自行构建，请确保图片字段正确。

4. 能否在嵌入版中实现节点点击事件？

当前版本未暴露外部 API，但可通过 postMessage 与父页面通信（需自行扩展）。

5. 嵌入版支持全屏吗？

支持，通过 iframe 的 allowfullscreen 属性，用户可点击画布右下角的全屏按钮进入系统全屏。

许可证

🤝 贡献与反馈

欢迎提交 Issue 或 Pull Request。若有任何使用问题，可联系作者（见博客侧边栏）。

Happy Viewing! 🎉

XMind 思维导图嵌入指南纯前端查看与定制