BAIZE AI RESOURCE

技术架构图与动效 SVG 生成

Fireworks-tech-graph

fireworks-tech-graph 是适用于 Codex 与 Claude Code 的 Agent Skill，可将描述转换为经几何校验的 SVG 图表，并导出 PNG、GIF 与 HTML。

获取资源

资源介绍

fireworks-tech-graph 是一个面向技术图表生成的 Agent Skill，可在 Codex 和 Claude Code 中直接使用。用户用中英文描述系统结构后，它会自动分类图表类型并选择视觉风格，生成带泳道、容器、语义箭头和端口锚点的 SVG，再通过内置脚本做语法、引用完整性与箭头碰撞校验，最后导出 1920px PNG、经过验证的 SVG 转 GIF 动效，或单文件离线交互式 HTML。它内置 12 种视觉风格与 14 类图表类型，覆盖完整 UML 支持，并为 C4 评审、云部署、事件流和可观测性等工程场景提供可执行语义契约。适合需要频繁产出架构图、流程图、时序图的技术团队、文档作者和 AI/Agent 系统开发者，解决手工绘图耗时、风格不统一和图形几何错误的问题。

Skill 能力

自然语言生成图表

用中英文描述系统即可生成 SVG 技术图表，自动完成图表类型分类与风格选择。

几何安全校验

内置 SVG 语法、marker 引用完整性和箭头与组件碰撞检测，降低图形错位与截断风险。

多格式输出

支持导出高分辨率 PNG、经过验证的 SVG 转 GIF 语义动效，以及单文件离线交互式 HTML。

12 种视觉风格与 14 类图表

提供 12 种视觉风格和 14 类图表类型，覆盖完整 UML，并为 C4、云部署、事件流等场景提供语义契约。

跨 Agent 通用

同一套 Skill 在 Codex 与 Claude Code 中无需修改即可使用。

资源配置

适用平台

Claude CodeCodex

支持模型

模型无关

调用方式

自动触发手动调用命令调用

安装与调用

在 Codex 或 Claude Code 中安装该 Skill，并确认 SKILL_ROOT 指向安装目录。
用中英文描述需要绘制的系统或流程，例如指定图表类型与视觉风格。
由 Skill 生成 SVG 图表，并按需运行 validate-svg.sh 做语法与碰撞校验。
使用 fireworks.py export-png 导出高分辨率 PNG，或使用 animate 生成动效 GIF。
如需交互式展示，可用 export-html 将 SVG 导出为单文件离线 HTML。

使用案例

Mem0 记忆架构图

使用场景AI/Agent 系统架构文档

描述 Mem0 记忆架构并指定深色风格，生成带泳道、圆柱体与语义箭头的 SVG，并导出 1920px PNG。

API 集成流程图

使用场景接口文档与交互式展示

基于 api-flow-style7.json 生成 SVG，再导出为无远程依赖的单文件离线交互式 HTML。

多风格回归样例

使用场景图表风格批量验证

运行 test-all-styles.sh 渲染 12 种风格的回归样例，验证 SVG 并导出 PNG 测试报告。

包含内容

fireworks-tech-graph-source.zip

README-中文安装说明.md

LICENSE-MIT.txt

SHA256.txt

常见问题

fireworks-tech-graph 的 v1.2.0 版本是什么时候发布的，有哪些发布产物？

根据 docs/releases/README.md 的发布历史表，v1.2.0 的版本日期为 2026-07-17，tag commit 为 ea534c2d，是 Latest GitHub release。该版本发布产物包括 fireworks-tech-graph-v1.2.0.zip、SHA256SUMS 和 yizhiyanhua-ai-fireworks-tech-graph-1.2.0.tgz。

fireworks-tech-graph 的 npm 包名和版本号是什么，Node 引擎要求是什么？

package.json 显示包名为 @yizhiyanhua-ai/fireworks-tech-graph，版本为 1.2.0，engines.node 要求为 >=22.12.0。其 bin 入口为 scripts/fireworks.py，对应命令 fireworks-tech-graph。

如何用 fireworks.py 导出 PNG 并指定宽度？

README.md 给出的命令为：python3 "$SKILL_ROOT/scripts/fireworks.py" export-png diagram.svg diagram.png --width 1920。其中 --width 用于指定 PNG 宽度，示例值为 1920。

fireworks.py 的 version 和 doctor 子命令分别报告什么信息？

README.md 说明：version 会报告包信息、实际 Skill 根目录以及可获取时的 Git 状态；doctor 用于区分 SVG/HTML 支持与可选的 PNG/GIF 依赖。

如何重新生成 examples 中的交互式架构图 HTML？

examples/README.md 说明 interactive-architecture.html 是由 fixtures/api-flow-style7.json 生成的单文件离线示例，可直接在浏览器打开，无远程运行时依赖。重新生成使用两条命令：先执行 python3 scripts/fireworks.py render architecture fixtures/api-flow-style7.json "$tmp_svg"，再执行 python3 scripts/fireworks.py export-html "$tmp_svg" examples/interactive-architecture.html --title "API Integration Flow" --slug api-integration-flow。