Examples / AI
How do you diagram a multi-agent AI system?
Updated
User -> Router Agent -> {Research Agent, Code Agent, Analysis Agent}. The braces put the three specialists in one column, top to bottom in the order written, and the animation sends the request to all three in the same pass. Swap the braces for bars and each pass goes to one specialist instead, cycling through them in order, which is closer to what a router does.
THE TEXT THAT DRAWS IT
User -> Router Agent -> {Research Agent, Code Agent, Analysis Agent}
Edit it in the box above and the diagram redraws as you type. Export it as an animated GIF, WebM, WebP or MP4 video, or a still PNG or PDF, every format free. WebM and PNG export here; the rest are in the app after a free sign-up. Every format embeds this text, so the file can be read back into the editor.
WHAT IT SHOWS
The Router Agent reads the request and picks who gets it. Behind it sit three specialists: the Research Agent searches, the Code Agent writes and runs code, the Analysis Agent works over data. From the user’s side there is one box. Three do the work.
Braces are what put the specialists in a column instead of a row. All three land in the column after the router, top to bottom in the order you typed them, and that layout says something a chain cannot: these are alternatives at the same level of the system. A reader who assumes the agents run in sequence will ask why analysis has to wait for research, and with the three stacked in one column that question does not come up.
One thing the braces get wrong, and it is worth knowing. In the animation the request goes to all three specialists in the same pass, because braces mean everything at once, and a router usually picks one, so the picture shows a broadcast where the system does a dispatch. If you want it to route, write the same line with bars, |Research Agent, Code Agent, Analysis Agent|, and each pass goes to a single specialist, cycling through them in order. Boxes and column stay where they are. Only the arrows change.
I think routing is the first structural change most single-agent systems need. Any prompt that has to cover research, code and analysis ends up mediocre at all three, so you split it, and each specialist gets its own instructions and its own tools. After that the router is the part you have to get right, since every request goes through it and a misroute hands the job to a specialist with the wrong tools.
QUESTIONS
- Should the router broadcast to all agents or pick one?
- Both are real systems. Braces mean all at once, so the animation shows every specialist receiving the request in the same pass, which is right when you run them in parallel and merge the results. Bars,
|Research Agent, Code Agent, Analysis Agent|, mean one per pass, cycling through them in the order written, which is a router in the intent-classification sense. - How do I show results coming back to the user?
- Add
Research Agent -> Useras a second line. The user box sits two columns to the left, so the parser retraces the route, Research Agent to Router Agent to User, as a second flow that plays after the dispatch has finished.
MORE AI PATTERNS
RAG pipeline diagram
The question reaches the vector database before the model is called, and the animation shows it.
User -> Query Agent -> Vector DB -> LLM -> User
ReAct tool-calling diagram
Each turn the model calls a tool or answers, and a tool result goes back to the agent for another turn.
User -> Agent -> LLM -> |Tool, Response|
Human-in-the-loop diagram
A guardrail sends each output to Accepted or to a person, and the person's verdict goes back to the agent.
User -> Agent -> LLM -> Guardrail -> |Accepted, Review|
MCP architecture diagram
The agent talks to its MCP client and nothing else; the tools sit behind the server.
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.