fireworks-tech-graph 调研：自然语言秒出出版级技术架构图，AI 编码 Agent 的制图skill资产化样本

一句话：用中英文描述系统，就能得到可直接嵌入文档的 1920px 高清技术架构图，而且不是 Mermaid 那种“能跑就行”的图。

技术人画架构图这件事，长期处于一个尴尬状态：要么是 Mermaid/PlantUML 语法太酸爽，写完先跟 DSL 搏斗五分钟；要么是 draw.io 拖到眼瞎，对齐线条占了 70% 时间；再不然就是找设计师，贵且慢。

fireworks-tech-graph 的出现，刚好卡在这三个选项中间：不是 DSL，不是 GUI，是自然语言直接出图 。而且它瞄准的是当前最热的 AI/Agent 架构场景，内置了大量领域模板和语义化图形词汇。这个项目值不值得看，核心不在“能不能画”，而在 它把“技术绘图”重新定义成了一个可封装、可复用、可进化的 Skill。

问题	传统做法	fireworks-tech-graph 的做法
画架构图要学 DSL	Mermaid/PlantUML	中文描述系统，自动生成
风格不统一	每人一套审美	8 种内置视觉风格，约束进生成器
AI/Agent 图难画	手工拼节点	内置 RAG/Multi-Agent/Tool Call 模板
导出质量差	截图 / 低分 SVG	1920px PNG + 可编辑 SVG
修改麻烦	拖拽重排	改描述重生成，分钟级迭代

基本信息

仓库：yizhiyanhua-ai/fireworks-tech-graph
定位：Claude Code 技术绘图 Skill
协议：见仓库根目录 LICENSE
规模：约 5k+ stars，约 726 commits
首版：2026-04-10 左右
最新活跃：2026-05-25 仍有 docs/feat 合并；5/11 切换默认 PNG 渲染器为 cairosvg
安装：npx skills add yizhiyanhua-ai/fireworks-tech-graph
渲染：cairosvg（推荐）/ rsvg-convert / puppeteer

编号	风格	一句话
1	Flat Icon	白底彩色，博客 / 幻灯片通用
2	Dark Terminal	暗黑极客风，GitHub README 友好
3	Blueprint	工程蓝图风，架构设计文档感
4	Notion Clean	极简白底，内部 Wiki/Confluence 友好
5	Glassmorphism	深色渐变 + 磨砂卡片，产品官网 /Keynote 感
6	Claude Official	温暖奶油色，Anthropic 品牌克制美学
7	OpenAI Official	纯白极简，OpenAI 品牌现代感
8	Dark Luxury	深黑 + 香槟金 + Georgia 衬线，AI 手绘风格

重点说两个：Style 8 不是模板，AI 会读取 references/style-8-dark-luxury.md 手工绘制 SVG；Style 6/7 是品牌级输出，适合做官方文档配图或对外演示。

14 种 UML：类图、组件图、部署图、包图、复合结构图、对象图、用例图、活动图、状态机图、序列图、通信图、时序图、交互概览图、ER 图
AI/Agent 领域图：RAG、Agentic Search、Mem0、Multi-Agent、Tool Call 等开箱即用

fireworks-tech-graph 跟 Mermaid、draw.io 最大的差别，不是好不好看，而是 有没有领域约束。

不是所有圆角矩形都一样：

LLM/ 模型 → 双边框圆角矩形 + ⚡
Agent/ 编排器 → 六边形
Vector Store → 带内环圆柱体
工具 / 函数 → 带 ⚙ 矩形
消息队列 → 横向管道
决策节点 → 菱形

这些形状不是文档里的建议，而是 直接进生成器逻辑。这意味着同一个“Agent 架构图”，不同人描述出来的形状语义是一致的。

颜色 + 虚线样式编码含义：

主数据流 → 2px 实线
控制 / 触发 → 1.5px 实线
记忆读取 → 1.5px 实线
记忆写入 → 1.5px + 5,3 虚线
异步 / 事件 → 1.5px + 4,2 虚线
反馈 / 循环 → 1.5px 曲线

这是很多架构图忽略的细节：箭头不只是“连接”，它在传输语义。

OpenAI、Anthropic、Pinecone、Weaviate、Kafka、PostgreSQL 等品牌色内置。对外技术博客里提到这些组件时，不用再去找 icon font 或手动填色。

复杂架构自动分层标注；Style 3 支持 01 // EDGE 这种工程编号分区标题，右下角 title block，真正接近工程制图规范。

渲染器	质量	成本	适用场景
cairosvg	✅ 好	一行 pip install	默认推荐
rsvg-convert	⚠️ 一般	系统包	无 Python 环境
puppeteer	✅✅ 最佳	Node + ~150MB Chromium	浏览器级像素还原

所有示例图均以 1920px 宽度 导出 PNG。README 特意强调：技术图应选 PNG，JPG 有损压缩会在文字和线条边缘产生噪点。

输出文件：
–
.svg：可编辑，适合二次调整
–
.png：1920px，直接嵌入文档 / 博客 / 演示

维度	Mermaid	draw.io	fireworks-tech-graph
自然语言输入	✗	✗	✅
AI/Agent 领域模板	✗	✗	✅
多视觉风格	手动	手动	8 种内置
高清 PNG 导出	✗	手动	✅ 1920px
语义箭头系统	✗	✗	✅
离线可用	✅	✗	✅
学习成本	低	中	低

结论：Mermaid 适合 markdown 内联小图；draw.io 适合手动精修；fireworks-tech-graph 适合“描述系统 → 立即得到可发布图” 的场景，三者不是替代关系，是补位。

npx skills add yizhiyanhua-ai/fireworks-tech-graph

pip install cairosvg

验证：

python3 -c "import cairosvg; print(cairosvg.__version__)"

# 在 Claude Code / OpenCode / Codex 中直接说：" 画一张 Mem0 记忆架构图，风格 1（Flat Icon）"
" 生成 Multi-Agent 协作图，玻璃态风格 "
" 画一张微服务架构图，风格 3（Blueprint）"

Skill 会自动识别图类型、匹配风格、生成 SVG、导出 1920px PNG。

平台绑定：本质是 Claude Code Skill，依赖 Claude/Codex/OpenClaw 类 agent 环境，不是独立 CLI 工具
模板天花板：8 种风格里 7 种是模板驱动，Style 8 Dark Luxury 才是 AI 手绘；极端小众场景可能选不准风格
渲染器限制：cairosvg 对 CSS/foreignObject 支持有限，复杂样式可能掉细节；puppeteer 最保真但体积大
商用边界：作者在 README 留了 design-partner / paid sprints 合作口子，需留意 LICENSE 对商业文档产出的限制
项目早期：2026-04 首版，5 月仍在迭代，插件生态刚开始，长期维护性待观察

fireworks-tech-graph 最值得注意的，不是“能画架构图”这个功能本身，而是 它把技术绘图封装成了 Skill：

自然语言 → 约束化生成 → 验证 → 导出，是一条完整的 pipeline
语义形状和箭头系统，说明作者在追求 可解释的图表规范，不是“出张好看的图就行”
8 种风格里混进 1 种 AI 手绘风格，说明它在探索 模板化与生成式之间的平衡点

对飞熊这类需要持续产出技术内容的场景，这个 Skill 的价值在于：把“配图”从创意劳动变成可复用的基础设施。下一篇写 Otto Robot 或 OpenClaw 架构时，可以直接用它生成配图，不用再跟 draw.io 搏斗。

三个最值得装的理由：
1. 中文自然语言直接出图，零学习成本
2. AI/Agent 领域模板开箱即用，不用自己画 RAG/Multi-Agent
3. 8 种风格 + 语义系统，博客 / 文档 / 演示图一张 Skill 搞定

先试一周：找一张你现在手头最头疼的架构图，用自然语言描述一遍，看看输出能不能直接进文档。

fireworks-tech-graph 调研：自然语言秒出出版级技术架构图，AI 编码 Agent 的制图skill资产化样本

写在前面

一、它解决什么问题

二、8 种视觉风格 + 14 种图类型

视觉风格

图类型

三、差异化能力：不是“能画”，是“画得对”

1. 语义形状词汇表

2. 语义箭头系统

3. 40+ 产品图标

4. 泳道 + 工程分区标题

四、渲染与输出

五、与 Mermaid / draw.io 对比

六、实战：3 步跑通

1. 安装 Skill

2. 准备渲染器

3. 用自然语言生成

七、风险与坑

八、总结

参考

近期文章

近期评论