如果你经常写技术博客、做架构设计文档，或者需要快速出图，一定体会过这种纠结：脑子里有清晰的程序结构。却落到画图工具里就是另一回事——要么在 draw.io 里拖拽半天要么跟 Mermaid 的 DSL 语法较劲。

最近在 GitHub 上看到一个叫 fireworks-tech-graph 的项目。它是一个 Skill，主要能力很简单：你用中文描述程序，它几秒钟生成可直接发布的 SVG + PNG 技术图。

fireworks-tech-graph 概述

fireworks-tech-graph 将自然语言描述转化为精美的 SVG 技术图。并通过 cairosvg导出高分辨率 PNG，同时支持 rsvg-convert 与 puppeteer 作为备选方案。老实说，内置多种模板风格&多种 AI 手绘风格多种 UML 图类型.

该项目目前在 GitHub 上已有 .8k star。说起来，

解决了什么问题？

很多人写技术文档时都会遇到一个很现实的问题：图很关键，但画图本身特别耗时间。

• 脑子里有结构，却落到图里很慢。
• Mermaid 适合快速表达，但视觉效果和复杂结构承载能力有限。
• draw.io 虽然强大。却手工拖拽成本高，不适合频繁改稿。
• 当图要服务于 AI、Agent、RAG、Memory 这类新领域时通用绘图工具缺少现成语义。

winterfireworks-tech-graph 的价值在于：把“描述程序”直接转成“生成图”。而且不只是出 SVG，还能直接导出适合博客和文档嵌入的 PNG。

怎么用？

安装这个 Skill 只需要一行命令：

或者下载项目之后直接导入到你的 AI 工具中。

安装依赖

• NPM 安装 ：puppeteer

• PIP 安装：cairosvg

装完之后直接在对话里用自然语言描述就行：

"Skill" 会自动识别图类型、选定风格、生成 SVG，接下来导出 1920px 的高清 PNG。

不只是“自动画图”——设计亮点一览表格化呈现！

视觉风格选择器

支持的所有 UML 图类型与对应布局规则

UML 类型

描述

推荐风格

AI/Agent 内建知识模型识别

• AIGC 场景如 RAG Pipeline、Agentic Search 等可对应流程图，无需手动勾勒每一步骤；一样 Multi-Agent 协作与 Tool Call 流程也能一次性完成。
• AIR 模式词汇表已预设：
AIGC 场景词汇：: LLM 用双边框圆角矩形；Agent 用六边形，Vector Store 用带内环圆柱体；箭头颜色与虚线编码写入/读取/异步/循环等语义。AIGC 绘制规则：: 每个节点按层级排列，以可视化方式展示输入→LLM→记忆→工具→输出。AIGC 辅助脚本：: generate-diagram.sh → 验证 SVG 并导出 PNG；generate-from-template.py → 从模板快速创建起始 SVG；validate-svg.sh → 单独校验 SVG 语法；test-all-styles.sh → 批量测试所有风格。

---

输出与验证工具链

• # generate-diagram.sh : 自动验证并导出 PNG
• # generate-from-template.py : 从模板快速创建起始 SVG
• # validate-svg.sh : 单独校验 SVG 语法
• # test-all-styles.sh : 批量测试所有风格

  ---

  谁适合用？

  • * 经常写技术博客或产品文档的人。

    • 经常需要画架构流和流程，而不想每次都手动画。

    • 做 AI / Agent / RAG / Memory 发布内容的人。

    • 希望把“描述需求 → 生成图 → 嵌入文章”链路标准化的人。

    ---

    写在最终