告别手动画图！用自然语言秒出出版级技术架构图，7 种风格任意选
💡 还在用 draw.io 一个个拖组件？还在写 Mermaid 语法调半天样式？这个项目让你直接说中文描述系统，秒出 SVG + PNG 高清架构图！
📌 先看效果
技术人画架构图有多痛苦？要么打开 draw.io 照着模板拖拽半小时，要么写 Mermaid 语法然后对着渲染结果反复调样式。更别提想换个风格就得重来一遍。
fireworks-tech-graph直接颠覆了这个流程——用自然语言描述你的系统，秒出出版级 SVG + PNG 技术架构图，7 种视觉风格任选，14 种 UML 图全支持，还内置 AI/Agent 领域专属模式。
你："生成一个 Mem0 记忆架构图，暗色风格" → 自动分类：Memory Architecture Diagram，Style 2 → 生成 SVG：泳道、圆柱体、语义箭头 → 导出 1920px PNG → 输出：mem0-architecture.svg / mem0-architecture.png一行描述，从想法到成品图，中间零手工操作。
🎯 它能做什么？
| 特性 | 说明 |
|---|---|
| 🎨7 种视觉风格 | Flat Icon、Dark Terminal、Blueprint、Notion Clean、Glassmorphism、Claude Official、OpenAI Official |
| 📊14 种 UML 图 | 类图、组件图、部署图、包图、序列图、活动图、状态机图等全支持 |
| 🤖AI/Agent 领域模式 | RAG、Agentic Search、Mem0、Multi-Agent、Tool Call 等内置模板 |
| 🔤语义形状体系 | LLM = 双边框矩形、Agent = 六边形、Vector Store = 带环圆柱体 |
| ➡️语义箭头系统 | 颜色 + 虚线模式编码含义（写入 vs 读取 vs 异步 vs 循环） |
| 🏷️40+ 产品图标 | OpenAI、Anthropic、Pinecone、Weaviate、Kafka、PostgreSQL 等，自带品牌色 |
| 🏊泳道分组 | 复杂架构自动分层标签 |
| 📐SVG + PNG 双输出 | SVG 可编辑，1920px PNG（2× Retina）可直接嵌入 |
| 🌐中英双语 | 用中文或英文描述都行 |
🚀 快速上手
安装（Claude Code Skill）
# 方式一：通过 skills CLI 安装（推荐）npx skillsaddyizhiyanhua-ai/fireworks-tech-graph# 方式二：直接克隆gitclone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.claude/skills/fireworks-tech-graph安装依赖
# macOSbrewinstalllibrsvg# Ubuntu/Debiansudoaptinstalllibrsvg2-bin# 验证安装rsvg-convert--version💡
rsvg-convert用于将 SVG 转为高分辨率 PNG，必须安装。
一键出图
Draw a RAG pipeline flowchart生成一个 Agentic Search 架构图画一个微服务架构图，暗色终端风格Draw a multi-agent collaboration diagram --style glassmorphism没错，就这么简单——直接用自然语言描述你要什么图。
🔍 7 种风格详解
| # | 风格名 | 背景 | 字体 | 最佳场景 |
|---|---|---|---|---|
| 1 | Flat Icon（默认） | #ffffff白色 | Helvetica | 博客、幻灯片、文档 |
| 2 | Dark Terminal | #0f0f1a深色 | SF Mono / Fira Code | GitHub README、技术文章 |
| 3 | Blueprint | #0a1628深蓝 | Courier New | 架构文档、工程设计 |
| 4 | Notion Clean | #ffffff白色 | system-ui | Notion、Confluence、Wiki |
| 5 | Glassmorphism | #0d1117渐变 | Inter | 产品官网、Keynote 演示 |
| 6 | Claude Official | #f8f6f3暖白 | system-ui | Anthropic 风格图、暖色调美学 |
| 7 | OpenAI Official | #ffffff纯白 | system-ui | OpenAI 风格图、现代简约 |
UML 图风格推荐
| UML 图类型 | 推荐风格 | 理由 |
|---|---|---|
| 类图/组件图/包图 | Style 1（Flat Icon）或 Style 4（Notion Clean） | 结构清晰，易读 |
| 序列图/时序图 | Style 2（Dark Terminal） | 等宽字体对齐效果好 |
| 状态机/活动图 | Style 3（Blueprint） | 工程美学适合流程图 |
| AI/Agent 架构图 | Style 5（Glassmorphism）或 Style 2 | 视觉冲击力强 |
📋 实战场景与 Prompt 示例
AI/Agent 系统图
Compare Agentic RAG vs standard RAG in a feature matrix, Notion clean style→ 对比矩阵：RAG vs Agentic RAG，涵盖检索策略、Agent 循环、工具使用
生成一个 Mem0 记忆架构图，包含 Vector Store、Graph DB、KV Store 和 Memory Manager→ 记忆架构泳道图：Input → Memory Manager → 存储层 → 检索
Draw a Multi-Agent diagram: Orchestrator dispatches 3 SubAgents (search / compute / code execution), results aggregated→ Agent 架构图：六边形 Agent、工具层、结果聚合
基础设施 & 云架构
画一个微服务架构图：Client → API Gateway → [User Service / Order Service / Payment Service] → PostgreSQL + Redis→ 分层架构图，每个服务集群自动泳道
Draw a Kubernetes deployment: Ingress → Service → [Pod × 3] → ConfigMap + PersistentVolume→ 命名空间虚线容器 + 流量实线箭头
API & 时序图
Draw an OAuth2 authorization code flow sequence diagram: User → Client → Auth Server → Resource Server→ 序列图：垂直生命线 + 激活框
⚖️ 为什么不用 Mermaid 或 draw.io？
| 能力 | Mermaid | draw.io | fireworks-tech-graph |
|---|---|---|---|
| 自然语言输入 | ✗ | ✗ | ✅ |
| AI/Agent 领域模式 | ✗ | ✗ | ✅ |
| 多种视觉风格 | ✗ | 手动调 | ✅ 7 种内置 |
| 高清 PNG 导出 | ✗ | 手动导 | ✅ 自动 1920px |
| 语义箭头颜色 | ✗ | 手动设 | ✅ 自动 |
| 无需在线工具 | ✅ | ✗ | ✅ |
💡Mermaid适合 Markdown 里快速画简单图；draw.io适合手动精修；fireworks-tech-graph适合"描述系统 → 立即获得精美架构图"，不写 DSL 语法，不点 GUI。
🔍 核心设计亮点
语义形状体系
不是所有方块都一样——不同类型用不同形状编码：
| 实体类型 | 形状 | 示例 |
|---|---|---|
| LLM | 双边框矩形 | GPT-4、Claude |
| Agent | 六边形 | Coordinator Agent |
| Vector Store | 带环圆柱体 | Pinecone、Weaviate |
| Database | 圆柱体 | PostgreSQL |
| Service | 圆角矩形 | API Gateway |
语义箭头系统
箭头的颜色和虚线模式自动编码含义：
| 箭头类型 | 视觉编码 | 含义 |
|---|---|---|
| 写入 | 实线 + 特定色 | 数据写入操作 |
| 读取 | 虚线 + 特定色 | 数据读取操作 |
| 异步 | 点线 | 异步消息传递 |
| 循环 | 双向箭头 | 循环/反馈流 |
产品图标库
内置 40+ 产品图标，自带品牌色：OpenAI、Anthropic、Pinecone、Weaviate、Kafka、PostgreSQL 等，架构图里的组件不再是匿名方块。
⚖️ 优缺点分析
| 维度 | 评分 | 说明 |
|---|---|---|
| 易用性 | ⭐⭐⭐⭐⭐ | 自然语言输入，零学习成本 |
| 视觉质量 | ⭐⭐⭐⭐⭐ | 出版级 SVG + 1920px Retina PNG |
| 风格丰富度 | ⭐⭐⭐⭐⭐ | 7 种风格覆盖主流场景 |
| AI 领域适配 | ⭐⭐⭐⭐⭐ | RAG/Agent/Mem0 等内置模板 |
| 工程质量 | ⭐⭐⭐⭐ | 风格系统可执行，非仅文档描述 |
| 生态 | ⭐⭐⭐ | Claude Code Skill 生态，依赖 rsvg-convert |
适合人群：
- 🎯 AI/Agent 开发者——快速生成架构图用于文档和演示
- 🎯 技术博主——文章配图不再手动画
- 🎯 架构师——系统设计文档需要专业配图
- 🎯 Claude Code 用户——Skill 原生集成，随用随画
目前不足：
- 依赖
rsvg-convert，Windows 安装稍麻烦 - 作为 Claude Code Skill，目前主要在 Claude Code 环境下使用
- 非常复杂的定制布局可能仍需手动微调 SVG
- 产品图标库虽丰富但未覆盖所有产品
📚 总结
fireworks-tech-graph 用"自然语言输入 → 语义理解 → 7 种风格渲染 → SVG + PNG 双输出"的流程，彻底改变了技术架构图的制作方式。语义形状体系和箭头系统让图不只是好看，更是信息精准；AI/Agent 领域模板让 LLM 时代的架构图有了专属表达；而 Claude Code Skill 的集成方式让它在开发者工作流中无缝切入。
如果你受够了手动画架构图，试试这个——一句话出图，7 种风格任选，从此告别拖拽和 DSL。
🌟推荐指数：⭐⭐⭐⭐⭐
📢 项目地址：https://github.com/yizhiyanhua-ai/fireworks-tech-graph
📦 NPM 包：https://www.npmjs.com/package/@yizhiyanhua-ai/fireworks-tech-graph
👨💻 作者主页：https://bradzhang.dev/en
标签：#架构图 #SVG #技术文档 #ClaudeCode #AI架构 #Mermaid替代
