jsmind 最少需引入 jsmind.css、jsmind.js、jsmind.draggable-node.js、jsmind.screenshot.js 四个文件，按此顺序加载；初始化 data 必须含严格格式的 root 节点；保存需 json.stringify() 后存 localstorage；导出图片前应重置缩放并确保 dom 渲染完成。
直接用 jsMind 就能跑起来，不用框架、不配构建工具，5 分钟搭出可编辑、可存本地、可导出图片的思维导图页面——前提是别漏掉那几个关键 JS 文件和初始化顺序。
必须引入的 jsMind 文件有哪些
很多人卡在第一步：只引了 jsmind.js，界面空白或报 jm is not defined。实际最少要 4 个文件，缺一不可：
-
jsmind.css：负责基础样式和节点渲染框，没它节点文字会堆叠或溢出 -
jsmind.js：核心库，提供jsMind构造函数和jm.show()方法 -
jsmind.draggable-node.js：启用鼠标拖拽节点功能，否则所有节点固定不动 -
jsmind.screenshot.js：调用jm.screenshot.saveAsImage()的前提，没它点“保存为图片”没反应
CDN 引入时注意顺序，CSS 在前，JS 按上述顺序依次加载；本地引入则确保路径正确，浏览器控制台 Network 标签页里看是否 404。
初始化时 data 为空或结构错误导致白屏
jsMind 要求初始数据是严格格式的 JSON 对象，顶层必须含 root 字段，且 root 必须是节点对象（含 id、topic、children）。常见错误：
- 把数组直接传给
new jsMind(...)→ 报错data.root is undefined -
root节点缺id或topic→ 渲染失败，控制台静默无提示，但容器空 - 从
localStorage读取后没JSON.parse()→ 传字符串进去，jm.show()不报错但不显示
稳妥写法：
const data = {
meta: { version: '1.0', name: 'default' },
format: 'node_array',
root: {
id: 'root',
topic: '中心主题',
children: []
}
};
const jm = new jsMind(options);
jm.set_data(data);
jm.show();
保存到 localStorage 后刷新丢失？检查 key 和序列化时机
自动恢复靠的是每次修改后主动存，不是靠监听。常见疏漏：
- 只在点击“保存”按钮时调用
saveDataToLocal()，但添加/删除/编辑节点后没同步触发 → 刷新就丢最近操作 - 存的时候用
localStorage.setItem('jsmind_data', jm.get_data())→ 错！jm.get_data()返回的是内部结构对象，不是 JSON 字符串，必须JSON.stringify() - 读的时候没做容错：
JSON.parse(localStorage.getItem('jsmind_data')) || defaultData才安全，否则空值或损坏 JSON 会导致整个初始化失败
建议在每个操作函数末尾加一句：
localStorage.setItem('jsmind_data', JSON.stringify(jm.get_data()));
导出图片模糊或截不全？html2canvas 配置要微调
jsmind.screenshot.js 底层用的是 html2canvas，默认配置在高 DPI 屏幕（如 MacBook Retina）下容易模糊，且容器滚动时可能只截可视区。
- 导出前先强制重置缩放：
jm.view.zoom_in(1);或jm.view.zoom_out(1);再截图，避免因缩放导致比例失真 - 截图前临时隐藏工具栏：
document.querySelector('.toolbar').style.display = 'none';，截完再 show，否则按钮会盖在图上 - 若导图内容超出容器高度，需确保
#jsmind_container的overflow是visible或已滚动到顶部，html2canvas不会自动滚动捕获
最易被忽略的一点：截图函数必须在 jm.show() 之后调用，且不能在 DOM 尚未渲染完成时立即执行——加个 setTimeout(() => { jm.screenshot.saveAsImage(); }, 100) 更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
