最靠谱方案是使用成熟JS库而非手写HTML+CSS，因纯HTML无法实现动态交互；推荐markmap（Markdown自动生成）和jsMind（JSON驱动、轻量无依赖），二者均支持CSS定制且避免手动布局。
直接用 JavaScript 库最靠谱，别手写 HTML+CSS 模拟树形结构
纯 HTML 无法动态响应点击、拖拽、折叠或自动布局——思维导图本质是交互式图形，不是静态列表。硬用 <ul></ul> + position: absolute 拼节点，后期增删子节点、计算坐标、处理重叠时会迅速失控，连居中对齐都得靠 JS 反复重算。
真实项目里，95% 的可靠方案是接入成熟库。推荐两个轻量、无依赖、文档清晰的：
-
markmap：适合从 Markdown 自动生成思维导图，渲染快，主题可配，markmap-lib可直接在浏览器加载 -
jsMind：纯前端，JSON 数据驱动，支持键盘操作、导出 PNG/SVG，mindnode风格的右向布局开箱即用
用 jsMind 加载本地 JSON 数据只需 4 行核心代码
它不强制要求后端接口，数据可内联在 HTML 中，也可通过 fetch 加载外部 .json 文件。关键不是“怎么画线”，而是“怎么组织节点数据结构”。
示例（嵌入 HTML 的最小可行片段）：
立即学习“前端免费学习笔记（深入）”；
<div id="jsmind_container"></div>
<script src="https://cdn.jsdelivr.net/npm/jsmind@0.6.0/dist/js/jsmind.js"></script>
<script>
const mindData = {
"meta": {"name": "示例", "author": "user", "version": "0.1"},
"format": "node_array",
"data": [
{"id": "root", "parentid": null, "topic": "中心主题", "level": 1},
{"id": "n1", "parentid": "root", "topic": "分支一", "level": 2},
{"id": "n2", "parentid": "root", "topic": "分支二", "level": 2}
]
};
const jm = new jsMind({container:'jsmind_container'});
jm.show(mindData);
</script>
注意：level 字段非必需（jsMind 能自动推导），但显式声明可避免父子关系误判；id 和 parentid 必须字符串类型，数字 ID 会导致子节点丢失。
markmap 从 Markdown 渲染思维导图，三步搞定
适合文档型场景：把会议纪要、需求列表、学习笔记写成带缩进的 Markdown，一键转图。它底层用 d3 布局，节点自动避让，无需手动调坐标。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
实操步骤：
- 引入
markmap-lib和d3（CDN 地址必须匹配版本，v2.x 不兼容 v1.x） - 准备一段合法 Markdown：用
#作根节点，##是一级子节点，缩进用空格或制表符均可 - 调用
markmap.markmap()，传入容器元素和 Markdown 字符串，它会自动解析层级并渲染 SVG
常见坑：## 标题 若紧跟在 # 标题 后无换行，部分版本解析失败；中文标点如「、」或全角空格可能导致解析中断，建议统一用英文逗号和半角空格。
自定义样式和交互时，优先改 CSS 类而非重写渲染逻辑
两个库都输出标准 DOM 或 SVG，并挂载语义化 class（如 jmnode、markmap-node）。想改字体大小、连线颜色、节点圆角？直接覆盖 CSS 就行，别碰源码里的 drawLine() 或 renderNode()。
例如隐藏 jsMind 的节点图标：
.jmnode .icon { display: none !important; }
又比如让 markmap 节点文字居中（默认左对齐）：
.markmap-node text { text-anchor: middle !important; dominant-baseline: middle !important; }
强行修改内部渲染函数，下次升级库就可能彻底失效；而 CSS 覆盖只要类名没变，基本稳住。
真正难的是数据同步——比如用户拖动节点后，如何把新位置存回后端？这需要监听 jsMind 的 event:node_moved 或 markmap 的 update 事件，再序列化当前结构。这部分没有银弹，得自己接 API。
