# Exporting Diagram to XML

## Environment

<table>
<tbody>
<tr>
<td>Product</td>
<td>Progress® Kendo UI® for Angular Diagram</td>
</tr>
</tbody>
</table>

## Description

I want to export the data of the Kendo UI for Angular Diagram to an XML file. How can I achieve this?

This Knowledge Base article also answers the following questions:

* How do I save Diagram data as an XML file in an Angular application?
* Is it possible to use third-party libraries to convert Diagram data to XML format?
* What steps are involved in exporting Diagram data to XML?

## Solution

The Kendo UI for Angular Diagram does not provide a built-in option to export data to XML format.

To export the Diagram data, follow these steps:

1. Install a third-party library such as [js2xmlparser](https://www.npmjs.com/package/js2xmlparser) to convert JSON data to XML format.

   > Kendo UI for Angular has no affiliation with the `js2xmlparser` library. Use any third-party library that supports JSON-to-XML conversion, or implement a custom mapping solution based on your specific XML format requirements.

   ```bash
   npm install js2xmlparser
   ```

2. Install the [File Saver](https://www.telerik.com/kendo-angular-ui-develop/components/file-saver) package to save the XML file.

   ```bash
   npm install --save @progress/kendo-file-saver
   ```

3. Create a method to export the Diagram data to XML. Use the `diagramWidget.save()` method to get the current diagram data in JSON format, then convert it to XML.

   ```typescript
   import { Component } from '@angular/core';
   import { KENDO_BUTTON } from '@progress/kendo-angular-buttons';
   import { saveAs } from '@progress/kendo-file-saver';
   import {
     KENDO_DIAGRAM,
     ShapeOptions,
     ConnectionOptions,
     DiagramComponent,
   } from '@progress/kendo-angular-diagrams';
   import { parse } from 'js2xmlparser';

   @Component({
     selector: 'my-app',
     imports: [KENDO_DIAGRAM, KENDO_BUTTON],
     template: `
       <button kendoButton (click)="exportToXML(diagram)">
         Export to XML
       </button>

       <kendo-diagram
         #diagram
         [shapes]="shapes"
         [connections]="connections"
       >
       </kendo-diagram>
     `,
   })
   export class AppComponent {
     public shapes: ShapeOptions[] = [
       {
         id: 'start',
         type: 'circle',
         width: 80,
         height: 80,
         x: 100,
         y: 50,
         fill: { color: '#28a745' },
         content: { text: 'Start', color: 'white' },
       },
       {
         id: 'process',
         type: 'rectangle',
         width: 120,
         height: 60,
         x: 80,
         y: 180,
         fill: { color: '#007bff' },
         content: { text: 'Process', color: 'white' },
       },
       {
         id: 'end',
         type: 'circle',
         width: 80,
         height: 80,
         x: 100,
         y: 290,
         fill: { color: '#dc3545' },
         content: { text: 'End', color: 'white' },
       },
     ];

     public connections: ConnectionOptions[] = [
       { from: 'start', to: 'process' },
       { from: 'process', to: 'end' },
     ];

     public exportToXML(diagram: DiagramComponent): void {
       // Get the current diagram data in JSON format
       const diagramJson = diagram.diagramWidget.save();

       // Convert the JSON data to XML
       const xml = parse('diagram', diagramJson);

       // Create a blob and save the XML file
       const blob = new Blob([xml], { type: 'application/xml' });
       saveAs(blob, 'diagram.xml');
     }
   }
   ```

## See Also

* [Diagram API Reference](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api)
* [Diagram Export Options](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/pdf-export)
* [Kendo UI for Angular File Saver](https://www.telerik.com/kendo-angular-ui-develop/components/file-saver)