diff --git a/blazor/diagram-component/commands.md b/blazor/diagram-component/commands.md
index 2e14311c0d..6c30789148 100644
--- a/blazor/diagram-component/commands.md
+++ b/blazor/diagram-component/commands.md
@@ -18,6 +18,7 @@ There are several commands available in the diagram as follows.
* Grouping commands
* Zoom commands
* Undo/Redo commands
+* FitToPage commands
## Alignment commands
@@ -1048,4 +1049,165 @@ The following code example shows how to disable a command and how to modify the
}
}
}
-```
\ No newline at end of file
+```
+### FitToPage command in Blazor Diagram
+
+The FitToPage diagram is used to bring the entire diagram into view. The [FitOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FitOptions.html) parameter is used to customize the FitToPage command behavior.
+If the parameter is null, the entire diagram is fit into the view.
+
+The following code illustrates how to execute the FitToPage command.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+@using Node = Syncfusion.Blazor.Diagram.Node
+
+
+
+@code {
+ //Intialize of all the variables, methods and classes.
+ public SfDiagramComponent diagram;
+ FitOptions options = new FitOptions() {Mode = FitMode.Both, Region = DiagramRegion.Content };
+ DiagramObjectCollection nodes = new DiagramObjectCollection();
+ DiagramObjectCollection connectors = new DiagramObjectCollection();
+ string selectedMode;
+ string selectedRegion;
+
+ protected override void OnInitialized()
+ {
+ Node node1 = new Node()
+ {
+ ID = "node1",
+ OffsetX = 100,
+ OffsetY = 100,
+ Width = 100,
+ Height = 100,
+ Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" },
+ };
+ Node node2 = new Node()
+ {
+ ID = "node2",
+ OffsetX = 500,
+ OffsetY = 700,
+ Width = 100,
+ Height = 100,
+ Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" },
+ };
+ Node node3 = new Node()
+ {
+ ID = "node3",
+ OffsetX = 500,
+ OffsetY = 500,
+ Width = 100,
+ Height = 100,
+ Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" },
+ };
+ Node node4 = new Node()
+ {
+ ID = "node4",
+ OffsetX = 1000,
+ OffsetY = 700,
+ Width = 100,
+ Height = 100,
+ Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" },
+ };
+ Node node5 = new Node()
+ {
+ ID = "node5",
+ OffsetX = 1150,
+ OffsetY = 400,
+ Width = 100,
+ Height = 100,
+ Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" },
+ };
+ Node node6 = new Node()
+ {
+ ID = "node6",
+ OffsetX = 500,
+ OffsetY = 1000,
+ Width = 100,
+ Height = 100,
+ Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" },
+ };
+ nodes.Add(node1);
+ nodes.Add(node2);
+ nodes.Add(node3);
+ nodes.Add(node4);
+ nodes.Add(node5);
+ nodes.Add(node6);
+ }
+ private void Mode(ChangeEventArgs e)
+ {
+ if (e.Value != null)
+ {
+ selectedMode = (string)e.Value;
+ switch (selectedMode)
+ {
+ case "Both":
+ options = new FitOptions();
+ options.Mode = FitMode.Both;
+ break;
+ case "Width":
+ options = new FitOptions();
+ options.Mode = FitMode.Width;
+ break;
+ case "Height":
+ options = new FitOptions();
+ options.Mode = FitMode.Height;
+ break;
+ }
+ }
+ }
+
+
+ private void RegionChange(ChangeEventArgs e)
+ {
+ if (e.Value != null)
+ {
+ selectedRegion = (string)e.Value;
+ switch (selectedRegion)
+ {
+ case "PageSettings":
+ options = new FitOptions();
+ options.Region = DiagramRegion.PageSettings;
+ break;
+ case "Content":
+ options = new FitOptions();
+ options.Region = DiagramRegion.Content;
+ break;
+ }
+ }
+ }
+
+ //fit the diagram to the page with respect to mode and region.
+ private void FitToPage()
+ {
+ diagram.FitToPage(options);
+ }
+}
+```
+### FitToPage Parameter
+
+The [FitOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FitOptions.html) parameter is used to customize the FitToPage command behavior.
+
+### FitToPage
+
+The [FitToPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FitMode.html) is used to enable or disable the fit to page behavior with respect to height or width.
+
+|Values | Description |
+|---------|----------------|
+|FitToWidth | It is used to enable the fit to page behavior only with respect to width. |
+|FitToHeight | It is used to enable the fit to page behavior only with respect to height. |
+|Both | It is used to enable the fit to page behavior with respect to both the height and width of the diagram. |
+
+
+
+### Region
+
+The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramRegion.html) is used to set the region where fittopage should be performed in the diagram.
+
+|Values | Description |
+|------------|------------------|
+|PageSettings | It is used to perform the fit to page based on the width and height of the page |
+|Content | It is used to perform the fit to page for the content area only |
+
+
\ No newline at end of file
diff --git a/blazor/diagram-component/images/FitToPage.gif b/blazor/diagram-component/images/FitToPage.gif
new file mode 100644
index 0000000000..f19e940cf6
Binary files /dev/null and b/blazor/diagram-component/images/FitToPage.gif differ
diff --git a/blazor/diagram-component/images/Region.gif b/blazor/diagram-component/images/Region.gif
new file mode 100644
index 0000000000..fe432fb9c1
Binary files /dev/null and b/blazor/diagram-component/images/Region.gif differ