Examples / AI

How do you diagram a RAG pipeline?

Updated

A RAG diagram is four hops in strict order: User -> Query Agent -> Vector DB -> LLM -> User. The animation plays the question reaching the vector database before the LLM is touched: retrieval first, generation second, which is the ordering that defines retrieval-augmented generation.
RAG Pipeline Diagram: Retrieval-Augmented Generation. Retrieve first, generate second: the ordering is the whole pattern. Services drawn: User, Query Agent, Vector DB, LLM, User.
A still of the animation above. Every export embeds the diagram source.

THE TEXT THAT DRAWS IT

User -> Query Agent -> Vector DB -> LLM -> User

Edit it in the box above and the diagram redraws as you type. Export it as an animated GIF, WebM or WebP, or a still PNG. Every format embeds this text, so the file can be read back into the editor.

WHAT IT SHOWS

Retrieval-augmented generation exists to stop a model answering from memory alone. The Query Agent takes the question, searches a Vector DB for passages that are actually relevant, and only then hands both question and passages to the LLM. The answer goes back to the User.

The ordering is the entire pattern, and it is the thing people get wrong when they describe RAG in prose. Retrieval happens before generation, not alongside it. An animated diagram makes that unarguable: the message reaches the vector database and the model has not been touched yet.

Notice that User appears at both ends of the line. The parser treats those as two boxes because they sit at different points in the flow: the request leaving and the answer arriving are two different moments, and drawing them separately keeps the direction readable.

Everything expensive about RAG is in the middle two hops. The quality of the answer is decided by what the vector search returns, which is why most work on a RAG system is retrieval work, not prompt work.

QUESTIONS

How do you show re-ranking in a RAG diagram?
Add it as its own hop: Vector DB -> Reranker -> LLM. The animation then shows candidates being narrowed before the model sees them, which is where most retrieval quality is won.
What part of a RAG system does the diagram not show?
Chunking, embedding and re-ranking all happen inside the Vector DB hop. If you need them visible, split the hop: Query Agent -> Embedder -> Vector DB.

MORE AI PATTERNS

Multi-agent router diagram

One entry point, several specialists, chosen rather than chained.

User -> Router Agent -> {Research Agent, Code Agent, Analysis Agent}

ReAct tool-calling diagram

The model decides whether to answer or to call a tool, then comes back.

User -> Agent -> LLM -> |Tool, Response|

Human-in-the-loop diagram

A guardrail decides what ships and what a person looks at first.

User -> Agent -> LLM -> Guardrail -> |Accepted, Review|

MCP architecture diagram

One protocol between an agent and every tool it was never built for.

Agent -> MCP Client -> MCP Server -> |Knowledge Base, Code Sandbox, Memory|

Also on this site: Serverless REST API diagram, Pub/sub fan-out diagram, Queue worker diagram, Event pipeline diagram and Cloudflare Workers diagram. See all 10 patterns.

Chartado is a text-to-diagram tool: you type lines like A -> B, it draws the architecture and animates the flow.