Revamping the Ug

Author: RamyaSubramaniSF4537

blazor/diagram/scroll-settings.md

@@ -36,6 +36,8 @@ In the following example, the vertical scroll bar is scrolled down by 50 px and
     </ScrollSettings>
 </SfDiagramComponent>
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhysjXFTzpvVLgh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ScrollSettings/ScrollSettings)
 ## How to Update Scroll Status
 
@@ -64,6 +66,8 @@ Programmatically change the scroll offsets at runtime by using the external butt
     }
 }
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVIWNDFzfeFyPFB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ScrollSettings/ScrollStatus)
 
 ## How to Handle the Scroll Changed Event 
@@ -103,6 +107,7 @@ The Diagram control provides the following event for scroll settings.
 
 }
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LthesDXvffnSfzKV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## How to Enable or Disable Auto Scroll 
 Autoscroll feature automatically scrolls the Diagram whenever the Node or Connector is moved beyond the boundary of the diagram. So that, it is always visible during dragging, resizing, and multiple selection operations. Autoscroll is automatically triggered when any one of the following is done towards the edges of the Diagram:
@@ -167,6 +172,7 @@ The auto-scroll behavior in the diagram can be enabled or disabled by using the
     }
 }
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrIsZNlpJHYSVvY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 The auto-scrolling region is limited using [ScrollLimit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_ScrollLimit) property of the [ScrollSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html) class.Please refer [ScrollLimit](scroll-settings#scroll-limit) page for more details about ScrollLimit.
 
@@ -219,6 +225,7 @@ The following example illustrates how to set auto scroll padding.
     }
 }
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBIWttvzTGEtyEB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ScrollSettings/AutoScrollPadding)
 
@@ -248,6 +255,8 @@ The following example illustrates how to specify the scroll limit.
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtryiNXPzflwBSak?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ScrollSettings/ScrollLimit)
 
 To explore about the options , refer [ScrollLimitMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollLimitMode.html).
@@ -299,16 +308,18 @@ The following example illustrates how to sets scroll padding.
     }
 }
 ```
-![Scoll Padding support for node](images/ScrollPadding.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVSCZDFJpkPdyYI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ScrollSettings/ScrollPadding)
 
+![Scoll Padding support for node](images/ScrollPadding.png)
+
 ## How to Restrict Scrollable Area
 Scrolling beyond any particular rectangular area can be restricted using the [ScrollableArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_ScrollableArea) property of scroll settings. To restrict scrolling beyond any custom region, set [ScrollLimit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_ScrollLimit) as “limited.” The following code example illustrates how to customize the scrollable area.
 
 ```cshtml
 @using Syncfusion.Blazor.Diagram
-<SfDiagramComponent Width="50%" Height="300px" Nodes="@nodes">
+<SfDiagramComponent Width="70%" Height="300px" Nodes="@nodes">
     <ScrollSettings  ScrollableArea="@scrollableArea" ScrollLimit="ScrollLimitMode.Limited">
     </ScrollSettings>
 </SfDiagramComponent>
@@ -339,6 +350,8 @@ Scrolling beyond any particular rectangular area can be restricted using the [Sc
     }
 }
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLeCZjlJesCAUEE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ScrollSettings/ScrollableArea)
 ## How to Handle Scroll Settings Property Changes Using Callback Methods
 
@@ -367,6 +380,8 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
     }
 }
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLysZDlzSiITIbl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 ## See also
 
 * [How to Detect Nodes That Cross Page Breaks in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Diagram](https://support.syncfusion.com/kb/article/20111/how-to-detect-nodes-that-cross-page-breaks-in-syncfusion-blazor-diagram)

blazor/diagram/shapes.md

@@ -58,7 +58,9 @@ The following code illustrates how to create a text node.
     }
 }
 ```
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes/TextNode)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVeMjjvpHHwFbIZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes/TextNode)
 
 ![Text Node in Blazor Diagram](images/blazor-diagram-TextNode.png)
 
@@ -94,13 +96,15 @@ The following code illustrates how an image node is created.
             {
                 Type = NodeShapes.Image,
                 //Sets the source to the image shape
-                Source = "/diagram/images/productmanager.png"
+                Source = "https://cdn.syncfusion.com/content/images/company-logos/Syncfusion_Logo_Image.png"
             }
         };
         nodes.Add(node);
     }
 }
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNByCDZOBKhUldMd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes/ImageShape)
 
 ![Image Node in Blazor Diagram](images/blazor-diagram-image-node.png)
@@ -143,6 +147,8 @@ The following code illustrates how to add a Base64 image to the image node.
     }
 }
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBICDtlzdkNlPxo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes/Base64image)
 
 ![Base64 Image Node in Blazor Diagram](images/blazor-diagram-base64-image-node.png)
@@ -189,6 +195,8 @@ Stretch and align the image content anywhere but within the node boundary. The [
     }
 }
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNryMtjFfxupxJNV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes/ImageAlign)
 
 * [ImageAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ImageShape.html#Syncfusion_Blazor_Diagram_ImageShape_ImageAlign) property of the shape helps to align the image based on the x and y values in the node boundary. The following table illustrates the various image alignments in the node boundary.
@@ -294,6 +302,8 @@ HTML elements can be embedded in the diagram by setting the node Shape type to [
     }
 }
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXheMZZvpQZVXgoy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes/HTMLShape)
 
 ![HTML Node Template in Blazor Diagram](images/blazor-diagram-html-node-template.png)
@@ -342,6 +352,8 @@ The following code example illustrates how to create a basic shape.
     }
 }
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrosZDvfQBMblZv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes/BasicShape)
 
 N> By default, the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Shape) property of the node is set as **Basic**. Default property for Shape is Rectangle.
@@ -393,6 +405,8 @@ To create a path node, set the shape as **Path**. The [Data](https://help.syncfu
     };
 }
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrSiXNFzQVQgiZR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes/PathShape)
 
 ![Path Shape Node in Blazor Diagram](images/blazor-diagram-path-shape-node.png)
@@ -434,6 +448,8 @@ The [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlowS
     }
 }
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrSitZPfwqrXoFd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes/FlowShape)
 
 The list of flow shapes are as follows.
@@ -491,6 +507,8 @@ The diagram provides support to embed SVG element into a node. The Shape propert
     }
 }
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBeWXXlpcUFFGvt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes/SVGShape)
 
 ![SVG Node in Blazor Diagram](images/blazor-diagram-svg-node.png)
@@ -537,6 +555,8 @@ The following code example illustrates how to create a BPMN shape.
     }
 }
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtryCXjbzmprSCAB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes)
 
 For more information about node constraints, refer to the [BPMN Shapes](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes/BPMNShape).