Examples / AI

How do you diagram a ReAct tool-calling agent?

Updated

User -> Agent -> LLM -> |Tool, Response| with a Tool -> Agent return line. The |…| choice is the model’s decision (call a tool or answer) and the return line closes the loop back to the agent. Chartado animates one outcome per pass, alternating, which is how a ReAct loop behaves over successive turns.
ReAct Tool-Calling Agent Diagram: Agent, LLM and a Tool Loop. The model decides whether to answer or to call a tool, then comes back. Services drawn: User, Agent, LLM, Tool, Response.
A still of the animation above. Every export embeds the diagram source.

THE TEXT THAT DRAWS IT

User -> Agent -> LLM -> |Tool, Response|
Tool -> 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

This is the loop underneath most tool-calling agents. The Agent passes the request to the LLM, which returns one of two things: a Response to hand back, or a Tool to call. If it is a tool, the result returns to the agent and the whole thing runs again with more information than before.

The pipes are a choice, not a fan-out. |Tool, Response| means exactly one of these happens per turn, where { } would mean both. That single character is the difference between “the model picked one” and “everything ran”, and it is the most common thing to get wrong when drawing an agent.

The second line is where this diagram earns its place. Writing Tool -> Agent does not draw one long arrow flying backwards across the page. The parser looks up the forward route and re-emits it reversed, one hop at a time, in a second flow. The message retraces the path it came by, so the outbound pass finishes before the return begins.

That is why an agent loop is hard to draw by hand and cheap to write as two lines of text.

QUESTIONS

Why model tool-or-answer as a choice instead of a broadcast?
Because the model does one or the other on each step. A broadcast would show the agent calling the tool and answering simultaneously, which is not how ReAct works.
How does the loop back to the agent work in the DSL?
Tool -> Agent is a separate flow line. Flows play sequentially, so the animation shows the tool result returning before the next decision starts.

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}

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.