技能包

fireworks-tech-graph:用自然语言生成核对过的 SVG/PNG 技术图

适合要在 Codex 或 Claude Code 里把系统描述变成技术图的人,但会写 SVG/PNG 文件,生成前先确认输出路径。

官方来源 · fireworks-tech-graph

安装

python3 "$SKILL_ROOT/scripts/fireworks.py" version

适合谁

如果你要用自然语言描述一套架构或流程,并拿到经过几何核对的 SVG,以及高分辨率 PNG,这个 Agent Skill 更合适。同一套技能在 Codex 和 Claude Code 里不用改就能用。它还可以做经过校验的 SVG 到 GIF 语义动画,以及离线可交互 HTML。

你需要已经能在上述编码助手里调用该技能,并且本机有 python3,能找到 $SKILL_ROOT/scripts/fireworks.py。只想手动画图、不打算让 Agent 落盘的人,收益有限。页面点名的是 Codex 与 Claude Code,没有再写其他客户端;也不要把仓库标题里可能更旧的风格数量,覆盖正文里的 11 个生成器风格加 1 个 AI 撰写风格(Dark Luxury)。

3 分钟完成第一次尝试

页面没有另给一条市场安装命令。先做只读核对:在技能根目录已就绪时执行

python3 "$SKILL_ROOT/scripts/fireworks.py" version

成功信号是命令跑通并给出版本信息。这不写图文件。若 $SKILL_ROOT 还不存在,先停下来:摘录没有写如何把技能装进 Codex 或 Claude Code,不要自行补一条安装器。

版本通过后,再做一次受控出图。官方示例是用户说 “Generate a Mem0 memory architecture diagram, dark style”。技能会分类为 Memory Architecture Diagram、Style 2,生成带泳道、圆柱和语义箭头的 SVG,再导出 1920px PNG,并报告 mem0-architecture.svg / mem0-architecture.png。写文件前让 Agent 复述这两个路径,你确认后再生成。不要一上来就做 GIF 或 HTML:摘录提到这些产物,但没有给出对应子命令。

使用案例

案例一:按自然语言出架构图。沿用上面的 Mem0 示例即可验证整条链路:分类 → SVG → 1920px PNG → 报告文件名。它没有写 Style 2 的全部视觉参数,也没有写 Mem0 领域知识从哪来。因此验收只看到:分类结果被说出,并且那两个文件名出现在报告里。若 Agent 开始改你的业务代码,就已经离开出图任务。

案例二:给已有 SVG 导出 PNG。官方 CLI 是

python3 "$SKILL_ROOT/scripts/fireworks.py" export-png diagram.svg diagram.png --width 1920

这会覆盖或新建 diagram.png。先确认输入 SVG 存在,以及输出路径可以写。需要避免文字被裁切时,向配置加入 "text_policy": "strict":它会在写出前拒绝可见截断,报告里保留完整源标签并说明如何恢复;中文描述会用到可用的第二行。摘录没有给出完整 JSON 文件名。所以你只能确认有这个字段和中文第二行,不要编其他策略值。

使用边界

风格数量以正文为准:11 个生成器风格,外加 Dark Luxury。另有四类偏工程的风格,为 C4 评审、云部署、事件流和可靠性排查提供可执行约定,以及深度 AI/Agent 领域模式和全部 14 种 UML 图。页面没有列出 14 种 UML 的名称,也没有列出那四个工程风格的短名。缺了名字就不要点名去调。

可复制的命令只有 version 和 export-png。GIF、交互 HTML 被写成能力,但没有命令行。不要并列第二条安装器。客户端只写到 Codex 与 Claude Code。

第一次停在 version 或一张已确认路径的 PNG。任何批量出图、改 text_policy 之外的未知字段、或生成 GIF/HTML 的动作,都要先让 Agent 说明依据和将写文件,你确认后再继续。