纯HTML无法实现交互式思维导图，因缺乏动态计算与状态管理能力；必须依赖JavaScript库（如markmap或jsMind）或手动用SVG+原生JS实现布局、拖拽、折叠等逻辑。
纯 HTML 无法直接渲染交互式思维导图；必须引入 JavaScript 库或手动实现 SVG/Canvas 渲染逻辑。没有“仅用 HTML 标签”就能做出可拖拽、折叠、动态增删节点的思维导图这回事。
为什么不能只用 <div> 和 CSS 做真正可用的思维导图
CSS 布局（比如 flex 或 grid）能画出静态树状结构，但一旦涉及以下需求，就会迅速失控：
- 节点自动避让与连线路径计算（特别是多层分支交叉时）
- 点击折叠/展开子树时，要重排所有后代节点位置
- 拖拽节点后，连线需实时跟随且不遮挡文字
- 缩放、平移整个图时，CSS transform 容易导致字体模糊或事件偏移
这些不是样式问题，是几何计算 + 状态管理问题，必须靠 JS 控制。
推荐两个轻量、无依赖、开箱即用的 JS 方案
避开 D3.js（学习成本高）、mxGraph（体积大、License 复杂）这类重型库，优先考虑：
立即学习“前端免费学习笔记（深入）”；
-
markmap：把 Markdown 当作数据源，markmap-lib在浏览器里实时渲染成力导向布局的思维导图。适合文档型场景，支持主题、搜索、导出 PNG/SVG。import { markmap } from 'markmap-lib'; markmap(document.querySelector('#mindmap'), '#root', \`# 主题\n- 一级分支\n - 二级内容\`); -
jsMind：纯前端、MIT 协议、中文文档完善。数据格式是 JSON，支持键盘操作、右键菜单、插件扩展（如jm.plugin.zoom）。初始化只需：const minder = new jsMind({container:'jsmind_container'}); minder.show({roots:[{id:'root', topic:'中心主题'}]});
如果坚持手写，SVG + 原生 JS 是最可控的起点
不用框架，用 document.createElementNS('http://www.w3.org/2000/svg', 'svg') 创建画布，再用 getBBox() 测量文字宽高，配合递归计算每个节点坐标。关键点：
- 用
transform="translate(x,y)"定位每个<g>组，别用x/y属性硬设 - 连线用
<path d="M...L...">，避免<line>无法设置箭头和圆角 - 监听
mousedown→mousemove→mouseup实现拖拽，记得在mousemove中调用preventDefault()防止文本选中 - 折叠节点时，把对应子树
visibility="hidden"而非display="none"，否则getBBox()会失效
容易被忽略的兼容性细节
移动端缩放、Safari 的 SVG 渲染、IE11 已无需支持，但以下三点仍常翻车：
-
jsMind默认禁用双击缩放，如需开启，得手动绑定dblclick并调用minder.zoomIn()—— 它不内置该行为 -
markmap的字体渲染依赖系统已安装字体，若部署到 Linux 服务器且没装fonts-noto-cjk，中文会 fallback 成方块 - 所有方案在 iframe 内嵌时，若父页面设置了
pointer-events: none，会导致拖拽完全失灵，检查 computed styles 时容易漏掉这一层
真正卡住人的从来不是“怎么画出来”，而是“怎么让折叠后的位置计算不跳变”“怎么让连线在缩放时不虚化”“怎么让触摸事件响应延迟低于 100ms”——这些都得在真实设备上反复调参数，截图看不出来。
