Exporting to PDF, Image, or SVG

Premium

Updated on Apr 2, 2026

The KendoReact Diagram can be exported to PDF, PNG image, or SVG using the @progress/kendo-drawing and @progress/kendo-file-saver packages.

The following example demonstrates exporting a Diagram to PDF, PNG, and SVG formats using the built-in export API.

Change Theme

Theme

Loading ...

To export the KendoReact Diagram component to PDF, image, or SVG, you can use the Diagram's built-in exportVisual method along with the Drawing API. The following steps outline how to achieve this:

1. Attach a ref to the Diagram component.
2. Call exportVisual() on the ref to get a drawing visual.
3. Pass the visual to exportPDF, exportImage, or exportSVG from @progress/kendo-drawing.
4. Save the result with saveAs from @progress/kendo-file-saver.

tsx

import { exportImage, exportPDF, exportSVG } from '@progress/kendo-drawing';
import { saveAs } from '@progress/kendo-file-saver';

const diagramRef = React.useRef<any>(null);

const exportToPDF = () => {
    const visual = diagramRef.current?.exportVisual();
    if (!visual) { return; }
    exportPDF(visual).then((result) => saveAs(result, 'diagram.pdf'));
};

const exportToImage = () => {
    const visual = diagramRef.current?.exportVisual();
    if (!visual) { return; }
    exportImage(visual).then((result) => saveAs(result, 'diagram.png'));
};

const exportToSVG = () => {
    const visual = diagramRef.current?.exportVisual();
    if (!visual) { return; }
    exportSVG(visual).then((result) => saveAs(result, 'diagram.svg'));
};

<Diagram ref={diagramRef} shapes={shapes} connections={connections} />

Suggested Links

• Keyboard Navigation
• KendoReact Drawing API
• DiagramProps API