Integrated latest changes at 11-08-2024 4:31:24 PM

Author: SyncfusionBuild

ej2-react/diagram/connector-customization.md

@@ -11,6 +11,10 @@ domainurl: ##DomainURL##
 
 Diagram allows you to customize the connector appearances. The following topics shows how to customize several properties of the connectors.
 
+To customize the appearance, padding, and bridging of the connectors in the React Diagram component, refer to the video link below.
+
+{% youtube "https://www.youtube.com/watch?v=pn02S_rwupw" %}
+
 ## Decorator
 
 * Starting and ending points of a connector can be decorated with some customizable shapes like arrows, circles, diamond, or path. The connection end points can be decorated with the [`sourceDecorator`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#sourcedecorator) and [`targetDecorator`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#targetdecorator) properties of the connector.

ej2-react/diagram/export.md

@@ -38,6 +38,9 @@ const root = ReactDOM.createRoot(document.getElementById('diagram'));
 root.render(<App />);
 
 ```
+To export the React Diagram elements in various formats, refer to below video link.
+
+{% youtube "https://www.youtube.com/watch?v=IkWXjhRE-o0" %}
 
 ## Exporting options
 

ej2-react/diagram/nodes-customization.md

@@ -10,6 +10,10 @@ domainurl: ##DomainURL##
 
 # Appearence of a nodes in React Diagram control
 
+To customize the appearance and position of nodes in the React Diagram component, refer to the video link below.
+
+{% youtube "https://www.youtube.com/watch?v=pn02S_rwupw" %}
+
 ## Common values to the node.
 
 The [`getNodeDefaults`](https://ej2.syncfusion.com/react/documentation/api/diagram/#getnodedefaults) property in the EJ2 Diagram control allows you to define default settings for nodes based on specific conditions or requirements.

ej2-react/diagram/nodes-positioning.md

@@ -10,6 +10,10 @@ domainurl: ##DomainURL##
 
 # Positioning a node in React Diagram control
 
+To customize the position of nodes in the React Diagram component, refer to the video link below.
+
+{% youtube "https://www.youtube.com/watch?v=pn02S_rwupw" %}
+
 ## Position
 
 * Position of a node is controlled by using its [`offsetX`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#offsetx) and [`offsetY`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#offsety) properties. By default, these offset properties represent the distance between the origin of the diagram’s page and node’s center point.

ej2-react/diagram/page-settings.md

@@ -12,6 +12,10 @@ domainurl: ##DomainURL##
 
 Page settings allow customization of the appearance, size, and orientation of the diagram page.
 
+To customize the diagram page settings, insert page breaks, display multiple pages, and change the orientation of the canvas in the EJ2 React Diagram, refer to the video link below.
+
+{% youtube "https://www.youtube.com/watch?v=pn02S_rwupw" %}
+
 ## Page size and appearance
 
 The [`width`](https://helpej2.syncfusion.com/react/documentation/api/diagram/pageSettings/#width) and [`height`](https://helpej2.syncfusion.com/react/documentation/api/diagram/pageSettings/#height) properties in page settings determine the size of the page. Additionally, the [`background`](https://helpej2.syncfusion.com/react/documentation/api/diagram/backgroundModel/) property allows customization of the page's appearance. The [`color`](https://helpej2.syncfusion.com/react/documentation/api/diagram/backgroundModel/#color) property of background is used to define the color of the page. The [`margin`](https://helpej2.syncfusion.com/react/documentation/api/diagram/marginModel/) property defines the page margins.

ej2-react/diagram/print.md

@@ -35,6 +35,10 @@ root.render(<App />);
 
 >Note: To Print diagram you need to inject `PrintAndExport` in the diagram.
 
+To print the React Diagram elements in various formats, refer to the video link below.
+
+{% youtube "https://www.youtube.com/watch?v=IkWXjhRE-o0" %}
+
 ## Print Options
 
 The diagram can be customized while printing using the following properties of [`printOptions`](https://ej2.syncfusion.com/react/documentation/api/diagram/iPrintOptions/).

ej2-react/diagram/serialization.md

@@ -14,6 +14,10 @@ domainurl: ##DomainURL##
 
 Serialization involves saving the diagram's state as a JSON string, which can then be stored in a database, file, or other storage medium. When needed, the serialized string can be deserialized to recreate the diagram in its previous state.
 
+To easily save the contents of the diagram as a JSON string or file stream, and load it from the saved file, refer to the video link below.
+
+{% youtube "https://www.youtube.com/watch?v=IkWXjhRE-o0" %}
+
 ## Save
 
 The diagram is serialized as string while saving. The client-side method, [`saveDiagram`](https://ej2.syncfusion.com/react/documentation/api/diagram/#savediagram), helps to serialize the diagram as a string. This method captures the entire diagram's configuration and content, converting it into a string representation.