Easily Convert Organizational Chart Diagrams to PowerPoint Presentations
Tags: aspnetcore, chart, fileformats, powerpoint
Published: 2023-12-08 04:35:54

---
title: Easily Convert Organizational Chart Diagrams to PowerPoint Presentations
published: true
date: 2023-12-06 12:33:21 UTC
tags: aspnetcore, chart, fileFormats, powerpoint
canonical_url: https://www.syncfusion.com/blogs/post/org-chart-diagram-to-ppt.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yiq8dwkcze8e3o1lz52y.png
---
This blog explains how to convert an organizational chart created using Syncfusion’s [ASP.NET Core Diagram](https://www.syncfusion.com/aspnet-core-ui-controls/diagram "ASP.NET Core Diagram component") component to a PPTX file using our [.NET PowerPoint Library](https://www.syncfusion.com/document-processing/powerpoint-framework/net ".NET PowerPoint Library"). The process involves creating an organizational chart, then sending the chart data to the server to generate the PowerPoint file.

## Definitions

An **organizational chart** is a visual representation that illustrates the hierarchy, relationships, and relative ranks of positions within an organization. It provides a clear and concise overview of how various roles and responsibilities are distributed and interconnected.

The Syncfusion **ASP.NET Core Diagram** library provides tools and components that allow you to create, customize, and interact with organizational charts within your app.

**PowerPoint** is frequently employed in business settings to convey data, project updates, and reports during meetings. It provides a structured and visually appealing way to present information.

## Create an ASP.NET Core application

First, create an ASP.NET Core app using this [documentation](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/vscode "Creating an ASP.NET Core app").

## Install Syncfusion Essential JS 2 libraries

Install the Syncfusion Essential JS 2 and Syncfusion Presentation packages in your ASP.NET Core app. You can do this via the NuGet [Package Manager Console](https://help.syncfusion.com/aspnet-core/visual-studio-integration/nuget-packages#using-package-manager-console "Installing NuGet packages using Package Manager Console") or Visual Studio’s [NuGet Package Manager](https://help.syncfusion.com/aspnet-core/visual-studio-integration/nuget-packages#using-nuget-package-manager "Installing NuGet packages using NuGet Package Manager").
<table>
<tbody>
<tr>
<td width="312">
<p><strong>Package Name</strong></p>
</td>
<td width="312">
<p><strong>Description</strong></p>
</td>
</tr>
<tr>
<td width="312">
<p>Syncfusion.EJ2.AspNet.Core</p>
</td>
<td width="312">
<p>This package provides the Syncfusion Essential JS 2 components for ASP.NET Core. With this, you can create an organizational chart using the Diagram library.</p>
</td>
</tr>
<tr>
<td width="312">
<p>Syncfusion.Presentation.Net.Core</p>
</td>
<td width="312">
<p>This package contains the Syncfusion PowerPoint Library for working with PowerPoint files and is used to generate PPT files.</p>
</td>
</tr>
</tbody>
</table>
## Include the required scripts and styles

In the **\_Layout.cshtml** file, include the following necessary Syncfusion Essential JS 2 and CSS files.

```js
_Layout.cshtml   

@* Syncfusion Essential JS 2 Styles *@
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/material.css" />

@* Syncfusion Essential JS 2 Scripts *@
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
```

## Create an empty diagram canvas

Next, create an empty diagram canvas in the ASP.NET Core app by defining an **ejs-diagram** tag with the **width** and **height** properties.

```xml
<ejs-diagram id="container" width="100%" height="700px">
   <e-diagram-rulersettings showRulers="true"></e-diagram-rulersettings>
</ejs-diagram>
```

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Creating-an-empty-diagram-canvas.png" alt="Creating an empty diagram canvas" style="width:100%">

  <figcaption>Creating an empty diagram canvas</figcaption>

</figure>

## Define JSON data and OrganizationalDetails class

In the server-side code, create a **C#** class named **OrganizationalDetails** to represent the data for the organizational chart. This class has **Id**, **Role**, **Color**, **Manager**, **ChartType**, and **Level** properties. Additionally, define an action method named **Index** that retrieves the organizational chart data using the **GetData()** method from the **OrganizationalDetails** class. Then, set the chart data in the **ViewBag** to access it in the view.

```js
public IActionResult Index()
{
     ViewBag.nodes = OrganizationalDetails.GetData(); 
     return View();
}

public class OrganizationalDetails
{
      public string Id { get; set; }
      public string Role { get; set; }
      public string Color { get; set; }
      public string Manager { get; set; }
      public string ChartType { get; set; }
      public string Level { get; set; }

      public OrganizationalDetails(string id, string role, string color, string manager, string chartType, string level)
      {
            this.Id = id;
            this.Role = role;
            this.Color = color;
            this.Manager = manager;
            this.ChartType = chartType;
            this.Level = level;
       }

       public static List<OrganizationalDetails> GetData()
       {
            List<OrganizationalDetails> organizationaldetails = new List<OrganizationalDetails>();
            organizationaldetails.Add(new OrganizationalDetails("parent", "Board", "#71AF17", "", "", "level1"));
            organizationaldetails.Add(new OrganizationalDetails("1", "General Manager", "#71AF17", "parent", "right", "level2")); 
            organizationaldetails.Add(new OrganizationalDetails("2", "Human Resource Manager", "#1859B7", "1", "right", "level4"));
            organizationaldetails.Add(new OrganizationalDetails("3", "Trainers", "#2E95D8", "2", "", "level5"));
            organizationaldetails.Add(new OrganizationalDetails("4", "Recruiting Team", "#2E95D8", "2", "", "level5"));
            organizationaldetails.Add(new OrganizationalDetails("6", "Design Manager", "#1859B7", "1", "right", "level4"));
            organizationaldetails.Add(new OrganizationalDetails("7", "Design Supervisor", "#2E95D8", "6", "", "level5"));
            organizationaldetails.Add(new OrganizationalDetails("8", "Development Supervisor", "#2E95D8", "6", "", "level5"));
            organizationaldetails.Add(new OrganizationalDetails("9", "Drafting Supervisor", "#2E95D8", "6", "", "level5"));
            organizationaldetails.Add(new OrganizationalDetails("10", "Operations Manager", "#1859B7", "1", "right", "level4"));
            organizationaldetails.Add(new OrganizationalDetails("11", "Statistics Department", "#2E95D8", "10", "", "level5"));
             
            return organizationaldetails;
        }
}

<ejs-diagram id="container" width="100%" height="700px">
   <e-diagram-datasourcesettings id="Id" parentId="Manager" dataManager="new DataManager() { Data = (List<OrganizationalDetails>)ViewBag.Nodes }"></e-diagram-datasourcesettings>
   <e-diagram-layout type="OrganizationalChart"></e-diagram-layout>
</ejs-diagram>
```

## Customize the organizational chart

In the JavaScript section of the view,  define the **nodeDefaults** , **ConnectorDefaults** , and **getLayoutInfo** functions to customize the appearance and layout of the nodes and connectors in the organizational chart.

```js
public IActionResult Index()
{
    ViewBag.getConnectorDefaults = "ConnectorDefaults";
    ViewBag.getNodeDefaults = "nodeDefaults";
    ViewBag.GetLayoutInfo = "getLayoutInfo";
    return View();
}

<div class="control-section"> 
  <ejs-diagram id="container" width="100%" height="700px" getConnectorDefaults="@ViewBag.getConnectorDefaults" getNodeDefaults="@ViewBag.getNodeDefaults">
    <e-diagram-rulersettings showRulers="true"></e-diagram-rulersettings>
    <e-diagram-layout type="OrganizationalChart" getLayoutInfo="@ViewBag.GetLayoutInfo"></e-diagram-layout>
  </ejs-diagram>
</div>

<script>
  function nodeDefaults(obj, diagram) {
     obj.shape = {
         type: 'Text', content: obj.data.Role,
         margin: { left: 10, right: 10, top: 10, bottom: 10 }
     };
     obj.backgroundColor = obj.data.Color;
     obj.style = { fill: 'none', strokeColor: 'none', color: 'white' };
     obj.expandIcon = { height: 10, width: 10, shape: 'None', fill: 'lightgray', offset: { x: .5, y: 1 } };
     obj.expandIcon.verticalAlignment = 'Center';
     obj.expandIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 };
     obj.collapseIcon.offset = { x: .5, y: 1 };
     obj.collapseIcon.verticalAlignment = 'Center';
     obj.collapseIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 };
     obj.collapseIcon.height = 10;
     obj.collapseIcon.width = 10;
     obj.collapseIcon.shape = 'None';
     obj.collapseIcon.fill = 'lightgray';
     obj.width = 120;
     obj.height = 30;
     return obj;
  }

  function ConnectorDefaults(connector, diagram) {
      connector.targetDecorator.shape = 'None';
      connector.type = 'Orthogonal';
      connector.style.strokeColor = '#6d6d6d';
      connector.constraints = 0;
      connector.cornerRadius = 5;
      return connector;
  }

  function getLayoutInfo(node, options, orientation, type) {
     if (!options.hasSubTree) {
         options.type = 'Right';
     }
  }       
</script>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Creating-an-organizational-chart-using-the-Syncfusion-ASP.NET-Core-Diagram-library-1.png" alt="Creating an organizational chart using the Syncfusion ASP.NET Core Diagram library" style="width:100%">

  <figcaption>Creating an organizational chart using the Syncfusion ASP.NET Core Diagram library</figcaption>

</figure>

## Convert diagram to JSON using AJAX

In the JavaScript section of the view, design the **convertDiagramToPPTX** button by defining the function **convertDiagramToJSON()**, which will trigger when you click the **convertDiagramToPPTX** button. This function first retrieves the diagram data from the **ejs-diagram** instance, then iterates through the nodes and connectors to create a JSON representation of the chart. Finally, it will send the JSON data to the server using [AJAX](https://en.wikipedia.org/wiki/Ajax_(programming) "Wikipedia page: AJAX") and posts it to the **save** action method in the controller.

```js
<input type="button" value="convertDiagramToPPTX" onclick="convertDiagramToJSON()"/> 

function convertDiagramToJSON() {
    var diagram = document.getElementById("container").ej2_instances[0];
    var nodePropertyCollection = [];
    var connectorPropertyCollection = [];
    //save the diagram.
    var saveData = diagram.saveDiagram();
    //parse the JSON string.
    var parsedData = JSON.parse(saveData);
    //iterate the nodes.
    for (var i = 0; i < parsedData.nodes.length; i++) {
        var node = parsedData.nodes[i];
        nodePropertyCollection.push({ id: node.id, width: node.width, height: node.height, offsetX: node.offsetX, offsetY: node.offsetY, shape: node.shape, annotations: [{ content: node.data.Role }], addInfo: node.data.Level });
    }
    //iterate the connectors.
    for (var j = 0; j < parsedData.connectors.length; j++) {
         var connector = parsedData.connectors[j];
         connectorPropertyCollection.push({ id: connector.id, sourceID: connector.sourceID, targetID: connector.targetID });
    }
    var jsonResult = { nodeProperty: nodePropertyCollection, connectorProperty: connectorPropertyCollection };
    var Jsonstring= JSON.stringify(jsonResult);
    //pass JSON string to the server via AJAX post.
    $.ajax({
        url: "/Home/save",
        type: "Post",
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: Jsonstring,
        success: function (Jsonstring) {
           alert("Success");
           return true;
        },
    });
}
```

## Generate the PowerPoint presentation on the server

In the controller, define the **save** action method, which receives the JSON data from the client via the AJAX post. The server-side code creates a PowerPoint presentation using the Syncfusion PowerPoint Library.

The **save** method iterates through the nodes and connectors in the received JSON data. For each node, it adds a corresponding shape to the PowerPoint slide and customizes its appearance based on the node’s properties. For each connector, it adds an elbow connector to the slide and connects the nodes based on the connector’s source and target IDs.

Finally, the server-side code saves the generated PowerPoint presentation as **Diagram.pptx** file and closes the presentation.

Refer to the following code example.

```js
[HttpPost]
public ActionResult save([FromBody] Dictionary<string, object> NCProperty)
{
    //Create an instance for a PowerPoint presentation.
    IPresentation pptxDoc = Presentation.Create();
    //Add slide to the presentation.
    ISlide slide = pptxDoc.Slides.Add(SlideLayoutType.Blank);
    //Resize a slide size to diagram canvas size.
    slide.SlideSize.Width = 1000;
    slide.SlideSize.Height = 1000;

    //parse a node collection.
    List<DiagramNode> Nodes = JsonConvert.DeserializeObject<List<DiagramNode>>(NCProperty["nodeProperty"].ToString());
    foreach (var node in Nodes)
    {
        //Adds a new shape to the slide.
        IShape shape = slide.Shapes.AddShape(AutoShapeType.Rectangle, node.OffsetX, node.OffsetY, node.Width, node.Height);
        //Adds a shape id and its level.
        shape.Description = node.Id + "&" + node.AddInfo.ToString();

        // Apply the color for the shape.
        string hexColorCode = GetShapeColorBasedOnLevel(node.AddInfo.ToString());
        shape.Fill.FillType = FillType.Solid;                
        shape.Fill.SolidFill.Color = ColorObject.FromArgb(int.Parse(hexColorCode.Substring(0, 2), NumberStyles.AllowHexSpecifier),
        int.Parse(hexColorCode.Substring(2, 2), NumberStyles.AllowHexSpecifier),
        int.Parse(hexColorCode.Substring(4, 2), NumberStyles.AllowHexSpecifier));

        // Disable the line format of shape.
        shape.LineFormat.Fill.FillType = FillType.None;

        // Apply VerticalAlignment.
        shape.TextBody.VerticalAlignment = VerticalAlignmentType.Middle;

        foreach (var annotation in node.Annotations)
        {
             //get the node label.
             string content = annotation.Content;
             //Adds a paragraph to the shape.
             IParagraph paragraph = shape.TextBody.AddParagraph();
             // Apply HorizontalAlignment.
             paragraph.HorizontalAlignment = HorizontalAlignmentType.Center;
             //Adds a text to the paragraph.
             ITextPart textPart = paragraph.AddTextPart(content);
             // Apply text properties.
             textPart.Font.Color = ColorObject.White;
             textPart.Font.FontSize = 10;
         }
     }
     //To get connectors collection.
     List<DiagramConnector> Connectors = JsonConvert.DeserializeObject<List<DiagramConnector>>(NCProperty["connectorProperty"].ToString());
     //Iterate a connectors.
     foreach (var connector in Connectors)
     {
          IShape sourceShape = GetShapeWithID(connector.SourceID, slide.Shapes);
          IShape targetShape = GetShapeWithID(connector.TargetID, slide.Shapes);
          if (sourceShape != null && targetShape != null)
          {
              int targetShapeConnectionPortIndex = GetConnectionPortIndexBasedOnLevel(targetShape.Description.Split('&')[1]);
              //Add elbow connector on the slide and connect the endpoints of the connector with specified port positions 0 and 4 of the source and target shapes.
              IConnector connectorShape = slide.Shapes.AddConnector(ConnectorType.Elbow, sourceShape, 2, targetShape, targetShapeConnectionPortIndex);
              //Adds a connector id.
              connectorShape.Description = connector.Id;
              //Apply connector line color.
              connectorShape.LineFormat.Fill.FillType = FillType.Solid;
              connectorShape.LineFormat.Fill.SolidFill.Color = ColorObject.Black;
           }
      }

      //Save the PowerPoint presentation.
      pptxDoc.Save("Diagram.pptx");
      //Closes the presentation.
      pptxDoc.Close();

      return null;
}

/// <summary>
/// Gets a shape object with corresponding shape ID.
/// </summary>
/// <param name="id">Represents the id of shape.</param>
/// <param name="shapes">Represents a shapes collection.</param>
/// <returns>Returns shape object with corresponding shape ID.</returns>
private IShape GetShapeWithID(string id, IShapes shapes)
{
     foreach (IShape shape in shapes)
     {
         if (shape.Description.Split('&')[0] == id)
             return shape;
     }
     return null;
}
/// <summary>
/// Gets a connection port index of the target shape based on its level.
/// </summary>
/// <param name="level">Represents a level of shape.</param>
/// <returns>Returns a connection port index of the target shape based on its level.</returns>
private int GetConnectionPortIndexBasedOnLevel(string level)
{
    switch (level)
    {
         case "level2":
         case "level4":
               return 0;

         case "level3":
               return 3;
                
         case "level5":
               default:
                 return 1;
     }
}
/// <summary>
/// Gets a shape color based on its level.
/// </summary>
/// <param name="level">Represent a level of shape.</param>
/// <returns>Returns a shape color based on its level.</returns>
private string GetShapeColorBasedOnLevel(string level)
{
    switch (level)
    {
       case "level1":
       case "level2":
       case "level3":
             return "71AF17";

       case "level4":
            return "1859B7";

       case "level5":
             default:
                return "2E95D8";
     }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Converting-an-organizational-chart-diagram-to-PowerPoint-presentation.png" alt="Converting an organizational chart diagram to PowerPoint presentation" style="width:100%">

  <figcaption>Converting an organizational chart diagram to PowerPoint presentation</figcaption>

</figure>

## GitHub reference

For more information, refer to the [Convert organizational chart diagrams to PPTX](https://github.com/SyncfusionExamples/ej2-web-diagram-examples/tree/master/ConvertDiagramToPPTX/ConvertDiagramToPPTX "Convert organizational chart diagrams to PPTX GitHub demo") GitHub demo.

## Conclusion

Thanks for reading! In this blog, we’ve seen how to convert an organizational chart created using Syncfusion’s [ASP.NET Core Diagram library](https://www.syncfusion.com/aspnet-core-ui-controls/diagram "ASP.NET Core Diagram library") to a PPTX file using [Syncfusion’s PowerPoint Library](https://www.syncfusion.com/document-processing/powerpoint-framework/net ".NET PowerPoint Library"). Try out the steps in this blog and provide your feedback in the comments section!

If you want to try the Diagram library, you can download our [free trial](https://www.syncfusion.com/downloads/ "Free evaluation of the Essential Studio products"). You can visit the Diagram control [live demo](https://ej2.syncfusion.com/aspnetcore/Diagram/OrganizationalChartLayout#/material3 "Example of Organizational Chart in ASP.NET Core Diagram Control") and [documentation](https://ej2.syncfusion.com/aspnetcore/documentation/diagram/getting-started "Getting Started with ASP.NET Core Diagram Control") for detailed explanations.

For questions, you can contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Simple Steps to View a PowerPoint Presentation in an ASP.NET Core Application](https://www.syncfusion.com/blogs/post/view-powerpoint-asp-dotnet-core.aspx "Blog: Simple Steps to View a PowerPoint Presentation in an ASP.NET Core Application")
- [Easily Group Data into Ranges in Web Applications Using Pivot Table](https://www.syncfusion.com/blogs/post/easily-group-data-into-ranges-in-web-applications-using-pivot-table.aspx "Blog: Easily Group Data into Ranges in Web Applications Using Pivot Table")
- [Handling CSV Files in ASP.NET Core Web APIs](https://www.syncfusion.com/blogs/post/handling-csv-files-in-asp-net-core-web-apis.aspx "Blog: Handling CSV Files in ASP.NET Core Web APIs")
- [Simple Steps to Integrate a Blazor WebAssembly Project with an Existing ASP.NET Core Application](https://www.syncfusion.com/blogs/post/integrate-blazor-webassembly-in-asp-net-core-application.aspx "Blog: Simple Steps to Integrate a Blazor WebAssembly Project with an Existing ASP.NET Core Application")