Examples / AI
How do you diagram MCP architecture?
Updated
Agent -> MCP Client -> MCP Server -> |Knowledge Base, Code Sandbox, Memory|, with MCP Server -> Agent returning results. The client speaks the Model Context Protocol on the agent’s behalf, and the server fronts capabilities the agent was never built with. The |…| choice animates one capability per request.
THE TEXT THAT DRAWS IT
Agent -> MCP Client -> MCP Server -> |Knowledge Base, Code Sandbox, Memory|
MCP Server -> Agent
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
The Model Context Protocol exists so an agent does not need bespoke code for each tool it calls. The Agent talks to an MCP Client, which speaks the protocol to an MCP Server, and the server exposes whatever it wraps: a Knowledge Base, a Code Sandbox, a Memory store.
The pipes are a choice, and here the choice is the truth. A server does not dispatch to everything it wraps on every call; the agent asks for one capability per turn. Watch two passes of the animation and you see it, because a choice sends one message per pass and takes a different branch the next time round. Braces would claim all three fire at once, which is exactly the kind of quiet lie an architecture diagram tells when nobody is checking.
The second line is the other half of the argument. MCP Server -> Agent does not draw one long arrow backwards; the answer retraces the route it came by, back through the client, after the outbound pass has finished. That ordering, request out and result back across the same boundary, is the part a still image flattens into two arrowheads.
The boundary is the point. Everything left of the server is the agent’s problem; everything right of it belongs to whoever wrote the server. Add a fourth capability and the left-hand side does not change. That is what MCP sells, and it is visible here as a shape.
Two limits. The client and the server render with the same icon, because the vocabulary has one concept for “thing that speaks a tool protocol” and MCP has two, so the boundary is carried by the layout rather than the shapes. And a real deployment runs several servers side by side; this draws the single-server case because it is the one worth understanding first.
If you want the loop that decides whether to call a tool at all, that is a different pattern with its own page: the ReAct agent, where the model chooses between answering and calling, and the result comes back for another turn.
QUESTIONS
- What is the difference between an MCP client and an MCP server?
- The client lives inside the agent application and speaks the protocol; the server wraps the actual capability (a knowledge base, a sandbox, memory) and exposes it in protocol terms. One client can talk to many servers.
- Is MCP specific to one AI vendor?
- No. The Model Context Protocol is an open specification. Any agent with an MCP client can call any MCP server, which is why the same diagram covers Claude, ChatGPT or a custom agent equally.
MORE AI PATTERNS
RAG pipeline diagram
Retrieve first, generate second: the ordering is the whole pattern.
User -> Query Agent -> Vector DB -> LLM -> User
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|
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.