Transformer Architecture

A decoder-only transformer diagram. Read upward from input tokens through embeddings, the repeated attention/feed-forward layer, linear projection, and softmax to output probabilities. The dashed return route and × N label indicate repetition of the framed layer, not a residual connection.

VStack places the blocks with explicit heights and gaps. The repeated layer is another stack inside a rounded frame. Network discovers the completed Node boundaries through both stacks and connects them with Edge, so the main arrows need no manually calculated endpoints. Nodes can wrap longer labels when given more height.

The repetition route has two waypoints calculated from the block heights, gaps, and frame padding, keeping its arms horizontal and its × N label centered. Network does not provide obstacle avoidance or edge-label placement; this route calculation needs adjustment if the stack's structure changes.

Blocks and the network canvas use em() dimensions. Route waypoints also use em(), so they stay attached to the same stack levels when the base font changes. The repetition label has a separate text-size override inside its positioned box; its position uses the diagram's em, not the label's larger em. The radius, head-size, and head-curve props control rounded corners and arrowheads. Color interpolation supplies pastel block fills.

The root's fit prop scales the completed scene down to the host's offer, preserving the relationships between blocks, arrows, and labels. No viewport size is required around the example.

View the source.

Gallery

layout (11)

geometry (10)

plotting (16)

maps (9)

networks (6)

text (5)

math (12)

api (2)

Transformer Architecture

Transformer Architecture