纯 CSS+div 仅适用于简单静态流程图，需手动计算位置、用 transform 替代 top/left 实现连线解耦，但节点超5个或需交互时应改用 SVG 或 Mermaid 等库。
用 div + css 手动布局流程图，适合简单、静态、无交互的场景
纯 div 和 css 能做流程图，但不是推荐方案——它本质是“模拟”，不是“绘制”。你得自己算位置、对齐、连线角度，稍一改动（比如加个节点）就得重调 margin、top、left。只建议用于：内部文档配图、原型草稿、或必须零依赖的极简环境。
常见错误现象：箭头线错位、文字居中失效、响应式下彻底变形。根本原因是把 position: absolute 当万能解，却没统一坐标系基准（比如所有 div 都相对父容器定位，但父容器没设 position: relative）。
- 每个节点用
div包裹，设固定宽高 +border-radius（圆角矩形）或border-radius: 50%（椭圆） - 连线用伪元素
::after或额外div，配合transform: rotate()或linear-gradient画直线 - 必须给最外层容器设
position: relative，否则绝对定位会冒到body上 - 文字居中别只靠
text-align: center，块级节点要加display: flex; align-items: center; justify-content: center
css 连线容易断、歪、不随节点移动？用 transform 替代 top/left
直接写 top: 120px; left: 200px 连线，节点一挪就得同步改连线数值；而用 transform: translate(x, y) rotate(angle)，能把连线逻辑和节点位置解耦。例如：从节点 A 右侧中点连到节点 B 左侧中点，先用 JS 算出两点坐标差，再转成 rotate 角度和 translate 距离，最后用 width 控制长度。
性能影响：大量 transform 比频繁改 top/left 更流畅，浏览器对 transform 有硬件加速。但注意——rotate 基准点默认是中心，如果连线 div 宽高不对称，旋转后会偏移，得用 transform-origin 显式设为左端或右端。
立即学习“前端免费学习笔记（深入）”；
- 连线
div宽设为 2px，高设为足够长（如100vh），再用transform: rotate(30deg) translateY(-50%)调整 - 若需带箭头，用
border三角形 +clip-path截掉多余部分，比svg简单但兼容性略差（IE 不支持clip-path） - 不要给连线加
transition动画——transform动画本身已够用，叠加反而卡顿
什么时候该放弃 div + css，换 svg 或库？
当流程图出现以下任一情况，立刻停手：节点超过 5 个、需要拖拽/缩放、分支动态增删、导出为 PNG/SVG。此时硬撑只会让 CSS 文件膨胀、维护成本飙升。
svg 是更自然的选择：每个节点是 <rect> 或 <ellipse>，连线是 <line> 或 <path>，坐标即真实像素，JS 修改属性就能实时更新。主流库如 Mermaid（支持 Markdown 写法）、Flowchart.js 或 GoJS（商业但功能强）都基于 SVG 渲染。
-
Mermaid只需写类似graph TD; A[开始] --> B{判断};，一行 JS 初始化就渲染完 - 若项目已用 React，
react-flow提供可拖拽、连接线自动吸附的组件，比手写 CSS 省 90% 时间 - 旧系统不能引入新库？至少用
svg标签内联写，别碰div连线——svg的viewBox天然适配缩放，div没这能力
响应式流程图最难搞的其实是文字与连线比例失衡
缩放容器时，div 节点大小可设 % 或 rem，但连线粗细（border-width 或 height）和文字大小（font-size）不会同比例变。结果就是：小屏下箭头细得看不见，大屏下文字挤成一团。
解决思路不是“全用 vw”，而是分层控制：节点尺寸 用 rem（随根字体变），连线粗细 用 px（保持视觉重量），文字 用 clamp()（如 font-size: clamp(12px, 2.5vw, 16px)）。但最省事的办法仍是——别做响应式流程图，固定宽度 + 滚动容器更可靠。
真正容易被忽略的是：流程图语义缺失。纯 div + css 对屏幕阅读器几乎不可读，svg 至少能加 title 和 aria-label。如果图表要进正式文档或有无障碍要求，这点比样式还关键。
