一个零依赖的单文件示例:手写内嵌 SVG + CSS 动画,没有任何 JavaScript 或外部库,直接双击即可打开。复制本文件,改节点文字与坐标就能做出自己的流程图。
① 加/改节点:复制一组「rect + 两行 text」,改 x/y 定位置、改文字。rect 一般 150×58,圆角 rx="11"。
② 连线:每条线写两遍——先 .edge(灰底+箭头),再 .flow(彩色流动),两者 d 必须一样。直线用 M起点 L终点;拐弯用 C 贝塞尔曲线。
③ 让线流动:给路径加 class="flow" 即可;颜色用 style="stroke:var(--c2)"。改速度调 CSS 里 dash 3s,改方向调 stroke-dashoffset:-200 的正负。
④ 节点光晕:在节点外再套一个 rect 加 class="pulse"。
⑤ 配色:只改最上面 :root 里的 --c1/--c2/...,全图自动统一。坐标系是 viewBox="0 0 1000 380",宽高比固定、自适应容器。