Syncfusion AI Assistant

How can I help you?

Import and Export Visio files

9 Feb 202617 minutes to read

NOTE

Visio import and export support is currently experimental. Certain features may be limited or may not function as expected.

What is Microsoft Visio?

Microsoft Visio is a diagramming application used to create visual representations such as flowcharts, organizational charts, process diagrams, and system layouts. Visio diagrams are stored in the .vsdx file format, which contains information about pages, shapes, connectors, text, and layout settings.

Why use Visio with the Diagram?

Many organizations maintain existing diagrams created using Microsoft Visio. Recreating these diagrams in a web application can require significant effort. The Diagram component provides Visio integration to support the following scenarios:

Reuse existing Visio diagrams in web applications.
Visualize and edit Visio diagrams using the Diagram component.
Export diagrams created or modified in Diagram component for use in Microsoft Visio.

This integration enables seamless collaboration between desktop‑based Visio tools and web‑based diagramming applications.

Visio support in the Diagram

The Syncfusion Essential Diagram component supports Microsoft Visio integration by allowing .vsdx files to be imported into the Diagram component and diagrams to be exported back to Visio format. During import, Visio shapes, connectors, and annotations are mapped to their corresponding Diagram elements, while export converts the diagram content into a valid .vsdx file.

NOTE

To enable Visio import and export functionality, inject the ImportAndExportVisio module into the Diagram component.

Import Visio files in Diagram

How Visio import works

A Visio file can be selected from the local file system or retrieved from a server or cloud storage. Once the .vsdx file is available, it is passed to the Diagram component as a File object using the importFromVisio method.

During the import process:

Visio pages are read.
Shapes are converted into Diagram nodes.
Connectors are converted into Diagram connectors.
Basic text and formatting are applied where supported.

Import a Visio file

The following example imports a Visio (.vsdx) file by passing a File object to the importFromVisio method. The method returns a collection of warnings when certain Visio features are not fully supported during import.

visioImport.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;

namespace EJ2MVCSampleBrowser.Controllers.Diagram {
    public partial class DiagramController: Controller {
        return View();
    }
}

//Method to import visio file
diagram.importFromVisio(file, { pageIndex: 0 });

Import options

Import behavior can be customized using the VisioImportOptionsobject.

Property	Description
`pageIndex`	Specifies the zero-based index of the Visio page to import. The default value is 0.

Import lifecycle event

The diagramImporting event is triggered during the Visio import process. This event provides information about the current import status, available pages, warnings or errors, and supports page selection or cancellation of the import operation.

diagramImporting: function(args) {
  if (args.status === 'started') {
      // Import has started: show a loader / disable UI
  } else if (args.status === 'completed') {
      // Import completed: hide loader / enable UI
  } else if (args.status === 'failed') {
      console.error('Visio import failed.', args);
  }
}

Event arguments:

Argument	Description
`status`	Indicates the current stage of the import operation.
`pages`	Contains the list of available Visio pages.
`selectedPage`	Specifies the Visio page to import.
`cancel`	Set to true to cancel the import operation.
`logs`	Contains warnings or errors generated during import.

NOTE

The selectedPage property is configurable only when the import status is started.

Cancel the import operation

The import operation can be canceled during the initial stage by setting the cancel property to true.

diagramImporting: function(args) {
  if (args.status === 'started') {
    args.cancel = true;
  }
}

Select a page during import

When a Visio file contains multiple pages, a specific page can be selected at the start of the import process.

diagramImporting: function(args) {
  if (args.status === 'started' && args.pages && args.pages.length) {
    args.selectedPage = args.pages[0]; // Imports the first page
  }
}

Export Diagram to Visio

How Visio export works

The Diagram component supports exporting diagrams to Microsoft Visio format using the exportToVisio method. This method generates a .vsdx file and automatically downloads it through the browser.

Exporting a diagram

The following example exports a Diagram to a Microsoft Visio (.vsdx) file using the exportToVisio method.

visioExport.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;

namespace EJ2MVCSampleBrowser.Controllers.Diagram {
    public partial class DiagramController: Controller {
        public ActionResult Nodes()
        {
            var nodes = new List<DiagramNode>();
            nodes.Add(new DiagramNode()
            {
                Id = "Start",
                Width = 100,
                Height = 100,
                OffsetX = 300,
                OffsetY = 200,
                Annotations = new List<DiagramNodeAnnotation>()
                {
                    new DiagramNodeAnnotation() { Content = "Start" }
                },
                Ports = new List<DiagramPort>()
                {
                    new DiagramPort()
                    {
                        Id = "port1",
                        Offset = new DiagramPoint() { X = 1, Y = 0.5 }
                    }
                },
                Style = new NodeStyleNodes() { Fill = "#2AA8D9", StrokeColor = "grey" }
            });

            nodes.Add(new DiagramNode()
            {
                Id = "End",
                Width = 100,
                Height = 100,
                OffsetX = 600,
                OffsetY = 200,
                Annotations = new List<DiagramNodeAnnotation>()
                {
                    new DiagramNodeAnnotation() { Content = "End" }
                },
                Style = new NodeStyleNodes() { Fill = "#2AA8D9", StrokeColor = "grey" }
            });

            var connectors = new List<DiagramConnector>();

            connectors.Add(new DiagramConnector()
            {
                Id = "connector1",
                SourceID = "Start",
                SourcePortID = "port1",
                TargetID = "End",
                Annotations = new List<DiagramConnectorAnnotation>()
                {
                    new DiagramConnectorAnnotation()
                    {
                        Content = "Connect",
                        Alignment = AnnotationAlignment.Before,
                        Displacement = new DiagramPoint() { X = 0, Y = 15 }
                    }
                }
            });
            ViewBag.nodes = nodes;
            ViewBag.connectors = connectors;

            return View();
        }
    }
}

  var exportOptions = {
    fileName: 'diagram1.vsdx',
    pageName: 'page1'
  };
// Method to export diagram as vsdx
diagram.exportToVisio(exportOptions);

Export options

Export behavior can be controlled using the VisioExportOptions object.

Property	Description
`fileName`	Specifies the name of the exported Visio file. The default value is Sample.vsdx.
`pageName`	Specifies the name of the Visio page. The default value is Page-1.

Export lifecycle event

The diagramExporting event provides status updates, reports warnings or errors, and supports cancellation of the export operation.

  diagramExporting: function (args) {
    if (args.status === 'started') {
        // Export has started: show loader / disable UI
    }
    else if (args.status === 'completed') {
        // Export completed: hide loader / enable UI
    }
    else if (args.status === 'failed') {
        // Export failed: show error message
        console.error('Visio export failed.', args);
    }
  }