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 requires an external dependency such as html-to-image or html2canvas. To maintain a lightweight footprint, yh-flow does not bundle these weight-heavy libraries by default.

Export Demo

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

Node 1

Node 2

Node 3

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.