动态流程图 · 可复用模板

一个零依赖的单文件示例:手写内嵌 SVG + CSS 动画,没有任何 JavaScript 或外部库,直接双击即可打开。复制本文件,改节点文字与坐标就能做出自己的流程图。

主链路 分支 旁路 反馈回路 成功出口
输入 输出 采集 ingest 处理 transform 校验 validate 输出 deliver 异常处理 on_error 修正回流
蓝色流动 = 主链路;青色 = 异常分支;红色虚线 = 反馈回路;带光晕的"校验"节点表示关键活动点。

怎么改成你自己的图

① 加/改节点:复制一组「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 的正负。

④ 节点光晕:在节点外再套一个 rectclass="pulse"

⑤ 配色:只改最上面 :root 里的 --c1/--c2/...,全图自动统一。坐标系是 viewBox="0 0 1000 380",宽高比固定、自适应容器。