# Board snapshots for reports

> Export a roadmap frame, a KPI chart or a whole board as PNGs for reports and slides.

Source: https://mockflow.com/developers/examples/api/report-snapshots

Every month someone takes screenshots of the roadmap, the KPI charts and the architecture diagram, crops them and pastes them into the report. This example exports them instead: sharp PNGs of a whole board, one frame or one item, saved in a dated folder and, if you like, posted to Slack.

[**Download the code**](/developers/assets/examples/mockflow-report-snapshots.zip) (Node.js 18 or later, no packages)

## What it does

- Lists a board's sections and items with their ids, so you can choose what to export.
- Exports each entry in `snapshots.json` at 2x, for slides and print.
- Saves the pictures to `out/<date>/` and optionally posts each link to Slack.

## How it works

1. Find ids with the [board structure](/developers/reference/boards/get-board-structure), `GET /boards/{boardId}/structure`: sections with the items inside them.
2. [Export](/developers/reference/boards/export-board) with `POST /boards/{boardId}/export` and a `target`: `board` for everything, `frame` for a section or frame and the items inside it, or `item` for one item alone. Drawing takes a browser, so it answers with a job.
3. [Wait for the job](/developers/reference/jobs/get-job). Its `result` has the `imageUrl`, `width` and `height`.
4. Download the PNG.

The background is transparent. Each image is published at an unguessable address that anyone with the link can open, so share it only where the board itself may be seen.

## Run the example

Create an API key in the [developer console](/developers/console/) with the scopes `user:read` and `boards:read`, then:

```bash
cp .env.example .env              # paste your key into .env
node snapshot.js --list YOUR_BOARD_ID
# put the ids in snapshots.json, then:
node snapshot.js
```

## The key code

```javascript
const job = await mf.post(`/boards/${shot.boardId}/export`, {
  target: shot.target,          // board, frame or item
  itemId: shot.itemId,
  scale: 2,
});
const done = await mf.waitForJob(job);
const png = Buffer.from(await (await fetch(done.result.imageUrl)).arrayBuffer());
fs.writeFileSync(`out/${date}/${shot.name}.png`, png);
```

## Adapt it

- **Status pages:** refresh the picture of the release plan every hour.
- **Documentation:** export architecture and flow diagrams into your docs build, so they never go stale.
- **Client updates:** attach the latest wireframes to the weekly email.

## What you need

An API key with `user:read` and `boards:read`. Every plan.