EXAMPLES

Architecture patterns, drawn from text

Each pattern below is a working diagram, not a screenshot. Open one, edit the text, and the drawing follows. Every example on this site is run through the real parser before the page ships, so nothing here is a snippet that has never been executed.

All of them export as an animated GIF, WebM, WebP or MP4 video, or a still PNG or PDF, every format free. WebM and PNG need no account; the rest are in the app after a free sign-up.

AWS patterns

Serverless REST API Diagram: API Gateway, Lambda, DynamoDB

API Gateway takes the request, Lambda runs the code and DynamoDB keeps the data.

API Gateway -> Lambda -> DynamoDB

Pub/Sub Fan-Out Diagram: SNS to Lambda and SQS

SNS hands the same event to two Lambdas and a queue at the same time.

SNS -> {Lambda Emailer, Lambda Analytics, SQS Archive}

Queue Worker Diagram: API Gateway, SQS and a Lambda Consumer

The first Lambda only enqueues, so the API answers at once and the worker takes as long as it needs.

API Gateway -> Lambda -> SQS -> Lambda Worker -> DynamoDB

Event Pipeline Diagram: EventBridge to SQS, Lambda and S3

The same event goes down a three-hop chain and straight into S3 at the same time.

EventBridge -> {(SQS -> Lambda -> DynamoDB), S3}

AI and agent patterns

RAG Pipeline Diagram: Retrieval-Augmented Generation

The question reaches the vector database before the model is called, and the animation shows it.

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

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.

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

ReAct Tool-Calling Agent Diagram: Agent, LLM and a Tool Loop

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|
Tool -> Agent

Human-in-the-Loop Diagram: Guardrail and Reviewer Escalation

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|
Review -> Human Reviewer -> Agent

MCP Architecture Diagram: How Agents and MCP Servers Connect

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|
MCP Server -> Agent

Cloudflare patterns

Cloudflare Workers Architecture Diagram: Pages, KV, R2 and D1

A Worker reads one of KV, R2 or D1 per request, and the animation shows which one.

Browser -> Pages -> Workers -> |KV, R2, D1|
Workers -> Browser

The notation is small enough to learn in a sitting: arrows for flow, braces for fan-out, pipes for a choice. The language reference documents all eight pieces of it, every one with a worked example.