8.3 KiB
8.3 KiB
title, type, tags, date, last_updated
| title | type | tags | date | last_updated |
|---|---|---|---|---|
| fireworks-tech-graph | source | 2026-04-18 | 2026-04-28 |
Source File
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
- 无冲突内容