← gallery

Primitives

Atomic building blocks (B2). Visual QA for role hues, edge styles, and states.

Node · all types (grouped by role)

userio
promptdata
llmmodel
agentmodel
subagentmodel
routermodel
toolaction
mcpaction
skillaction
memorydata
storedata
docdata
contextdata
guardrailsafety
outputio

Node · states

Claudeidle
Claudeactive
Claudedone
Guardrailblocked

Edge · all kinds (color = action, style = kind)

requestresponsetool_calltool_resultobserverouteiterate

Composition · hybrid layer (SVG edges + HTML nodes)

You
Claudeopus-4.8
Response

TokenStream · Counter

Think, act, observe repeat.
1,024 tok3 steps$0.02

MessageBubble · prompt stack

systemYou are a helpful assistant.
userExplain agent loops in one line.
assistantThink, act, observe — repeat until done.

CodeTile · Gate · Chip

tool_call
{
  "name": "read_file",
  "args": { "path": "main.py" }
}
idle
pass
block
opus-4.8fitsmediumblockedtool

A beat caption renders here, centered under the diagram.