# 400. Diagrams

**For:** everyone. The same material as diagrams.

## How a request is answered

The host matches the route against the plan, evaluates the lowered loader as interpreted IR, walks the component tree and writes HTML. No JavaScript engine is started at any point.

```diagram
request-lifecycle
```

The two boxes on the right of the host are the same file. `plan.sexp` holds both the route tree and the loader bodies; they are drawn apart because they are consulted at different moments.

## What a build produces

One TypeScript application produces two artifacts, with a strict rule about which side reads which.

```diagram
two-artifacts
```

The plan is data, so it is diffable, hashable, checkable at boot and swappable in a running process. The bundle is code and only the browser runs it.

## How a site nests inside its shell

A mounted site's whole route subtree is grafted into a clone of the shell's root layout, in the same `content` slot the shell's own pages use.

```diagram
site-graft
```

The shell and its sites share the document, the session and navigation. The graft is exactly one level deep: only the shell's root layout wraps a site, never a layout deeper in the shell's tree.

## Try it

These diagrams are ordinary components under `app/src/diagrams/`, lowered like any other and rendered by the host. There is no diagramming library in the bundle and the browser does not draw anything. View the source of this page and the SVG is already there.