Say Goodbye to Manual Diagramming: The Open‑Source AI Tool That’s Turning Heads

Problem with manual diagramming

Creating architecture, component, or post‑mortem diagrams with tools such as Draw.io or Visio requires dragging components, aligning arrows, finding icons, and adding annotations. A few minutes of mental design can become hours of manual effort.

fireworks‑tech‑graph overview

fireworks‑tech‑graph is an open‑source AI diagram skill (13.8K GitHub stars as of 2026‑07‑11). It converts a natural‑language description into a structured SVG via a large language model and a layout algorithm, then renders a high‑resolution PNG (1920 px width) with rsvg-convert, preserving vector quality and clean text.

How it works

LLM parses the textual prompt → layout algorithm generates SVG → rsvg-convert produces PNG. Example prompt: “画一张 RAG 架构图，包含查询、向量检索、大模型合成，暗黑风格。” The tool returns a diagram with aligned nodes, clean connectors, and bilingual fonts within seconds.

Built‑in styles

1. Flat Icon (default) – white background, colorful accents; suitable for class diagrams, component diagrams, blog illustrations.

画一张 style 1（Flat Icon）的 Mem0 记忆架构图。
分成四个横向区域：Input Layer、Memory Manager、Storage Layer、Output / Retrieval。
包含 User、AI App / Agent、LLM、mem0 Client、Memory Manager、Vector Store、Graph DB、Key-Value Store、History Store、Context Builder、Ranked Results、Personalized Response。
使用 read、write、control、data 四类语义箭头，整体保持产品文档风格的清晰布局。

2. Dark Terminal – dark background, neon accents, monospaced font; ideal for sequence diagrams and README covers.

画一张 style 2（Dark Terminal）的 tool call flow 图。
包含 User query、Retrieve chunks、Generate answer、Knowledge base、Agent、Terminal、Source documents、Grounded answer。
使用终端窗口 chrome、Neon 强调色、等宽字体，以及 retrieval、answer synthesis、embedding update 三类语义箭头。

3. Blueprint – deep‑blue grid with cyan outlines; suited for state‑machine, deployment, and micro‑service architecture diagrams.

画一张 style 3（Blueprint）的微服务架构图。
使用带编号的工程分区标题，例如 01 // EDGE、02 // APPLICATION SERVICES、03 // DATA + EVENT INFRA、04 // OBSERVABILITY。
包含 Client Apps、API Gateway、Auth / Policy、三个业务服务、Event Router、Postgres、Redis Cache、Warehouse、Metrics / Traces。
使用蓝图网格、青色描边，并在右下角加入工程 title block。

4. Notion Clean – large white space, single accent color; best for internal docs and wikis.

画一张 style 4（Notion Clean）的 agent memory types 图。
以中间的 Agent Core 为中心，对比 Sensory Memory、Working Memory、Episodic Memory、Semantic Memory、Procedural Memory。
使用极简白底、浅边框、单一强调色箭头，并给每种 memory 补充简短的存储标签。

5. Glassmorphism – dark gradient with frosted‑glass cards; suitable for multi‑agent collaboration diagrams and PPTs.

画一张 style 5（Glassmorphism）的 multi-agent collaboration 图。
分成 Mission Control、Specialist Agents、Synthesis 三个区域。
包含 User brief、Coordinator Agent、Research Agent、Coding Agent、Review Agent、Shared Memory、Synthesis Engine、Final response。
使用 frosted glass 卡片、轻微 glow，以及 delegation、shared memory write、synthesis output 三类语义箭头。

6. Claude Official – cream‑colored background mirroring Anthropic’s design language; useful for external technical announcements.

画一张 style 6（Claude Official）的 system architecture 图。
使用左侧 layer label：Interface Layer、Core Layer、Foundation Layer。
包含 Client Surface、Gateway、Task Planner、Model Runtime、Policy Guardrails、Memory Store、Tool Runtime、Observability、Registry。
使用温暖奶油色背景、克制的品牌感配色、足够留白，并在右下角放 legend。

7. OpenAI Official – white background with OpenAI branding; provides visual consistency for OpenAI ecosystem diagrams.

画一张 style 7（OpenAI Official）的 API integration flow 图。
分成 Entry、Model + Tools、Delivery 三个区域。
包含 Application、OpenAI SDK Layer、Prompt Builder、Model Runtime、Tool Calls、Response Formatter、Observability、Release Control。
整体保持纯白、精确、现代、极简，并使用干净的绿色语义箭头。

Supported diagram types (UML)

Class diagram – styles 1, 4

Component diagram – styles 1, 3

Deployment diagram – style 3

Package diagram – styles 1, 4

Composite structure diagram – styles 1, 3

Object diagram – styles 1, 4

Use‑case diagram – style 1

Activity diagram – style 3

State‑machine diagram – styles 2, 3

Sequence diagram – style 2

Communication diagram – styles 1, 2

Timing diagram – style 2

Interaction overview diagram – styles 1, 2

ER diagram – styles 1, 3

AI / Agent templates

RAG Pipeline – automatically draws the full Query → Embed → VectorSearch → Retrieve → LLM → Response chain.

Memory Architecture – reproduces Mem0 / MemGPT layered structure, separating perception, working, and episodic memory with distinct read/write paths.

Multi‑Agent Topology – visualizes an Orchestrator dispatching multiple SubAgents and an Aggregator merging outputs.

Tool Call Loop – depicts the iterative reasoning loop between LLM, Tool Selector, Execution, and Parser.

Shape semantics

User / Human – circle + body path.

LLM / Model – rounded rectangle, double border, ⚡.

Agent / Orchestrator – hexagon.

Short‑term memory – dashed‑border rounded rectangle.

Long‑term memory – solid‑border cylinder.

Vector Store – cylinder with inner ring.

Graph DB – three‑circle cluster.

Tool / Function – rectangle with ⚙.

API / Gateway – single‑border hexagon.

Message queue / Stream – horizontal pipe.

Document – folded‑corner rectangle.

Browser / UI – rectangle with three‑dot title bar.

Decision node – diamond.

External service – dashed‑border rectangle.

Arrow semantics

Main data flow – 2 px solid line (primary request/response).

Control / Trigger – 1.5 px solid line (system A triggers B).

Memory read – 1.5 px solid line (retrieval).

Memory write – 1.5 px solid line with dash pattern 5,3 (write/store).

Async / Event – 1.5 px solid line with dash pattern 4,2 (non‑blocking).

Feedback / Loop – 1.5 px curved line (iterative reasoning).

Icon library

The tool bundles more than 40 industry‑standard icons covering cloud infrastructure, AI frameworks, databases, middleware, and monitoring tools. References are made via the icons.md vocabulary file.

AI models & frameworks: OpenAI, Claude, Gemini, LLaMA, LangChain, LlamaIndex, Dspy.

Databases: PostgreSQL, MySQL, Redis, Pinecone, Milvus, Qdrant.

Middleware & cloud services: Kafka, RabbitMQ, AWS, Kubernetes, Docker.

Monitoring: Grafana, Prometheus, Datadog.

How to use

Trigger keywords

画图 / 帮我画 / 生成图 / 做个图 / 架构图 / 流程图 / 可视化一下 / 出图
generate diagram / draw diagram / create chart / visualize

Basic commands

画一张 RAG 流程图
生成一张 Agentic Search 架构图

Specify style

画一张微服务架构图，风格2（暗黑极客风）
生成 Multi-Agent 协作图，玻璃态风格

Specify output path

生成 Mem0 架构图，输出到 ~/Desktop/
画一张 Tool Call 流程图 --output /tmp/diagrams/

Example prompts (best‑practice)

Compare Agentic RAG vs. vanilla RAG using Notion Clean style – matrix of retrieval strategy, agent loop, tool call, latency, cost.

Infrastructure diagram:

帮我画一张微服务架构图：Client → API Gateway → [用户服务 / 订单服务 / 支付服务] → PostgreSQL + Redis

– produces a layered swim‑lane layout.

API & sequence flow: 帮我画一张 ChatGPT Plugin 的调用时序图 – shows User → ChatGPT → Plugin Manifest → API → response chain.

Decision & process flow:

画一张 AI 应用上线前的质检流程图：代码审查 → 安全扫描 → 性能测试 → 人工审核 → 发布

– includes diamond decision nodes and parallel branches.

Concept & knowledge graph:

帮我可视化一下 LLM 应用的技术栈：从底层模型到 SDK 到应用框架到部署层

– yields a layered architecture or mind‑map.

Repository

GitHub: https://github.com/tisfeng/Easydict/tree/dev/.agents/skills/fireworks-tech-graph