Screenshot

Often, after designing an elaborate workflow, you may need to export the canvas as a high-fidelity image for documentation, reporting, or peer review. By leveraging external libraries like html-to-image, you can capture the current state of the Flow viewport as a professional-grade PNG without any UI artifacts.

NOTE

This feature depends on the external library html-to-image. To keep the component library lightweight and clean, we have declared it as an optional peer dependency (peerDependencies). If you need screenshot or image export capabilities, please install it in your project:

pnpm add html-to-image # or npm install html-to-image

Export Demo

Click the "Download PNG" button below. The code will capture the current viewport's DOM structure and trigger a browser download.

High-Fidelity Export

Implementation Best Practices

To ensure a clean capture without broken styles or text overflows, follow these guidelines:

1. Forced Background: Most image viewers default to a dark background when displaying transparent PNGs. If you don't want your black text to be invisible, explicitly pass backgroundColor: '#ffffff' to the toPng() options.
2. Target the Specific Container: Capture the internal .yh-flow element instead of the entire app container. This prevents surrounding toolbars or layout sidebars from cluttering the resulting image.
3. High-Density Rendering: Use pixelRatio: 2 to generate "Retina" quality images that remain sharp when zoomed in or printed.
4. Auto-Center Before Capture: For large graphs, it's a good practice to programmatically call fitView() before performing the capture to ensure no elements are clipped outside the current viewport.