115 lines
3.7 KiB
Markdown
Executable File
115 lines
3.7 KiB
Markdown
Executable File
---
|
||
title: fireworks-tech-graph 技术图生成工具
|
||
tags:
|
||
- AI工具
|
||
- 技术图
|
||
- SVG
|
||
- ClaudeCode-Skill
|
||
- 开源
|
||
created: 2026-04-21
|
||
source: https://github.com/yizhiyanhua-ai/fireworks-tech-graph
|
||
stars: 3862
|
||
forks: 338
|
||
language: Python
|
||
---
|
||
|
||
# fireworks-tech-graph
|
||
|
||
> 不用手画图了。用中文描述你的系统，几秒钟得到可直接发布的 **SVG + PNG** 技术图。
|
||
|
||
## 概述
|
||
|
||
将自然语言描述转化为精美的 SVG 技术图，并通过 `rsvg-convert` 导出高分辨率 PNG。内置 **7 种视觉风格**，深度覆盖 AI/Agent 领域常见图类型，并完整支持全部 14 种 UML 图类型。
|
||
|
||
## 7 种视觉风格
|
||
|
||
| # | 名称 | 背景色 | 字体 | 适用场景 |
|
||
|---|------|--------|------|----------|
|
||
| 1 | 扁平图标风（默认） | `#ffffff` | Helvetica | 博客、幻灯片、技术文档 |
|
||
| 2 | 暗黑极客风 | `#0f0f1a` | SF Mono / Fira Code | GitHub README、开发者文章 |
|
||
| 3 | 工程蓝图风 | `#0a1628` | Courier New | 架构设计文档、工程规范 |
|
||
| 4 | Notion 极简风 | `#ffffff` | system-ui | Notion、Confluence、内部 Wiki |
|
||
| 5 | 玻璃态卡片风 | `#0d1117` 渐变 | Inter | 产品官网、演讲 Keynote |
|
||
| 6 | Claude 官方风格 | `#f8f6f3` | system-ui | Anthropic 风格图表 |
|
||
| 7 | OpenAI 官方风格 | `#ffffff` | system-ui | OpenAI 风格图表 |
|
||
|
||
## 支持的图类型
|
||
|
||
### AI/Agent 领域（内置 Pattern）
|
||
|
||
| 类型 | 流程 |
|
||
|------|------|
|
||
| RAG Pipeline | Query → Embed → VectorSearch → Retrieve → LLM → Response |
|
||
| Agentic RAG | RAG + Agent 循环 + 工具调用 |
|
||
| Agentic Search | Query → Planner → [Search/Calc/Code] → Synthesizer |
|
||
| Mem0 记忆层 | Input → Memory Manager → [VectorDB + GraphDB] → Context |
|
||
| Multi-Agent | Orchestrator → [SubAgent×N] → Aggregator → Output |
|
||
| Tool Call 流程 | LLM → Tool Selector → Execution → Parser → LLM（循环） |
|
||
|
||
### UML 支持（14 种）
|
||
|
||
类图、组件图、部署图、包图、复合结构图、对象图、用例图、活动图、状态机图、序列图、通信图、时序图、交互概览图、ER 图
|
||
|
||
## 形状词汇表
|
||
|
||
| 概念 | 形状 |
|
||
|------|------|
|
||
| 用户 / 人类 | 圆形 + 身体路径 |
|
||
| LLM / 模型 | 圆角矩形，双边框，⚡ |
|
||
| Agent / 编排器 | 六边形 |
|
||
| 短期记忆 | 虚线边框圆角矩形 |
|
||
| 长期记忆 | 实线圆柱体 |
|
||
| Vector Store | 带内环圆柱 |
|
||
| Graph DB | 三圆簇 |
|
||
| 工具 / 函数 | 带 ⚙ 的矩形 |
|
||
| API / 网关 | 六边形（单边框） |
|
||
| 消息队列 / 流 | 横向管道 |
|
||
| 决策节点 | 菱形 |
|
||
|
||
## 箭头语义
|
||
|
||
| 流类型 | 样式 | 含义 |
|
||
|--------|------|------|
|
||
| 主数据流 | 2px 实线 | 主要请求/响应路径 |
|
||
| 控制 / 触发 | 1.5px 实线 | 系统 A 触发 B |
|
||
| 记忆读取 | 1.5px 实线 | 从存储检索 |
|
||
| 记忆写入 | 1.5px 虚线 `5,3` | 写入/存储操作 |
|
||
| 异步 / 事件 | 1.5px 虚线 `4,2` | 非阻塞 |
|
||
| 反馈 / 循环 | 1.5px 曲线 | 迭代推理 |
|
||
|
||
## 安装
|
||
|
||
```bash
|
||
npx skills add yizhiyanhua-ai/fireworks-tech-graph
|
||
|
||
# 依赖
|
||
brew install librsvg # macOS
|
||
sudo apt install librsvg2-bin # Ubuntu/Debian
|
||
```
|
||
|
||
## 使用方式
|
||
|
||
触发词：`画图 / 帮我画 / 生成图 / 做个图 / 架构图 / 流程图`
|
||
|
||
```text
|
||
画一张 RAG 流程图
|
||
生成一张 Agentic Search 架构图
|
||
画一张微服务架构图，风格2（暗黑极客风）
|
||
```
|
||
|
||
## 评分
|
||
|
||
⭐⭐⭐⭐⭐（5/5）
|
||
|
||
**优点**：
|
||
- 7 种风格覆盖所有场景
|
||
- 内置 AI/Agent 领域知识，开箱即用
|
||
- 语义形状 + 箭头系统，图示专业
|
||
- 中文支持友好
|
||
|
||
**局限**：
|
||
- 需要 Claude Code 或兼容 Skill 运行时
|
||
- 依赖 rsvg-convert 工具
|
||
|
||
**适合场景**：技术博客配图、架构文档、PPT 素材、GitHub README
|