Serialization in Diagram Component

10 Feb 20265 minutes to read

Serialization is the process of saving and loading the persistent state of a diagram.

How to Use Two-Way Binding

When saving and loading the diagram, we must use two-way binding (such as @bind) for nodes and connectors.

<SfDiagramComponent @ref="@_diagram" @bind-Connectors="@_connectors" @bind-Nodes="@_nodes"></SfDiagramComponent>

How to Save the Diagram as String

While saving, the diagram is serialized into a JSON string. The SaveDiagram method returns the serialize the diagram as a string. The following code illustrates how to save the diagram.

SfDiagramComponent _diagram;
//returns the serialized string of the Diagram
string data = _diagram.SaveDiagram();

How to Load the Diagram from String

The diagram is loaded from the serialized string data using the LoadDiagramAsync method. The following code illustrates how to load the diagram from serialized string data.

private SfDiagramComponent _diagram;
//returns the serialized string of the Diagram
private string _data = _diagram.SaveDiagram();
//Loads the Diagram from saved data
await _diagram.LoadDiagramAsync(_data);

How to Load the SfDiagram JSON Data String Using SfDiagram Component

Load the SfDiagram serialized JSON data string into SfDiagramComponent with LoadDiagramAsync method. When loading the SfDiagram serialized string, the isClassicData parameter should be set to true. The default value of isClassicData is false.

The following code illustrates how to load the SfDiagramComponent from SfDiagram serialized string data.

SfDiagram _classicDiagram;
//returns the serialized string of the SfDiagram
private string _data = _classicDiagram.SaveDiagram(); 

SfDiagramComponent _diagram;
//Loads the SfDiagramComponent from saved data of the SfDiagram
await _diagram.LoadDiagramAsync(_data, true);

How to Save and Load the Diagram Using File Stream

The diagram support to save and load the diagram using a file stream. The below code illustrates how to download the saved diagram as a file.

    private SfDiagramComponent _diagram;
    private string _fileName;
    private string _extensionType = ".json";

    //Method to save the diagram
    private async Task SaveDiagram()
    {
        _fileName = await jsRuntime.InvokeAsync<string>("getDiagramFileName", "");
        await DownloadDiagram(_fileName);
    }

    //Method to download the diagram
    private async Task DownloadDiagram(string fileName)
    {
        string data = _diagram.SaveDiagram();
        await FileUtil.SaveAs(jsRuntime, data, fileName);
    }

    //Method to load the diagram
    private async Task LoadDiagram()
    {
        _diagram.BeginUpdate();
        _extensionType = ".json";
        await FileUtil.Click(jsRuntime);
        await _diagram.EndUpdateAsync();
    }

    private async static Task SaveAs(IJSRuntime js, string data, string fileName)
    {
        await js.InvokeAsync<object>(
        "saveDiagram",
        // Specify IFormatProvider
        Convert.ToString(data), fileName).ConfigureAwait(true);
        // Specify IFormatProvider
    }

    private async static Task Click(IJSRuntime js)
    {
        await js.InvokeAsync<object>(
            "click").ConfigureAwait(true);
    }

    // Js methods to auto download the file
    function getDiagramFileName(dialogName) {
    if (dialogName === 'export')
        return document.getElementById('diagramName').innerHTML.toString();
    if (dialogName === 'save')
        return document.getElementById('diagramName').value.toString();
    else
        return document.getElementById('diagramName').innerHTML.toString();
    }

    function saveDiagram(data, filename) {
    if (window.navigator.msSaveBlob) {
        let blob = new Blob([data], { type: 'data:text/json;charset=utf-8,' });
        window.navigator.msSaveOrOpenBlob(blob, filename + '.json');
    } else {
        let dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(data);
        let a = document.createElement('a');
        a.href = dataStr;
        a.download = filename + '.json';
        document.body.appendChild(a);
        a.click();
        a.remove();
    }
    }

    function click() {
    document.getElementById('UploadFiles').click();
    }

A complete working sample can be downloaded from GitHub

How to Import and Export Using Mermaid Syntax

The SfDiagramComponent supports saving diagrams in Mermaid syntax format. Mermaid is a Markdown-inspired syntax that automatically generates diagrams. With this functionality, easily create mind maps, flowcharts and sequence diagrams from Mermaid syntax data, simplifying the visualization of complex ideas and processes without manual drawing. Additionally, export your mind maps, flowcharts and sequence diagrams to Mermaid syntax, allowing for easy sharing, editing, and use across different platforms.

How to Save Diagram as Mermaid Syntax

The SaveDiagramAsMermaid method serializes the diagram into a Mermaid-compatible string format. This method works for diagrams using Flowchart, Mind Map or Sequence Diagram layouts. The following code illustrates how to save the diagram in Mermaid string format.

private SfDiagramComponent _diagram;
//returns the serialized Mermaid string of the Diagram
private string _data = _diagram.SaveDiagramAsMermaid();

How to Load Diagram from Mermaid Syntax

Load a diagram from the serialized Mermaid syntax data using the LoadDiagramFromMermaidAsync method. The following code illustrates how to load a diagram from a Mermaid string data.

private SfDiagramComponent _diagram;
// Retrieves the serialized Mermaid string of the Diagram
private string _data = _diagram.SaveDiagramAsMermaid();
// Loads the Diagram from the saved Mermaid string
await _diagram.LoadDiagramFromMermaidAsync(_data);

```
A complete working sample can be downloaded from GitHub.

Note: Mermaid syntax data serialization and deserialization are only supported for Flowchart, Mind map and Sequence Diagram layouts. Please ensure that your diagram uses one of these layouts for successful data loading.

Search docs

Ask HelpBot