Board snapshots for reports

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 (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, GET /boards/{boardId}/structure: sections with the items inside them.

2. Export 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. 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 with the scopes user:read and boards:read, then:

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

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.