# fireworks-tech-graph 技术图表生成 Skill

> 自然语言描述生成专业 SVG+PNG 技术图表
>
> 归档：2026-04-22

---

## 项目信息

| 项目 | 数据 |
|------|------|
| **仓库** | https://github.com/yizhiyanhua-ai/fireworks-tech-graph |
| **Stars** | ⭐ 4,168 |
| **Forks** | 364 |
| **最后更新** | 2026-04-20 |
| **许可证** | MIT |
| **定位** | Claude Code 专用 Skill |

---

## 核心功能

| 功能 | 说明 |
|------|------|
| 🗣️ **自然语言驱动** | 直接用中文/英文描述图表，无需拖拽 |
| 📐 **8 种图表类型** | UML 全部 14 种 + AI/Agent 专用图 |
| 🎨 **7 种视觉风格** | Flat、Dark、Blueprint、Notion、Glass、Claude官方、OpenAI官方 |
| 🖼️ **SVG + PNG 输出** | SVG 可编辑，PNG 1920px 高清 |
| 🤖 **AI/Agent 领域知识** | 内置 RAG、Mem0、Multi-Agent、Tool Call 等模式 |

---

## 7 种视觉风格

| # | 风格 | 适用场景 |
|---|------|---------|
| 1 | Flat Icon | 扁平化产品文档 |
| 2 | Dark Terminal | 暗黑终端风格 |
| 3 | Blueprint | 工程蓝图风格 |
| 4 | Notion Clean | 极简白底 |
| 5 | Glassmorphism | 磨砂玻璃风格 |
| 6 | Claude Official | Anthropic 品牌色 |
| 7 | OpenAI Official | OpenAI 品牌色 |

---

## AI/Agent 领域专用图案

| 图案类型 | 说明 |
|---------|------|
| RAG | 检索增强生成流程 |
| Mem0 | 记忆架构 |
| Multi-Agent | 多智能体协作 |
| Tool Call | 工具调用流程 |
| Agentic Search | 智能体搜索 |

---

## 语义图形词汇

| 元素 | 图形 |
|------|------|
| LLM | 双边框矩形 |
| Agent | 六边形 |
| Vector Store | 带环圆柱体 |
| 数据库 | 圆柱体 |

---

## 语义箭头系统

| 箭头类型 | 含义 |
|---------|------|
| 实线箭头 | 数据流 |
| 虚线箭头 | 异步/控制流 |
| 颜色区分 | write vs read vs loop |

---

## 安装方式（Claude Code）

```bash
npx skills add yizhiyanhua-ai/fireworks-tech-graph --force -g -y
```

**依赖**：
```bash
# macOS
brew install librsvg

# Ubuntu/Debian
sudo apt install librsvg2-bin

# 验证
rsvg-convert --version
```

---

## 优势对比

| 对比项 | Mermaid | draw.io | fireworks-tech-graph |
|--------|---------|---------|---------------------|
| 自然语言输入 | ❌ | ❌ | ✅ |
| AI/Agent 领域图 | ❌ | ❌ | ✅ |
| 多种视觉风格 | ❌ | 手动 | ✅ 7种内置 |
| 高清 PNG 导出 | ❌ | 手动 | ✅ 自动 1920px |
| 语义箭头颜色 | ❌ | 手动 | ✅ 自动 |
| 无需在线工具 | ✅ | ❌ | ✅ |

---

## OpenClaw 兼容性

⚠️ **这是 Claude Code 专用 Skill**，OpenClaw 不能直接使用。

**原因**：
- OpenClaw 使用 Skill 系统（clawhub）
- Claude Code 的 `skills add` 命令是 Claude Code 特有的

**解决方案**：
- 手动适配：克隆仓库，提取 prompt 和模板，转换为 OpenClaw 格式

---

## 使用示例

```
Draw a Mem0 memory architecture diagram in style 1 (Flat Icon).
Use four horizontal sections: Input Layer, Memory Manager, Storage Layer, Output / Retrieval.
Include User, AI App / Agent, LLM, mem0 Client, Memory Manager, Vector Store, Graph DB, Key-Value Store, History Store, Context Builder, Ranked Results, Personalized Response.
Use semantic arrows for read, write, control, and data flow.
```

---

## 相关资源

| 资源 | 链接 |
|------|------|
| GitHub | https://github.com/yizhiyanhua-ai/fireworks-tech-graph |
| npm | https://www.npmjs.com/package/@yizhiyanhua-ai/fireworks-tech-graph |

---

## AI工程索引

其他笔记：
- [[INDEX_AI工程]] - AI工程知识索引

---

*整理：知识库管理员 | 归档：2026-04-22*