feat: take screenshot of diagram

[keyserj]

Closes #332

Description of changes

-

Additional context

• requested from discourse session

[netlify[bot]]

✅ Deploy Preview for velvety-vacherin-4193fb ready!

Name	Link
🔨 Latest commit	f428af4786527de39637d3726ac27d9708849253
🔍 Latest deploy log	https://app.netlify.com/sites/velvety-vacherin-4193fb/deploys/65d3e8c9ccbec10008cf1f1d
😎 Deploy Preview	https://deploy-preview-338--velvety-vacherin-4193fb.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 65 Accessibility: 86 Best Practices: 92 SEO: 85 PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[keyserj]

I initially went the path of screenshotting the diagram as-seen, rather than centering and sizing to a width x height, but sizing by width x height seems ideal for scenarios where you want to print the diagram for something like a picture frame. (right now you can't specify width x height but will add that in the future).

Here's the code for capturing the diagram as seen, and enhancing the pixel quality:

const element = document.querySelector(".react-flow__viewport");
    console.log(element.clientWidth, element.clientHeight);
    const widthRatio = Math.ceil(2500.0 / element.clientWidth);
    const heightRatio = Math.ceil(2500.0 / element.clientHeight);

    toPng(element, {
      backgroundColor: "#fff",
      pixelRatio: Math.min(widthRatio, heightRatio),
    }).then(downloadImage);
  };