160 lines
8.3 KiB
Markdown
160 lines
8.3 KiB
Markdown
---
|
||
title: "fireworks-tech-graph"
|
||
type: source
|
||
tags: []
|
||
date: 2026-04-18
|
||
last_updated: 2026-04-28
|
||
---
|
||
|
||
## Source File
|
||
- [[raw/Skills/fireworks-tech-graph.md]]
|
||
|
||
## Summary（用中文描述）
|
||
- 核心主题：用自然语言描述系统，几秒内生成可直接发布的 SVG + PNG 技术图
|
||
- 问题域：技术文档/博客/演示缺乏高质量可视化图表，手动绘图耗时且风格不统一
|
||
- 方法/机制：内置 7 种视觉风格（扁平图标/暗黑极客/工程蓝图/Notion极简/玻璃态/Claude官方/OpenAI官方）、14 种 UML 图类型、AI/Agent 领域内建 Pattern，通过 `rsvg-convert` 导出 1920px PNG
|
||
- 结论/价值：AI Agent 可快速生成专业级技术图，无需手动绘制，支持 SVG 可编辑 + PNG 无损发布
|
||
|
||
## Key Claims（用中文描述）
|
||
- fireworks-tech-graph 将自然语言描述转化为精美的 SVG 技术图，通过 rsvg-convert 导出高分辨率 PNG
|
||
- 内置 7 种视觉风格，深度覆盖 AI/Agent 领域常见图类型（RAG、Agentic Search、Mem0、Multi-Agent、Tool Call 流程等）
|
||
- 完整支持全部 14 种 UML 图类型
|
||
- AI/Agent 领域内建知识：RAG、Agentic Search、Mem0、Multi-Agent、Tool Call 等常见 Pattern 开箱即用
|
||
- 语义形状词汇表：LLM = 双边框圆角矩形，Agent = 六边形，Vector Store = 带内环圆柱
|
||
- 语义箭头系统：颜色 + 虚线样式编码含义（写入/读取/异步/循环）
|
||
- SVG + PNG 双输出：SVG 可编辑，1920px PNG 可直接嵌入文章
|
||
|
||
## Key Quotes
|
||
> "不用手画图了。用中文描述你的系统，几秒钟得到可直接发布的 SVG + PNG 技术图。" — 项目 tagline
|
||
> "所有示例图均以 1920px 宽度（2× 视网膜分辨率）通过 rsvg-convert 导出为 PNG 格式。技术图应选 PNG（无损），JPG 有损压缩会在文字和线条边缘产生噪点。" — 导出格式建议
|
||
|
||
## 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 风格图表，简洁现代设计 |
|
||
|
||
### 风格选择指南
|
||
- **UML 图类型**：类图/组件图/包图 → 风格 1 或 4；序列图/时序图 → 风格 2；状态机图/活动图 → 风格 3
|
||
- **AI/Agent 图类型**：RAG/Agentic Search → 风格 2 或 5；记忆架构 → 风格 3；Multi-Agent → 风格 5
|
||
- **品牌特定**：Anthropic/Claude 项目 → 风格 6；OpenAI 项目 → 风格 7
|
||
|
||
## 语义形状词汇表
|
||
|
||
形状在所有风格中保持一致的语义：
|
||
|
||
| 概念 | 形状 |
|
||
|------|------|
|
||
| 用户 / 人类 | 圆形 + 身体路径 |
|
||
| LLM / 模型 | 圆角矩形，双边框，⚡ |
|
||
| Agent / 编排器 | 六边形 |
|
||
| 短期记忆 | 虚线边框圆角矩形 |
|
||
| 长期记忆 | 实线圆柱体 |
|
||
| Vector Store | 带内环圆柱 |
|
||
| Graph DB | 三圆簇 |
|
||
| 工具 / 函数 | 带 ⚙ 的矩形 |
|
||
| API / 网关 | 六边形（单边框） |
|
||
| 消息队列 / 流 | 横向管道 |
|
||
| 文档 / 文件 | 折角矩形 |
|
||
| 浏览器 / UI | 带三点标题栏的矩形 |
|
||
| 决策节点 | 菱形 |
|
||
| 外部服务 | 虚线边框矩形 |
|
||
|
||
## 语义箭头系统
|
||
|
||
| 流类型 | 线宽 | 虚线 | 含义 |
|
||
|--------|------|------|------|
|
||
| 主数据流 | 2px 实线 | — | 主要请求/响应路径 |
|
||
| 控制 / 触发 | 1.5px 实线 | — | 系统 A 触发 B |
|
||
| 记忆读取 | 1.5px 实线 | — | 从存储检索 |
|
||
| 记忆写入 | 1.5px | `5,3` | 写入/存储操作 |
|
||
| 异步 / 事件 | 1.5px | `4,2` | 非阻塞 |
|
||
| 反馈 / 循环 | 1.5px 曲线 | — | 迭代推理 |
|
||
|
||
## 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
|
||
Agent 记忆类型 → 感知记忆 → 工作记忆 → 情景记忆 → 语义记忆 → 程序记忆
|
||
Multi-Agent → Orchestrator → [SubAgent×N] → Aggregator → Output
|
||
Tool Call 流程 → LLM → Tool Selector → Execution → Parser → LLM (循环)
|
||
```
|
||
|
||
## 支持的图类型
|
||
|
||
| 类型 | 描述 | 关键布局规则 |
|
||
|------|------|-------------|
|
||
| **架构图** | 服务、组件、云基础设施 | 水平分层，自上而下 |
|
||
| **数据流图** | 数据在系统中的流向 | 每条箭头标注数据类型 |
|
||
| **流程图** | 决策树、流程步骤 | 菱形 = 决策，自上而下 |
|
||
| **Agent 架构图** | LLM + 工具 + 记忆 | 五层模型：输入/Agent/记忆/工具/输出 |
|
||
| **记忆架构图** | Mem0、MemGPT 风格 | 读/写路径分离，记忆层级分明 |
|
||
| **序列图** | API 调用链、时序交互 | 垂直生命线，水平消息箭头 |
|
||
| **对比图** | 功能矩阵、方案比较 | 列 = 系统，行 = 属性 |
|
||
| **思维导图** | 概念地图、发散思维 | 中心节点，贝塞尔曲线分支 |
|
||
|
||
### UML 图类型（14 种）
|
||
|
||
| UML 类型 | 描述 | 推荐风格 |
|
||
|----------|------|----------|
|
||
| **类图** | 类、属性、方法、关系 | 风格 1, 4 |
|
||
| **组件图** | 软件组件和依赖关系 | 风格 1, 3 |
|
||
| **部署图** | 硬件节点和软件部署 | 风格 3 |
|
||
| **包图** | 包组织和依赖关系 | 风格 1, 4 |
|
||
| **复合结构图** | 类/组件的内部结构 | 风格 1, 3 |
|
||
| **对象图** | 对象实例和关系 | 风格 1, 4 |
|
||
| **用例图** | 参与者、用例、系统边界 | 风格 1 |
|
||
| **活动图** | 工作流、并行流程 | 风格 3 |
|
||
| **状态机图** | 状态转换和事件 | 风格 2, 3 |
|
||
| **序列图** | 时间顺序的消息交换 | 风格 2 |
|
||
| **通信图** | 对象交互和消息 | 风格 1, 2 |
|
||
| **时序图** | 状态随时间的变化 | 风格 2 |
|
||
| **交互概览图** | 高层交互流程 | 风格 1, 2 |
|
||
| **ER 图** | 实体关系数据模型 | 风格 1, 3 |
|
||
|
||
## 产品图标覆盖范围
|
||
|
||
**AI/ML 模型：** OpenAI、Anthropic/Claude、Google Gemini、Meta LLaMA、Mistral、Cohere、Groq、Hugging Face
|
||
|
||
**AI 框架：** Mem0、LangChain、LlamaIndex、LangGraph、CrewAI、AutoGen、DSPy、Haystack
|
||
|
||
**向量数据库：** Pinecone、Weaviate、Qdrant、Chroma、Milvus、pgvector、Faiss
|
||
|
||
**关系型/NoSQL 数据库：** PostgreSQL、MySQL、MongoDB、Redis、Elasticsearch、Neo4j、Cassandra
|
||
|
||
**消息队列：** Kafka、RabbitMQ、NATS、Pulsar
|
||
|
||
**云服务 & 基础设施：** AWS、GCP、Azure、Cloudflare、Vercel、Docker、Kubernetes
|
||
|
||
**可观测性：** Grafana、Prometheus、Datadog、LangSmith、Langfuse、Arize
|
||
|
||
## Key Concepts
|
||
- [[技术图生成]]：用自然语言生成 SVG/PNG 格式的技术架构图、流程图、UML 图
|
||
- [[7种视觉风格系统]]：扁平图标风（默认）、暗黑极客风、工程蓝图风、Notion极简风、玻璃态卡片风、Claude官方风格、OpenAI官方风格
|
||
- [[语义形状词汇表]]：每种概念类型（LLM/Agent/VectorStore/工具等）对应特定 SVG 形状
|
||
- [[语义箭头系统]]：颜色 + 虚线样式编码数据流向（主数据流/控制触发/记忆读取/记忆写入/异步/反馈循环）
|
||
- [[14种UML图]]：类图/组件图/部署图/包图/复合结构图/对象图/用例图/活动图/状态机图/序列图/通信图/时序图/交互概览图/ER图
|
||
|
||
## Key Entities
|
||
- [[fireworks-tech-graph]]：Claude Code Skill，将自然语言转化为 SVG 技术图，支持 7 种风格和 14 种 UML 图类型
|
||
- [[rsvg-convert]]：librsvg 工具，用于将 SVG 渲染为高分辨率 PNG
|
||
|
||
## Connections
|
||
- [[fireworks-tech-graph]] ← uses ← [[语义形状词汇表]]
|
||
- [[fireworks-tech-graph]] ← uses ← [[语义箭头系统]]
|
||
- [[fireworks-tech-graph]] ← implements ← [[7种视觉风格系统]]
|
||
- [[fireworks-tech-graph]] ← supports ← [[14种UML图]]
|
||
- [[fireworks-tech-graph]] ← outputs ← [[rsvg-convert]]
|
||
|
||
## Contradictions
|
||
- 无冲突内容
|