# Exporting to PDF, Image, or SVG

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.

[Demo Source](https://demos.telerik.com/kendo-react-ui/diagram/export/basic/source.txt)

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](https://www.telerik.com/kendo-react-ui-develop/components/diagram/keyboard-navigation)
* [KendoReact Drawing API](https://www.telerik.com/kendo-react-ui/components/drawing/)
* [`DiagramProps` API](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api/diagramprops)