zhouyinlong-lab Fireworks Tech Graph — 技术图生成器
停止手动画图。用自然语言描述你的系统，几秒钟得到可直接发布的 SVG + PNG 技术图。 基于 fireworks-tech-graph (8.7k+ stars, MIT 协议)。
核心亮点
- 自然语言输入 — 说人话就能出图，不需要写 Mermaid/PlantUML/Graphviz DSL
- 8 种视觉风格 — 扁平图标 / 暗黑极客 / 工程蓝图 / Notion 极简 / 玻璃态卡片 / Claude 官方 / OpenAI 官方 / 暗黑奢华
- 14 种图类型 — 完整 UML 14 图支持 + AI/Agent 领域专用图
- 语义化形状+箭头 — LLM=双边框矩形，Agent=六边形，箭头颜色+线型编码读写/异步/循环语义
- SVG + PNG 双输出 — SVG 可二次编辑，1920px PNG 直接嵌入文档
- Loop Engineering — 生成→校验→渲染→视觉复核→定向修正，有界收敛不无限循环
8 种视觉风格
| # | 名称 | 背景 | 适用场景 |
|---|---|---|---|
| 1 | 扁平图标风 (默认) | 白色 | 博客、文档、幻灯片 |
| 2 | 暗黑极客风 | #0f0f1a |
GitHub README、开发者文章 |
| 3 | 工程蓝图风 | #0a1628 |
架构设计文档 |
| 4 | Notion 极简风 | 白色 | Notion、Confluence、Wiki |
| 5 | 玻璃态卡片风 | 深色渐变 | 产品官网、Keynote |
| 6 | Claude 官方风格 | 暖奶油色 #f8f6f3 |
Anthropic 风格图 |
| 7 | OpenAI 官方风格 | 纯白 | OpenAI 风格图 |
| 8 | 暗黑奢华风 (AI手绘) | #0a0a0a |
高级文档、README Hero |
支持的图类型
通用技术图： 架构图 · 数据流图 · 流程图 · 序列图 · 对比矩阵 · 思维导图 · 时间线 · 网络拓扑
UML 全系（14种）： 类图 · 组件图 · 部署图 · 包图 · 复合结构图 · 对象图 · 用例图 · 活动图 · 状态机图 · 序列图 · 通信图 · 时序图 · 交互概览图 · ER 图
AI/Agent 领域 Pattern： RAG Pipeline · Agentic RAG · Agentic Search · Mem0 记忆架构 · Agent 记忆类型(5层) · Multi-Agent 协作 · Tool Call 执行流
使用示例
基础用法
画一张 RAG 流程图
Generate a microservices architecture diagram, dark terminal style
指定风格
画一张微服务架构图，风格 3（工程蓝图风）
Draw a multi-agent collaboration diagram --style glassmorphism
完整 Prompt（稳定输出）
画一张 Mem0 记忆架构图，扁平图标风。分四个横向区域：Input Layer、Memory Manager、
Storage Layer、Output / Retrieval。包含 User、LLM、Memory Manager、Vector Store、
Graph DB、Context Builder。使用 read/write/control/data 四类语义箭头。
安装与更新
本地安装（推荐，完整功能）
# Claude Code
git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.claude/skills/fireworks-tech-graph
# Codex
git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.agents/skills/fireworks-tech-graph
更新
git -C ~/.claude/skills/fireworks-tech-graph pull
依赖（PNG 导出需要）
# 推荐：cairosvg
python3 -m pip install cairosvg
# 备选：rsvg-convert
brew install librsvg # macOS
sudo apt install librsvg2-bin # Ubuntu/Debian
⚠️ 某些版本的
npx skills add只复制 SKILL.md，会漏掉references/、scripts/、templates/等目录。请使用git clone获得完整安装。
与 Mermaid/draw.io 对比
| Mermaid | draw.io | fireworks-tech-graph | |
|---|---|---|---|
| 自然语言输入 | ✗ | ✗ | ✅ |
| AI/Agent 领域 Pattern | ✗ | ✗ | ✅ |
| 多种视觉风格 | ✗ | 手动 | ✅ 8 种内置 |
| 高分辨率 PNG 导出 | ✗ | 手动 | ✅ 自动 1920px |
| 语义箭头 | ✗ | 手动 | ✅ 自动 |
文件结构
安装后的完整目录：
fireworks-tech-graph/
├── SKILL.md # 主 Skill 文件
├── references/ # 8 种风格 token + 图标库 + PNG导出指南
├── scripts/ # 生成/校验/导出脚本
├── templates/ # 各类型 SVG 模板
├── fixtures/ # 回归测试用例
├── tests/ # Validator 测试
└── assets/samples/ # 示例图 PNG
工作流程
- 分类 — 识别图类型（架构图/序列图/UML/...）
- 提取结构 — 从描述中识别层、节点、边、流
- 规划布局 — 按图类型布局规则排布
- 加载风格 — 默认风格 1，用户可指定风格 2-8
- 映射形状 — 按语义形状词汇表选形状
- 生成 SVG — Python list 方法逐行生成
- 校验 —
validate-svg.sh检查 XML/路径/箭头碰撞 - 导出 PNG — cairosvg 导出 1920px PNG
- 视觉复核 — 读回 PNG 检查裁切/重叠/标签位置
触发词
中英文均可触发：画图、帮我画、生成图、架构图、流程图、可视化、出图、generate diagram、draw diagram、create chart、visualize、architecture diagram、flowchart、sequence diagram、data flow、UML、ER图、网络拓扑、思维导图、RAG架构图、Agent架构图、微服务图、系统架构图、时序图、技术架构图、SVG