有了这个skills，再也不愁画架构图了，内置12 种视觉风格

• 公众号：GitHubStore
• 发布时间：2026-07-22T08:03:03+08:00
• 微信链接：https://mp.weixin.qq.com/s/a-IGLuyZWxiqT6z3A7VC8A
• RSS ID：3916483328-2247495806_1
• Feed ID：MP_WXS_3916483328
• Glance 当前首页可见：是

---

让 AI 画一张架构图，画的很快，一会框、箭头、标题一下子都有了。

但当你放大一看：连线从节点中间穿过去，两个标签挤在一起，图例挡住了业务线；好不容易调顺，导出 PNG 后底部又被裁掉。你让它“再优化一下”，第二版可能只是换了个地方出错。

项目简介

fireworks-tech-graph是一份可由 Codex 和 Claude Code 共用的 Agent Skill。它将自然语言描述转化为经过几何校验的 SVG、高分辨率 PNG、经过媒体探测验证的 SVG 转 GIF 语义动效与离线交互 HTML。聚焦后的动效链路只接收生成器产出的语义 SVG，只输出一个紧凑、可验证的 GIF。项目内置 11 种生成器风格+ 1 种 AI 手绘风格（Dark Luxury）；新增的四种工程风格分别为 C4 评审、云部署、事件流和可靠性排查提供可执行语义契约，同时保留 AI/Agent Pattern 与全部 14 种 UML 图类型。

先看效果

使用它不需要先学习一套绘图语法。你可以直接说：

用户: “画一张 Mem0 的架构图，暗黑风格” → Skill 识别：Memory Architecture Diagram，Style 2 → 生成含泳道、圆柱体、语义箭头的 SVG → 导出 1920px PNG → 输出路径：mem0-architecture.svg / mem0-architecture.png 效果如下图所示：

12 种官方回归样例，对应不同的技术场景与阅读任务12 种风格保留各自独立场景，同时统一通过几何、文字适配、线束路由和语义动效质量门禁。

难点不是画出来，而是知道它真的画对了

很多 AI 绘图工具的完成条件，是模型认为自己已经完成。fireworks-tech-graph的完成条件更严格：必须有校验器结果和实际渲染证据。

它把第一次生成的图视为候选稿，随后进入一条轮次受限的反馈闭环：

自然语言描述 → 图表契约 → 语义 IR → 风格规范 → 线路规划 → SVG 构建 → 结构校验 → PNG 视觉回读 → 定向修正 → 验证后的 SVG + PNG前半段尽量交给确定性规则。校验器会检查 XML 结构、箭头 marker 引用、路径几何、节点与保留区域的碰撞，以及连线是否共用不该重叠的轨道。版本化 Diagram IR 还会在渲染前拦截重复 ID、悬空引用、非法 waypoint 和非有限坐标。

这些检查很适合机器，因为“线有没有穿过框”“引用的节点是否存在”并不是审美问题，没必要让模型凭感觉回答。

接着才进入视觉判断。Skill 会真正渲染 PNG，再回读图片，检查文字裁切、标签碰撞、留白、层级和走线是否自然。发现问题后，它不会推翻整张图，而是只调整已经诊断出的标签、坐标、线路走廊或间距，然后重新校验。

默认最多进行两轮这种聚焦修正，避免 Agent 进入没有终点的自我修改。最终结果会明确给出：

validation: passed visual_review: passed如果当前环境根本不能读取图片，它也会把视觉复核标为跳过，而不是在没有证据的情况下宣布完成。

这套被项目称为 Loop Engineering 的思路，是它与普通提示词模板最明显的区别：先生成，再验证；能用规则判断的先用规则，规则看不见的再交给视觉模型；每一次修改都要重新经过门禁。

12 种视觉风格

项目内置 11 种生成器驱动风格，以及 1 种由 AI 按参考规范手工构图的暗黑奢华风。前八种覆盖扁平图标、暗黑终端、工程蓝图、Notion 极简、玻璃态、Claude 风格、OpenAI 风格和暗黑奢华等常见表达。

更值得看的是后四种工程风格。它们不只改变颜色和字体，还把用途写进了生成规则：

C4 评审画布只呈现一个抽象层级，并要求节点包含职责、技术栈和评审状态，关系线上写清动作与协议。

Cloud Fabric强调 Region、VPC、部署归属、全局入口和跨区域机制，适合云部署评审。

Event Transit把 Topic、处理节点、Consumer Group、DLQ 和状态投影组织成事件轨道。

Ops Pulse围绕固定观察窗口、Golden Signals、关键请求路径和关联 Trace 展开。

C4 评审画布：职责、技术栈、动作与协议都进入图的语义结构以 C4 评审画布为例，图里每个容器都带有职责与技术栈，连线同时说明动作和协议。这样的信息可以直接进入架构评审，而不是只能充当一张好看的配图。

Ops Pulse：把服务健康、关键请求路径与关联 Trace 放进同一张图Ops Pulse 则把服务健康、关键链路和一条关联 Trace 放到同一张画布。它的价值也不在暗色背景，而在于图的组织方式贴近排障时真正要看的信息。

除此之外，项目支持类图、组件图、部署图、活动图、状态机图、序列图、时序图、ER 图等 14 种 UML 图类型，也内置 RAG、Agentic Search、Mem0、Multi-Agent 和 Tool Call 等 AI/Agent Pattern。

快速开始

项目推荐通过 skillsCLI 一次安装到 Codex 和 Claude Code。仓库路径必须指向真正的嵌套 Skill 目录：

npx -y skills@1.5.17 add
yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph
—agent codex claude-code -g -y —copy安装完成后重启对应客户端，让它重新发现 Skill。然后可以直接用自然语言开始：

生成一张 Multi-Agent 协作架构图，使用玻璃态风格。 画面包含协调器、研究 Agent、编码 Agent、评审 Agent、共享记忆和最终输出。 请输出 SVG 与 PNG，并完成结构校验和视觉复核。希望先检查本机环境，也可以运行统一 CLI 的诊断命令：

SKILL_ROOT=“$HOME/.agents/skills/fireworks-tech-graph"python3"$SKILL_ROOT/scripts/fireworks.py” doctor生成 SVG、执行校验和使用 CLI 需要 Python 3.9 或更高版本。PNG 导出还需要 CairoSVG 或 rsvg-convert；如果要生成 GIF，则需要额外准备 FFmpeg/FFprobe、Chrome 或 Chromium，以及 puppeteer或 puppeteer-core。

普通用户不必一开始就把这些依赖全部装齐。先完成 SVG 和 PNG 的基本链路，确认图的类型与风格适合自己的工作，再决定是否启用 GIF 和离线交互 HTML，成本会更可控。

项目地址

GitHub：

https://github.com/yizhiyanhua-ai/fireworks-tech-graph

            预览时标签不可点