# ArchitectureFigure

A component map: services, datastores, trust boundaries, and what talks to what.

- Group: Diagrams
- Import: `import { ArchitectureFigure } from '@misoto22/design/diagrams'`
- Page: https://ui.misoto22.com/components/architecture-figure/
- Related: dataflow-figure, diagram, diagram-canvas

## When to reach for it

Reach for it when the question is "what talks to what". If the question is "in what order", that is a workflow or a sequence; if it is "what is in this arrow", that is a data flow.

## Accessibility

- The <svg> is role="img" with a name, so a screen reader announces a picture instead of walking two hundred <text> nodes in drawing order.
- The diagram’s content is published beside it as an ordinary list — every node with its kind, every relationship as "A → B: over HTTPS". That list is where the meaning lives for anyone not looking at the picture.
- Passing onSelectNode turns that list into real buttons, which is the keyboard’s only route to a selection: the plates inside the picture are presentational by construction.

## ArchitectureFigure

A component map: services, datastores, boundaries, and what talks to what. Takes the same JSON an archify `architecture` specification carries — `components`, `boundaries`, `connections` — and draws it in this system's own terms: paper plates on a hairline, one reversed plate for the component the diagram is about, and seven drawn sigils where archify uses seven hues. IT RENDERS ON A SERVER because every position is already in the specification. A component gives a `row` and a `col` into a grid whose cell size is either declared or defaulted, or it gives an absolute `pos` — nothing here is solved for, relaxed, or measured. So the markup is a pure function of the input, it is identical on the server and in the browser, and there is no layout shift on hydration because there is no layout to do. BOUNDARIES ARE DRAWN FIRST, AND DRAWN DIFFERENTLY. A `region` is where something RUNS — a VPC, a zone, a cluster — and is a solid frame. A `security-group` is what may REACH it, and is dashed. That is not decoration: an infrastructure diagram is very often read for exactly one of those two questions, and a reader should be able to tell which line answers which without reading either label.

### Props

- `spec` (required) — `ArchitectureSpec`.

Also accepts: `FigureChrome`.

## Example — default

```tsx
import { ArchitectureFigure } from '@misoto22/design/diagrams'

<ArchitectureFigure
  spec={{
    meta: { title: 'One request, end to end', subtitle: 'The edge, the service, the row it reads.' },
    components: [
      { id: 'client', type: 'external', label: 'Browser', sublabel: 'Safari / Chrome', row: 0, col: 0 },
      { id: 'edge', type: 'cloud', label: 'CloudFront', sublabel: 'CDN', row: 0, col: 1 },
      { id: 'api', type: 'backend', label: 'API', sublabel: 'FastAPI', row: 0, col: 2, tag: ':8000' },
      { id: 'cache', type: 'database', label: 'Redis', sublabel: 'read-through', row: 1, col: 2 },
      { id: 'db', type: 'database', label: 'Postgres', sublabel: 'primary', row: 0, col: 3 },
    ],
    boundaries: [{ kind: 'region', label: 'ap-southeast-2', wraps: ['api', 'cache', 'db'] }],
    connections: [
      { id: 'a', from: 'client', to: 'edge', label: 'HTTPS', variant: 'emphasis' },
      { id: 'b', from: 'edge', to: 'api' },
      { id: 'c', from: 'api', to: 'cache', label: 'read-through' },
      { id: 'd', from: 'api', to: 'db', label: 'SQL' },
    ],
    cards: [
      { dot: 'cyan', title: 'Edge', items: ['Every request is fronted by the CDN.'] },
      { dot: 'emerald', title: 'Application', items: ['Reads go through Redis first.', 'Postgres is the source of truth.'] },
    ],
  }}
/>
```