告别手动画图：用自然语言生成可直接发布的 SVG+PNG 技术图

来源：互联网时间：2026-06-18 07:32:52

你是不是也经历过？脑海里结构清晰，可一落到画图工具里就犯了难——要么在 draw.io 里拖拽半天图，要么跟 Mermaid 的 DSL 语法较劲。这种纠结，写过技术博客、做过架构文档的人都懂。

最近 GitHub 上冒出一个项目叫 fireworks-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 相关内容输出的人；以及，希望把“描述需求 → 生成图 → 嵌入文章”这条链路尽量标准化的人。