Search results


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


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

export default {
    name: 'app'
    data() {
        return {
            width: "100%",
            height: "350px",
    mounted: function() {
        let diagramInstance: Diagram;
        let diagramObj: any = document.getElementById("diagram");
        diagramInstance = diagramObj.ej2_instances[0];
        let saveData: string;
//returns serialized string of the Diagram
saveData = diagramInstance.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.

//Saves the string in to 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.


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

let diagramElement = document.getElementById('element');
let diagram: Object[] = diagramElement.ej2_instances[0];

//Loads the Diagram from saved json data

Note: Before loading a new diagram, existing diagram is cleared.