Exporting Diagram to XML

Updated on Jan 1, 2026

Environment

Product

Progress® Kendo UI® for Angular Diagram

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 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 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
• Diagram Export Options
• Kendo UI for Angular File Saver