Merge pull request #4800 from syncfusion-content/903090-Mermaid

903090 - UG for Mermaid import and export support

Author: Keerthivasan-Ramamoorthy

blazor/diagram/serialization.md

@@ -134,4 +134,33 @@ The diagram provides support to save and load the diagram using file stream. The
     }
 ```
 
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Serialization/SaveAndLoad)
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Serialization/SaveAndLoad)
+
+## Importing and Exporting Mind Map and Flowchart Diagrams using Mermaid Syntax
+
+The [SfDiagramComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) supports saving diagrams in Mermaid syntax format. Mermaid is a Markdown-inspired syntax that automatically generates diagrams. With this functionality, you can easily create mind maps and flowcharts from Mermaid syntax data, simplifying the visualization of complex ideas and processes without manual drawing. Additionally, you can export your mind maps and flowcharts to Mermaid syntax, allowing for easy sharing, editing, and use across different platforms.
+
+### Save diagram as Mermaid syntax
+
+ The [SaveDiagramAsMermaid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SaveDiagramAsMermaid) method serializes the diagram into a Mermaid-compatible string format. This method is specifically designed for diagrams that utilize Flowchart and Mind map layouts. The following code illustrates how to save the diagram in Mermaid string format.
+
+```cshtml
+SfDiagramComponent Diagram;
+//returns the serialized Mermaid string of the Diagram
+string data = Diagram.SaveDiagramAsMermaid();
+```
+
+### Load diagram from Mermaid syntax
+
+You can load a [diagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) from the serialized Mermaid syntax data using the [LoadDiagramFromMermaidAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_LoadDiagramFromMermaidAsync_System_String_) method. The following code illustrates how to load a diagram from a Mermaid string data.
+
+```cshtml
+SfDiagramComponent Diagram;
+// Retrieves the serialized Mermaid string of the Diagram
+string data = Diagram.SaveDiagramAsMermaid();
+// Loads the Diagram from the saved Mermaid string
+await Diagram.LoadDiagramFromMermaidAsync(data);
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/MermaidSupport).
+
+>**Note:** Mermaid syntax data serialization and deserialization are only supported for Flowchart and Mind map layouts. Please ensure that your diagram uses one of these layouts to successfully load the data.