HTML怎么做思维导图应用_HTML简单思维导图应用实现完整版

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) 更稳。