# DiagramExportMenu

Taking the figure off the page: PNG, JPEG, WebP, SVG and a 1200×630 share card.

- Group: Diagrams
- Import: `import { DiagramExportMenu } from '@misoto22/design/diagrams'`
- Page: https://ui.misoto22.com/components/diagram-export-menu/
- Related: dropdown-menu, diagram-toolbar

## When to reach for it

It does the export rather than emitting a format name, because the interesting half — baking custom properties into real colours before serialising — is the half a caller would not know to write.

## Accessibility

- A failed export is reported through onResult rather than swallowed: a click that quietly does nothing is indistinguishable from a broken button.

## DiagramExportMenu

Taking the figure off the page: five files, one menu. WHY THE MENU DOES THE WORK rather than handing back a format: every one of these exports is the same six steps — find the `<svg>`, walk it with `getComputedStyle` to bake the custom properties into real colours, serialise, rasterise, name the file, hand it to the browser — and only the last two differ between them. A menu that emitted `'png'` and left the caller to do the rest would be a menu that every consumer reimplements, badly, and the interesting half (a serialised SVG resolves `var(--ink)` to nothing and comes out invisible) is exactly the half a caller would not know to write. `onExport` is still there for a page with its own pipeline — a server-side renderer, a different frame size — and taking it turns everything below into a no-op. What each format actually is, stated rather than implied. **SVG** is the artwork with resolved colours. It is editable and it is the only lossless one, but it carries no web fonts: a machine without the family renders it in a fallback, so type metrics will differ. **PNG, JPEG and WebP** are the browser's own rasteriser re-drawing that SVG at 2×. Not a screenshot — antialiasing and any effect a page stylesheet applied from OUTSIDE the `<svg>` are not in it. **JPEG has no alpha**, so it is flattened onto the resolved paper colour rather than onto black, which is what a transparent PNG becomes when a format with no transparency is asked to hold it. **The share card** is a 1200 × 630 frame with the title on it and the whole diagram letterboxed inside — never cropped. A card that cropped to fill the frame would be a picture of a different diagram.

### Props

- `targetRef` (required) — `RefObject<HTMLElement | SVGSVGElement | null>`. The `<svg>` to export, or an element containing exactly one. A ref rather than a selector, because a page can hold several figures and a selector would export whichever the document happened to reach first.
- `title` (required) — `string`. Names the file, and is printed on the share card.
- `trigger` — `ReactNode`. Replaces the trigger.
- `className` — `string`.
- `onExport` — `(format: ExportFormat) => void | Promise<void>`. Runs instead of the built-in export — for a caller with its own pipeline.
- `onResult` — `(result: ExportResult) => void`. Told what happened, so a page can raise a toast.

## exportFigure

One figure, one format, one file. Exported so a page can wire a keyboard shortcut or its own button to exactly what the menu does, without reimplementing the six steps.

## Example — default

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

<div className="flex flex-col items-start gap-4">
  <DiagramExportMenu targetRef={figure} title="Request path" />
  <div ref={figure} className="w-full">
    <ArchitectureFigure spec={SPEC} heading={false} legend="hidden" />
  </div>
</div>
```