Auto-sync: 2026-04-28 16:03

2026-04-28 16:03:03 +08:00
parent f8b421ece6
commit 365caa800a
48 changed files with 1942 additions and 1249 deletions
--- a/wiki/sources/fireworks-tech-graph.md
+++ b/wiki/sources/fireworks-tech-graph.md
@@ -1,49 +1,159 @@
---
-title: "fireworks-tech-graph"
-type: source
-tags: []
-date: 2026-04-18
---
-
-## 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 有损压缩会在文字和线条边缘产生噪点。" — 导出格式建议
-
-## 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
- 无冲突内容
+---
+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
+- 无冲突内容