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.
Multi-Agent Router Diagram: Dispatching to Specialist Agents. A router agent in front of three specialist agents, drawn in one column so nobody reads them as a pipeline. Services drawn: User, Router Agent, Research Agent, Code Agent, Analysis Agent.
A still of the animation above. Every export embeds the diagram source.

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 -> User as 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

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.