NOTE

Syncfusion recommends using Blazor Diagram Component which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future.

Serialization in Blazor Diagram Component

15 Dec 20221 minute to read

Serialization is the process of saving and loading for state persistence of the diagram.

Save

The diagram is serialized as string while saving. The server-side method, SaveDiagram helps to serialize the diagram as a string. The following code illustrates how to save the diagram.

SfDiagram Diagram;
//Returns serialized string of the Diagram.
string Data = await  this.Diagram.SaveDiagram();

This string can be converted to JSON data and stored for future use. The following snippet illustrates how to save the serialized string into local storage.

localStorage.setItem('fileName', saveData);
saveData = localStorage.getItem('fileName');

Diagram can also be saved as raster or vector image files. For more information about saving the diagram as images, refer to Print and Export.

Load

Diagram is loaded from the serialized string data by server-side method, LoadDiagram. The following code illustrates how to load the diagram from serialized string data.

SfDiagram Diagram;

//Returns serialized string of the Diagram.
string Data = await this.Diagram.SaveDiagram();

//Loads the Diagram from saved json data.
this.Diagram.LoadDiagram(this.Data);

NOTE

Before loading a new diagram, existing diagram is cleared.

Prevent default values

The diagram provides supports to simplify the saved JSON object without adding the default properties that are presented in the diagram. The following code illustrates how to simplify the JSON object.

@using Syncfusion.Blazor.Diagrams

@* Initialize diagram *@
<SfDiagram Height="600px">
    <DiagramSerializationSettings PreventDefaults="true"></DiagramSerializationSettings>
</SfDiagram>