自然语言生成SVG/PNG技术图推荐：告别手绘，一键出图
你是否也遇到过这样的困境？脑海中架构脉络清晰，落到绘图工具时却卡壳——要么在 draw.io 里反复拖拽，要么被 Mermaid 的 DSL 语法折磨。这种体验，写过技术博客或架构文档的人都不陌生。
最近 GitHub 上一个新项目 firework-tech-graph 火了，它的核心能力很直接：只需用中文描述你的系统，几秒内就能生成可直接发布的 SVG 或 PNG 技术图。没错，一句“帮我画一张架构图”就能搞定。
fireworks-tech-graph 是什么
这个工具的本质，是将自然语言描述转化为精美的 SVG 技术图，再通过 cairosvg（推荐）导出高分辨率 PNG，同时也支持 rsvg-convert 和 puppeteer 作为备选。它内置了 7 种模板风格外加 1 种 AI 手绘风格（Dark Luxury），覆盖了 AI/Agent 领域的常见图类型，比如 RAG、Agentic Search、Mem0、Multi-Agent、Tool Call 流程等，并且完整支持全部 14 种 UML 图。项目在 GitHub 上已获得 7.8k stars，热度不言而喻。
它到底解决了什么痛点？
画图这件事，说起来轻巧，做起来真烦人。尤其写技术文档时，图的重要性不亚于文字，但画图本身极度耗时。几个常见痛点：
- 脑海里结构清晰，落到图里却慢如蜗牛
- Mermaid 适合快速表达，但视觉效果和复杂布局力不从心
- draw.io 功能强大，但手工拖拽成本高，不适合频繁改稿
- 当图服务于 AI、Agent、RAG、Memory 这些新领域时，通用工具根本找不到现成语义
fireworks-tech-graph 的价值，就是把“描述系统”直接转化为“生成图”，而且是端到端：从自然语言到 SVG，再到可直接嵌入博客和文档的 PNG。这一步跨越，省掉的不仅是时间，还有反复改稿的耐心消耗。
怎么用？上手很简单
安装这个 Skill 只需一行命令：
npx skills add yizhiyanhua-ai/fireworks-tech-graph
或者直接下载项目后导入到 AI 工具里。要导出 PNG，还需要装一个底层依赖：
# 推荐：cairosvg（CSS 支持最好）pip install cairosvg
装完之后，剩下的就是开口说话：
帮我画一张 fireworks-tech-graph 工作流程图，使用中文，导出png
Skill 会自动识别图类型、选定风格、生成 SVG，然后导出 1920px 的高清 PNG。整个过程基本无需手动调整。
不只是一键画图：几个核心亮点
这个项目之所以能火，不只是节省时间，而是设计上就有几个出彩之处。
8 种视觉风格，不是简单换肤
内置了 8 套精心设计的样式，不是统一画风，而是根据使用场景做了区分。这 8 套样式各自拥有独立的色彩系统、箭头样式和字体排版：
| 风格 | 特点 | 适用场景 |
|---|---|---|
| 扁平图标风 | 白底，彩色强调色 | 博客、技术文档 |
| 暗黑极客风 | 深色背景，霓虹配色 | GitHub README、开发者文章 |
| 工程蓝图风 | 深蓝底，网格线，青色描边 | 架构设计文档 |
| Notion 极简风 | 白底，单色箭头 | Notion、Confluence Wiki |
| 玻璃态卡片风 | 深色渐变，磨砂玻璃 | 产品官网、演讲 Keynote |
| Claude 官方风格 | 温暖奶油色背景 | Anthropic 风格图表 |
| OpenAI 官方风格 | 纯白背景，品牌配色 | OpenAI 风格图表 |
| 暗黑奢华风 | 深黑背景，香槟金点缀 | 展示型架构图 |
14 种图类型 + 完整 UML 支持
这个 Skill 不是简单的模板替换，它会在底层先对用户描述做图类型归类，再应用对应的布局规则。支持的图类型包括：架构图、数据流图、流程图、Agent 架构图、Memory 架构图、时序图、对比矩阵、时间线、思维导图。
| 类型 | 描述 | 关键布局规则 |
|---|---|---|
| 架构图 | 服务、组件、云基础设施 | 水平分层，自上而下 |
| 数据流图 | 数据在系统中的流向 | 每条箭头标注数据类型 |
| 流程图 | 决策树、流程步骤 | 菱形 = 决策，自上而下 |
| Agent 架构图 | LLM + 工具 + 记忆 | 五层模型：输入/Agent/记忆/工具/输出 |
| 记忆架构图 | Mem0、MemGPT 风格 | 读/写路径分离，记忆层级分明 |
| 序列图 | API 调用链、时序交互 | 垂直生命线，水平消息箭头 |
| 对比图 | 功能矩阵、方案比较 | 列 = 系统，行 = 属性 |
| 思维导图 | 概念地图、发散思维 | 中心节点，贝塞尔曲线分支 |
此外还有完整的 14 种 UML 图支持，包括类图、组件图、部署图、包图、用例图、活动图、状态机图、序列图等。
AI/Agent 领域内建知识
针对 AI/Agent 场景，它内置了一套领域模式识别能力。像 RAG Pipeline、Agentic Search、Mem0 记忆架构、Multi-Agent 协作、Tool Call 流程这些常见模式，不需要从零描述，直接说场景就能生成对应的领域图。更贴心的是，它还定义了一套语义形状词汇表：LLM 用双边框圆角矩形，Agent 用六边形，Vector Store 用带内环圆柱体，箭头颜色和虚线样式则编码了写入、读取、异步、循环等语义。这是真正在向开发者思维靠拢。
输出与验证工具链
它还提供了四个辅助脚本，让整个生成流程更稳定可控：generate-diagram.sh 用于验证 SVG 并导出 PNG，generate-from-template.py 用于快速创建起始 SVG，validate-svg.sh 单独校验 SVG 语法，test-all-styles.sh 批量测试所有风格。这套工具链意味着你不仅是在画一张图，而是在建立一个可复用的工程流程。
谁最值得用它？
这其实是一个很现实的问题。如果你属于下面几类人，那这个项目真的很对你的胃口：经常写技术博客、产品文档或方案文档的人；需要频繁画架构图、流程图、Agent 图，但不愿意每次都手动画的人；正在做 AI、Agent、RAG、Memory 相关内容输出的人；以及，希望把“描述需求 → 生成图 → 嵌入文章”这条链路尽量标准化的人。
写在最后
说实话，fireworks-tech-graph 把技术图这件事，从一次性的手工劳动，变成了一种可以沉淀、复用、批量生成的能力。在 AI/Agent 相关内容越来越密集的当下，能在几分钟内把脑海里的系统结构变成一张成熟的架构图，这本身就挺值钱的。