不能——HTML+CSS无法像样实现组织架构图，因其缺乏树形布局、连线、状态同步等能力，必须依赖JS库如d3-org-chart或orgchart来处理关系表达与动态更新。
用纯 HTML + CSS 能不能做组织架构图？
不能——至少不能“像样地”做。HTML 本身没有树形布局、连线、拖拽或自动排布能力，<ul></ul> 嵌套最多撑起一个静态缩进列表，但一旦涉及上下级连线、节点居中对齐、横向/纵向展开切换、点击折叠，就必须引入额外机制。真正可用的方案只有两类：CSS Flex/Grid + 手动定位（仅适合固定 5 人以内且不更新）、或 JS 驱动的树图库。别被“纯 HTML 实现”的标题误导，那类教程实际都悄悄用了 position: absolute + 硬编码 left/top，换两个部门就全乱。
为什么直接用 tree 类库比手写 CSS 更可靠？
因为组织架构图的核心难点不在“画框”，而在“关系表达”和“状态同步”。比如：某人调岗后，要同时更新其父节点的子列表、重绘连线、保持层级缩进一致、触发动画过渡——这些逻辑手写极易出错。主流库如 orgchart（jQuery 依赖）、d3-org-chart（D3 v7+，无依赖）、gojs（商业授权）已封装好：节点数据绑定、连线算法（正交/贝塞尔）、折叠/展开状态管理、键盘导航支持。尤其 d3-org-chart，只需传入扁平数组（含 id 和 parentId），它自动构建树结构：
const data = [
{ id: '1', name: 'CEO' },
{ id: '2', name: 'CTO', parentId: '1' },
{ id: '3', name: 'CFO', parentId: '1' },
{ id: '4', name: 'Dev Lead', parentId: '2' }
];
new OrgChart(document.getElementById('chart'), { data });
而手写 CSS 方案遇到“跨级汇报”（虚线箭头）、“矩阵汇报”（一人双线上级）就基本放弃治疗。
orgchart 和 d3-org-chart 怎么选？
看项目技术栈和维护成本：
立即学习“前端免费学习笔记（深入）”；
- 项目还在用 jQuery，且架构图不超过 50 人 → 用
orgchart：配置简单，nodeContent支持模板字符串，兼容 IE11 - 新项目、用 ES Module、需响应式缩放或导出 PNG → 选
d3-org-chart：无外部依赖，支持zoom、exportToPng()，API 更现代 - 需要双线汇报、自定义连线样式、或集成到已有 D3 可视化系统 → 直接上
d3-force手写力导向图，别硬套树图库
注意：orgchart 的 parentNodeSymbol 默认是「+」，但很多企业要求用「▶」或图标字体，得覆盖 CSS 中 .node .title::before；d3-org-chart 的连线颜色默认是灰色，修改需传入 nodeRect: { stroke: '#333' }，不是改 CSS。
数据格式不对会导致整个图白屏吗？
会，而且毫无报错提示。两个库都严格依赖 id 和 parentId 的字符串一致性。常见坑：
-
parentId: 1（数字） vsparentId: '1'（字符串）→ 子节点找不到父节点，全部挂到根下 - 根节点漏掉
parentId: null或undefined→ 库无法识别顶层，渲染为空 - 数据里有循环引用（A 的
parentId是 B，B 的parentId又是 A）→ 浏览器卡死，控制台静默 - 字段名写成
parent_id而非parentId→ 库当所有节点都是根节点，横向铺满屏幕
上线前务必用 console.log 检查原始数据，别只信后端接口文档里的“示例数据”。
