纯html+css无法实现真正可用的思维导图，因其缺乏拖拽联动、折叠重排、缩放适配等交互能力，本质是几何计算与状态同步问题，需js驱动。
为什么不能只用 <div> 和 CSS 拼思维导图<p>纯 HTML + CSS 画不出真正可用的思维导图，不是“不够美观”，而是根本无法响应交互。你拖拽一个节点，连线不会跟着动；点击折叠，子节点位置不会重算；缩放后文字模糊、事件坐标偏移——这些都不是样式能解决的，是几何计算 + 状态同步问题。<br>常见翻车点：<br>• 用 <code>position: absolute 手动设每个节点坐标，增删节点后全乱套
• 连线用 <hr> 或 border 模拟，交叉时遮挡文字、无法箭头收尾
• 折叠时用 display: none，后续 getBBox() 测宽高直接返回 0
jsMind 初始化时 id 和 parentid 必须是字符串
jsMind 初始化时 id 和 parentid 必须是字符串传入 JSON 数据时，id 和 parentid 字段哪怕看着是数字（比如 1、102），也必须写成字符串（"1"、"102"）。否则 jsMind 内部匹配父子关系会失败，子节点直接消失，控制台无报错，极难排查。
实操建议：
• 数据从后端来，确保 API 返回字段类型为 string
• 本地静态数据，手动加引号：{"id": "n3", "parentid": "root", "topic": "子分支"}
• 不依赖 level 字段推导层级，显式写全 parentid 更稳
markmap 渲染 Markdown 时缩进和标题层级要严格对应
markmap 把 # 解析为根节点，## 为一级子节点，### 为二级……但它**不识别空格/Tab 缩进**，只认 Markdown 标题符号。写成这样会出错：
# 主题<br> - 分支一 ← 这行被当普通列表，不进树结构
正确写法必须是：
# 主题<br>## 分支一<br>### 子内容
注意：
•
## 和文字间**只能有一个空格**，多空格或 Tab 会导致解析失败• 中文标题无需额外处理，但避免在标题里混用
<span></span> 等 HTML 标签（会被转义显示）保存编辑状态到 localStorage 容易漏掉的三件事
用户刷新页面后思维导图回到初始状态？大概率是 localStorage 同步逻辑没跑全。
关键检查点：
• 添加/删除/重命名节点后，必须立即调用 jm.get_data() + JSON.stringify() 存入，不能只等“保存按钮”触发
• 读取时用 JSON.parse(localStorage.getItem('mind_data')) || defaultData，空值或损坏 JSON 会中断初始化
• jm.get_data() 返回的是对象，直接 localStorage.setItem('x', jm.get_data()) 存的是 [object Object]，后面读出来就是个空字符串
