Search results

# Serialization in React Diagram component

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

## Save

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.

``````let diagramElement = document.getElementById('element');
let diagram: Object[] = diagramElement.ej2_instances;
let saveData: string;
//returns serialized string of the Diagram
saveData = 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.

``````//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;

//Loads the diagram from saved json data
``````let diagram: Diagram = new Diagram({
{"ft_lang_label":"__label__en","ft_lang_prob":0.6790234,"math_prob":0.7399465,"size":1633,"snap":"2020-24-2020-29","text_gpt3_token_len":316,"char_repetition_ratio":0.18232045,"word_repetition_ratio":0.08181818,"special_character_ratio":0.1971831,"punctuation_ratio":0.16117217,"nsfw_num_words":0,"has_unicode_error":false,"math_prob_llama3":0.98088366,"pos_list":[0],"im_url_duplicate_count":[null],"WARC_HEADER":"{\"WARC-Type\":\"response\",\"WARC-Date\":\"2020-05-26T13:13:39Z\",\"WARC-Record-ID\":\"<urn:uuid:0a3db94f-6597-47a3-8ed8-507b789f6425>\",\"Content-Length\":\"105684\",\"Content-Type\":\"application/http; msgtype=response\",\"WARC-Warcinfo-ID\":\"<urn:uuid:2b2b4089-0ef0-4bbe-aa9d-c5b1cc2943e0>\",\"WARC-Concurrent-To\":\"<urn:uuid:4123bd7f-cf58-46f1-8dff-4ea24c71bd90>\",\"WARC-IP-Address\":\"13.249.44.59\",\"WARC-Target-URI\":\"https://ej2.syncfusion.com/react/documentation/diagram/serialization/\",\"WARC-Payload-Digest\":\"sha1:3VT554OVV7GVBQ4GI6U6X6VHQDINSYYE\",\"WARC-Block-Digest\":\"sha1:NYHNK4SM4O3C4K4TWTN2HFTTPDQ5IKP3\",\"WARC-Identified-Payload-Type\":\"text/html\",\"warc_filename\":\"/cc_download/warc_2020/CC-MAIN-2020-24/CC-MAIN-2020-24_segments_1590347390758.21_warc_CC-MAIN-20200526112939-20200526142939-00044.warc.gz\"}"}