How to Serialize and Deserialize Diagram Objects Using JSON.NET in Syncfusion Blazor Diagram?

You can serialize and deserialize Syncfusion Blazor Diagram objects using JSON.NET to save and load diagram content. This allows you to preserve diagram data as a JSON string and reload it when needed.

Steps to Serialize and Deserialize Diagram Objects

1.Set Up the Environment
First, ensure that you have the necessary NuGet packages installed in your Blazor application:

• Syncfusion.Blazor: For the Syncfusion components.
• Newtonsoft.Json: For JSON serialization and deserialization.

2.Initialize the Diagram Component and Define Settings
In your Blazor component, create a SfDiagramComponent and define JsonSerializerSettings to include type information.

@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons
@using Newtonsoft.Json
@using System.Collections.ObjectModel
@using SelectionChangedEventArgs = Syncfusion.Blazor.Diagram.SelectionChangedEventArgs

<SfDiagramComponent @ref="diagramComponent" Width="700px" Height="300px" Nodes="nodes">
</SfDiagramComponent>
<SfButton Content="Save" OnClick="OnSave"></SfButton>
<SfButton Content="Load" OnClick="OnLoad"></SfButton> 

In the @code block, initialize the SfDiagramComponent and set the JsonSerializerSettings to use TypeNameHandling.All to preserve type information during serialization.

@code {
   SfDiagramComponent diagramComponent;
   JsonSerializerSettings settings;
   string output;
   Node node;
   DiagramObjectCollection<Node> nodes = new Syncfusion.Blazor.Diagram.DiagramObjectCollection<Node>();

   // Initialize the diagram and settings
   protected override void OnInitialized()
   {
       node = new Node()
       {
           ID = "node1",
           Height = 100,
           Width = 100,
           OffsetX = 100,
           OffsetY = 100,
           Shape = new BpmnActivity()
           {
               ActivityType = BpmnActivityType.Task,
               TaskType = BpmnTaskType.None
           }
       };

       nodes.Add(node);

       settings = new JsonSerializerSettings()
       {
           TypeNameHandling = TypeNameHandling.All
       };
   }
} 

3.Serialize the Object (Save)
To save the diagram object as JSON, use JsonConvert.SerializeObject to serialize the object and store it in a string variable.

public void OnSave()
{
   output = JsonConvert.SerializeObject(node, settings);
} 

4.Deserialize the Object (Load)
To load the diagram object back from the saved JSON string, use JsonConvert.DeserializeObject to deserialize the string into the object and add it back to the diagram.

public void OnLoad()
{
   diagramComponent.Clear();
   Node deserializedNode = JsonConvert.DeserializeObject<Node>(output, settings);
   nodes.Add(deserializedNode);
} 

Key Considerations

1. TypeNameHandling.All: This setting ensures that the type information is included in the serialized JSON. Without this, deserialization might fail when trying to recreate complex objects with specific types.
2. JsonSerializerSettings: Use this to configure how the JSON is serialized, including options like TypeNameHandling.

You can download a complete working sample here.

Conclusion:

This KB article explains the steps clearly, ensuring that developers can implement serialization and deserialization for diagram objects in their applications.

You can refer to our Blazor Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!