fireworks-tech-graph 把这件事做成了 Agent Skill：用中文描述系统，直接产出可校验的 SVG、高清 PNG，最新版本还能生成箭头按语义流动的 GIF。我把当前 12 种风格都跑了一遍，下面放的都是本地实测结果。
GitHub： https://github.com/yizhiyanhua-ai/fireworks-tech-graph
它最有意思的地方，不是“把静态图做成 GIF”，而是让箭头按调用、委派、写入、复制和异常分支的顺序动起来。
截至 2026 年 7 月 19 日，这个项目在 GitHub 上有 8,925 Star、765 Fork，最新稳定版是 7 月 17 日发布的 v1.2.0，采用 MIT 许可证。
一句话到图，难点其实在“画对”
很多工具已经能把文字变成图。真正麻烦的是后半段：节点不能压住文字，箭头要接到正确端口，线条尽量少交叉，容器边界要清楚，导出的文件还得能继续编辑。
fireworks-tech-graph 的处理方式更像一条小型制图流水线。Agent 先判断图的类型和风格，再把需求整理成结构化语义，规划节点和连线，生成 SVG，做 XML、几何、标记和构图检查，最后导出 PNG、离线 HTML 或 GIF。
这也是它和普通文生图最大的差别：最终交付里保留了 SVG。标题、节点、颜色不满意，仍然可以继续改，不必重新抽卡。
当前仓库提供 12 种视觉风格，其中 11 种由生成器直接支持，Dark Luxury 是 AI 按风格规范编写的版本。图的类型也不只限于架构图，项目覆盖 14 类 UML，并内置 RAG、Mem0、多智能体、工具调用等 AI 场景。
12 种风格，我都跑了一遍
这轮测试一共生成了 12 张中文循环 GIF。每张宽 960px、20fps、115 帧、5.75 秒，文件都控制在 500KB 以内。仓库测试套件在本机的结果是 129 项通过、3 项跳过。
动效节奏也很统一：开场先不显示连线，随后按业务顺序把路径画出来；拓扑完整后，数据仍会沿着箭头持续流动，最后短暂复位并重新开始。节点和文字保持静止，所以不会出现整张图乱晃的感觉。
下面 12 张都是中文实测版，可以直接看箭头的运动方向。
扁平图标适合产品文档，暗色终端适合工具调用和执行链路。
工程蓝图强调服务与数据层，Notion Clean 更适合知识结构和轻量说明。
玻璃拟态适合多智能体协作，Claude Official 的层级更克制。
OpenAI Official 适合 API 集成，Dark Luxury 更像发布会里的深色技术图。
后四种不是简单换皮，而是带着领域约束。C4 Review Canvas 强制讲清责任、技术和协议；Cloud Fabric 强调 Region、VPC 与跨区机制。
Event Transit 把主题与处理器画成线路和站点；Ops Pulse 把黄金信号、关键路径和 Trace 放在同一张图里。
4 个真实场景，Prompt 和结果放在一起
光看风格名不太容易判断怎么用。我选了 4 个日常技术工作里更常见的场景，把中文 Prompt 和本地实际生成结果一一对应。四张图都重新从 SVG 导出了 GIF，验证报告为 ok: true，源 SVG 在动效生成前后没有被修改。
场景一：给多智能体团队画协作关系
💡 PROMPT
画一张“AI 研究团队多智能体协作图”。用户需求先进入协调智能体，由它把任务分派给研究智能体、编码智能体和评审智能体；研究结果与代码产物进入共享记忆，再由综合引擎汇总，评审通过后输出最终回复。使用玻璃拟态风格，深色背景，全部说明文字用中文。生成 SVG、PNG，并把箭头按任务交接顺序做成循环 GIF。
这张图适合放在 Agent 产品方案里。蓝色表示输入与上下文，紫色表示任务委派，绿色是共享工作，橙色是评审后的输出。动起来以后，谁把任务交给谁，比静态图更直观。
场景二：解释双区域结账系统怎么容灾
💡 PROMPT
画一张“双活结账系统部署图”。全局入口分别连接北美和欧洲边缘节点；每个区域都要画出 Region、VPC、结账应用和订单数据库，标明区域内写入与跨区域复制。使用 Cloud Fabric 风格，中性云图标，所有标题与说明用中文。导出 SVG、PNG 和带数据流箭头的循环 GIF。
这里的价值是边界清楚。区域、VPC、应用与数据库不会混在一起，全局路由、区域写入、跨区域复制也各用一种语义颜色。拿它讲容灾方案，比一张只有云朵和箭头的概念图靠谱得多。
场景三：把 Kafka 事件流画成地铁线路
💡 PROMPT
画一张“结账事件线路图”。主线是 checkout.events，从结账 API 依次经过 Schema 校验、欺诈评分、订单路由和履约服务；欺诈评分的异常事件进入结账 DLQ，订单路由把状态投影到 RocksDB 物化视图。使用 Event Transit 地铁线路风格，节点按处理顺序编号，全部说明文字用中文，并生成箭头流动的 GIF。
主事件沿红色轨道前进，DLQ 是明确的异常分支，状态投影单独落到 RocksDB。复杂事件流最怕“每根线都一样”，这套风格用轨道、站点和分支把语义拆开了。
场景四：复盘一次结账请求为什么变慢
💡 PROMPT
画一张“结账请求可靠性排查图”。展示边缘网关、API 网关、结账服务和支付服务，每个服务显示延迟、流量、错误率、饱和度四个黄金信号；标出一次结账请求的关键路径，结账服务向 OTel Collector 导出遥测，并在下方画出同一 Trace 的瀑布图。使用 Ops Pulse 深色运维风格，全部说明文字用中文，导出循环 GIF。
这张最适合故障复盘。上半部分看四个服务的黄金信号，下半部分看同一请求的 Trace 瀑布，结账服务的高延迟和降级状态能直接对上。
安装后，先这样跑第一个例子
项目同时适配 Codex 和 Claude Code。仓库当前推荐通过嵌套 Skill 路径安装，末尾的 /skills/fireworks-tech-graph 不能省略：
npx -y skills@1.5.17 add \ yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph \ --agent codex claude-code -g -y --copy
装完后重启 Codex 或 Claude Code，让运行时发现新 Skill。最短的用法不是背命令，而是直接把场景说清楚，例如：
💡 PROMPT
画一张中文的 RAG 系统架构图，包含用户、检索器、向量库、重排器、LLM 和引用输出；使用 OpenAI Official 风格，导出 SVG 和 1920px PNG。再把箭头按检索与生成顺序做成 GIF。
想让结果稳定，Prompt 里最好交代五件事：图要解决什么问题、必须出现哪些节点、阅读方向与边界、想用哪种风格、最终要 SVG、PNG、HTML 还是 GIF。
只说“画一张很酷的 AI 架构图”，Agent 仍然得替你猜大量结构。把 Region、VPC、DLQ、共享记忆、关键路径这些名词说出来，图会扎实很多。
动图是真的，但上手前有几个边界
第一，v1.2.0 的动态输出是 GIF，不是可交互视频。默认规格是 960px、5.75 秒、20fps。箭头会按语义路径构建并持续流动，节点、文字和背景保持静止。
第二，静态 SVG、PNG、HTML 的依赖较轻，需要 Python 3.9 以上，以及 CairoSVG 或 rsvg-convert。生成 GIF 还要准备 Node.js 18 以上、Chrome 或 Chromium、FFmpeg、FFprobe 和 Puppeteer。只想画静态图，可以先不装完整动效链路。
第三，项目更擅长结构明确的技术图，不适合拿来画自由插画。它会检查交叉线、弯折数、间距、容器边界和文字位置，这些约束会牺牲一点“随便发挥”，换来更稳定的工程表达。
第四，安装时优先跟 GitHub Release。README 明确提示 npm 是独立分发渠道，可能落后于 GitHub；当前 Skill 应使用上面的嵌套仓库路径。仓库右侧的简短描述还停留在“7 种风格”，README 和 v1.2.0 实际已经是 12 种，判断功能时以当前 README 和 Release 为准。
写在最后
我原本最关心的是“箭头到底会不会动”。跑完以后，答案很明确：会动，而且不是统一往前滚的装饰线。多智能体图里的任务胶囊、云部署里的跨区复制、事件线路里的异常分支、运维图里的遥测和 Trace，各自有不同的运动语义。
如果你经常写技术方案、README、架构评审或故障复盘，这个 Skill 值得装进 Agent 工具箱。先从一个节点清楚的小场景开始，再逐步补边界和约束，成功率会比一句“帮我画个架构图”高很多。
