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 or WebP, or a still PNG, on the free plan and without an account.

AWS patterns

Serverless REST API Diagram: API Gateway, Lambda, DynamoDB

The request/response backbone of most serverless applications.

API Gateway -> Lambda -> DynamoDB

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

One event, several independent consumers, none of them waiting on each other.

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

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

Accept the request quickly, do the slow part somewhere else.

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

Event Pipeline Diagram: EventBridge to SQS, Lambda and S3

One event bus feeding both a processing chain and a raw archive.

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

AI and agent patterns

RAG Pipeline Diagram: Retrieval-Augmented Generation

Retrieve first, generate second: the ordering is the whole pattern.

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

Multi-Agent Router Diagram: Dispatching to Specialist Agents

One entry point, several specialists, chosen rather than chained.

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

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.

User -> Agent -> LLM -> |Tool, Response|
Tool -> Agent

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

A guardrail decides what ships and what a person looks at first.

User -> Agent -> LLM -> Guardrail -> |Accepted, Review|
Review -> Human Reviewer -> Agent

MCP Architecture Diagram: How Agents and MCP Servers Connect

One protocol between an agent and every tool it was never built for.

Agent -> MCP Client -> MCP Server -> |Knowledge Base, Code Sandbox, Memory|
MCP Server -> Agent

Cloudflare patterns

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

The whole application runs at the edge, and the stores are a choice, not a broadcast.

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.