English | 中文

fireworks-tech-graph

无需再手动绘图。 用中文或英文描述你的系统，即可在数秒内获得可直接用于发布的高质量 SVG + PNG 技术架构图。

---

概览

fireworks-tech-graph 可以将自然语言描述转换为精美的 SVG 图表，并可通过 cairosvg（推荐）导出为高分辨率 PNG 图片。此外，也支持 rsvg-convert 和 puppeteer 作为替代方案。本项目内置了 7 种视觉风格，并深入涵盖了 AI/Agent 领域的设计模式（如 RAG、Agentic Search、Mem0、多智能体、工具调用流等），同时全面支持全部 14 种 UML 图表类型。

User: "Generate a Mem0 memory architecture diagram, dark style"
  → Skill classifies: Memory Architecture Diagram, Style 2
  → Generates SVG with swim lanes, cylinders, semantic arrows
  → Exports 1920px PNG
  → Reports: mem0-architecture.svg / mem0-architecture.png

---

与开发者合作

本项目展示了一项更广泛的能力：将模糊的 AI/开发工具工作流转化为带有验证、文档、导出路径和产品级美感的约束性可重用系统。

如果你正在构建 Agent 基础设施、AI IDE、内部 Copilot、开发工具、技术文档系统或应用级 AI 工作流产品，我欢迎各种形式的付费冲刺（Sprint）、设计伙伴合作以及创始工程师职位的沟通。

• 创始人简介：https://bradzhang.dev/en
• 商业案例研究：https://bradzhang.dev/en/case-studies/fireworks-tech-graph
• 与我合作：https://bradzhang.dev/en/work-with-me

---

展示

所有示例均通过 cairosvg 导出为 1920px 宽度（2× Retina）。PNG 格式由于无损特性，是技术图表的理想选择——线条清晰锐利，且文字/线条不会产生 JPEG 的压缩伪影。

风格 1 — Flat Icon (默认)

Mem0 内存架构 — 白色背景，语义化箭头，分层内存系统

风格 2 — Dark Terminal

工具调用流 — 深色背景，霓虹色强调，等宽字体

风格 3 — Blueprint

微服务架构 — 深蓝色背景，网格线条，青色笔触

风格 4 — Notion Clean

Agent 内存类型 — 极简白色，单一强调色

风格 5 — Glassmorphism

多智能体协作 — 深色渐变背景，磨砂玻璃质感卡片

风格 6 — Claude Official

系统架构 — 温暖的乳白色背景 (#f8f6f3)，Anthropic 品牌配色，专业整洁的审美

风格 7 — OpenAI Official

API 集成流 — 纯白背景，OpenAI 品牌色板，现代简约设计

---

稳定的 Prompt 配方

当你希望模型输出最符合仓库回归测试效果的图表时，可以使用以下 Prompt：

风格 1 — Flat Icon

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. Keep the layout clean and product-doc friendly.

风格 2 — Dark Terminal

Draw a tool call flow diagram in style 2 (Dark Terminal).
Show User query, Retrieve chunks, Generate answer, Knowledge base, Agent, Terminal, Source documents, and Grounded answer.
Use terminal chrome, neon accents, monospace typography, and semantic arrows for retrieval, synthesis, and embedding update.

风格 3 — Blueprint

Draw a microservices architecture diagram in style 3 (Blueprint).
Create numbered engineering sections like 01 // EDGE, 02 // APPLICATION SERVICES, 03 // DATA + EVENT INFRA, 04 // OBSERVABILITY.
Include Client Apps, API Gateway, Auth / Policy, three services, Event Router, Postgres, Redis Cache, Warehouse, and Metrics / Traces.
Use blueprint grid, cyan strokes, and a bottom-right title block.

风格 4 — Notion Clean

Draw an agent memory types diagram in style 4 (Notion Clean).
Compare Sensory Memory, Working Memory, Episodic Memory, and Long-term Memory.