# DiagramLegend

The key: which drawn form means which kind of thing.

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

## When to reach for it

Not optional furniture in a monochrome system. When a queue and a cache differ by a sigil rather than a colour, this is the only place a reader is told what the sigil means.

## Accessibility

- A list of pairs rather than a row of spans, so the count is part of what a screen reader says about it.
- kindLegend, variantLegend and stateLegend build the standard sets out of the renderers’ own drawing code, so the key can never drift from the figure.

## DiagramLegend

The key: which drawn form means which kind of thing. Not optional furniture in a monochrome system, and this is the one place that has to be said plainly. When the difference between a queue and a cache is a sigil rather than a colour, the key is the only place a reader is told what the sigil means — a figure whose forms are undocumented is a figure whose forms might as well not have been drawn. A `<ul>` rather than a row of `<span>`s: it is a list of pairs, and the count is part of what a screen reader should say about it.

### Props

- `entries` (required) — `DiagramLegendEntry[]`.
- `title` — `string | null` default `'Key'`. The kicker before the row. Pass null for a bare row.
- `className` — `string`.

## Example — default

```tsx
import { DiagramLegend, kindLegend, stateLegend } from '@misoto22/design/diagrams'

<div className="flex flex-col gap-6">
  <DiagramLegend entries={kindLegend(['frontend', 'backend', 'database', 'messagebus', 'security'])} />
  <DiagramLegend title="States" entries={stateLegend(['start', 'active', 'decision', 'success', 'failure'])} />
</div>
```