Fireworks Tech Graph：从具体描述生成技术图解

关于这个 Skill

Fireworks Tech Graph 是 Codex 与 Claude Code 共用的一款 Skill，把自然语言任务转成技术图解，以 SVG 作为主要可编辑成果。项目提供 12 种视觉风格，其中 11 种使用 JSON 生成器，Dark Luxury 由 AI 编写 SVG。工作流程先检查结构与几何关系，再由 Agent 检查渲染后的图片。

为什么推荐

适合说明 Agent 系统、云部署和事件处理流程。项目把图解生成、结构检查与视觉复核放在同一套流程中，并分别提供静态、交互和动画输出工具。本页收录原始 MIT 开源项目，三组动画来自作者发布的官方示例。

适合用来做什么

• 在技术文档中说明 RAG、记忆、工具调用或多 Agent 架构。
• 根据明确的工程信息，制作云部署、事件处理、C4 评审和可观测性图解。
• 为文章、演示稿和设计评审准备 SVG 与 PNG 图解。
• 分享包含平移、缩放、主题切换与图片导出的独立 HTML 图解。

输出格式与视觉风格

用 SVG 保留可编辑图解，用 PNG 嵌入文档，或生成一个可离线打开的交互 HTML 文件。HTML 查看器提供平移、缩放、复位、主题切换、SVG 源码复制与静态图片下载。架构、时序、实体关系等技术图解共用图形、箭头语义和布局规则。

风格涵盖 Flat Icon、Dark Terminal、Blueprint，以及 C4 Review Canvas、Cloud Fabric、Event Transit 和 Ops Pulse。后四种风格对职责、边界、事件拓扑或观测数据有专门要求，应提供这些事实，而不是让 Agent 编造。

官方仓库与安装指南原始 Skill 说明

安装完整的原始 Skill

安装来源必须保留末尾的 /skills/fireworks-tech-graph。作者说明，直接安装仓库根目录可能只选中根 SKILL.md，遗漏配套文件。官方命令为 Codex 与 Claude Code 安装完整副本；不同系统的配置和可选导出依赖请按官方指南操作。

官方仓库与安装指南

制作第一张技术图解

1. 描述系统与读者

   例如：为包含 Web 前端、API 服务、PostgreSQL 数据库和 Redis 缓存的系统制作架构图。说明实际连接关系、关键文字，以及用于文档还是演示稿。

2. 选择风格与输出

   指定风格与需要的格式，例如 Flat Icon SVG 加 PNG，或 Blueprint SVG 加离线 HTML。没有风格偏好时，官方默认使用 Flat Icon。

3. 检查渲染结果

   按实际展示尺寸检查文字、箭头方向、分组、重叠与可读性。复杂系统必要时拆成总览图与局部详情图。

原始 Skill 说明官方视觉质量指南

检查与导出工具

随附 CLI 可以查看已安装版本、诊断输出依赖、校验图解输入、渲染 SVG、检查 SVG 几何关系，以及导出 PNG 或 HTML。按作者指南，从实际安装的 Skill 根目录运行。

如果 JSON 输入中的每个标签都必须完整显示，可选择 text_policy: strict。结构检查之后仍需查看图片；仅有命令成功或布局报告不能证明视觉质量。

官方仓库与安装指南原始 Skill 说明官方视觉质量指南

为支持的图解场景制作动画

要求“Generate a GIF”或“让这张图动起来”，即可选择语义 SVG 转 GIF 流程。它为支持的场景逐步绘制连接并展示流动效果，同时生成动画报告。官方默认循环为 5.75 秒、20 fps。

动画依赖官方场景规则，包括角色、阶段、颜色与路径，不能仅因风格相同就认为任意图解都能制作动画。本页展示作者官方动画的压缩副本；项目说明的动画媒体格式为 GIF。

官方仓库与安装指南官方 SVG 转 GIF 动画指南

使用前需要了解

• 使用能够读写本地文件的 Codex 或 Claude Code，以及 Python 3.9 或更新版本。官方安装器使用 npx，并要求指定仓库内的 Skill 子目录。
• PNG 渲染需要 CairoSVG 或 rsvg-convert。doctor 命令会分别检查 SVG 生成、离线 HTML 导出及其他输出能力。
• 可选的 GIF 导出需要 Node.js 22.12 或更新版本、Chrome 或 Chromium、FFmpeg/FFprobe，以及为所安装 Skill 配置的 Puppeteer 或 puppeteer-core。
• 仓库采用 MIT 许可证，可免费安装。Agent 或模型服务可能另行计费。分享图解前，应检查文字、关系和工程假设。

支持的 Agent