syncfusion-content · SyncfusionBuild · Dec 11, 2024 · Dec 11, 2024
diff --git a/ej2-javascript/diagram/bpmn-activities.md b/ej2-javascript/diagram/bpmn-activities.md
@@ -342,7 +342,7 @@ A subprocess is defined as an event subprocess, when it is triggered by an event
 
 ##### Transaction subprocess
 
-* [`transaction`](../api/diagram/bpmnSubProcess#transaction-bpmntransactionsubprocessmodel) is a set of activities that logically belong together, in which all contained activities must complete their parts of the transaction; otherwise the process is undone. The execution result of a transaction is one of Successful Completion, Unsuccessful Completion (Cancel), and Hazard (Exception). The [`events`](../api/diagram/bpmnSubProcess#event-bpmnsubeventmodel) property of subprocess allows to represent these results as an event attached to the subprocess.
+* [`transaction`](../api/diagram/bpmnSubProcess/#transaction) is a set of activities that logically belong together, in which all contained activities must complete their parts of the transaction; otherwise the process is undone. The execution result of a transaction is one of Successful Completion, Unsuccessful Completion (Cancel), and Hazard (Exception). The [`events`](../api/diagram/bpmnSubProcess/#events) property of subprocess allows to represent these results as an event attached to the subprocess.
 
 * The event object allows you to define the type of event by which the subprocess will be triggered. The name of the event can be defined to identify the event at runtime.
 

diff --git a/ej2-javascript/diagram/bpmn-dataObject.md b/ej2-javascript/diagram/bpmn-dataObject.md
@@ -13,7 +13,7 @@ domainurl: ##DomainURL##
 
 ## Data Object
 
-A data object represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a [`data object`](../api/diagram/bpmnDataObject), set the shape as **DataObject** and the [`type`](../api/diagram/bpmnDataObjects/) property defines whether data is an input or an output. You can create multiple instances of data object with the collection property of data.
+A data object represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a [`data object`](../api/diagram/bpmnDataObject), set the shape as **DataObject** and the [`type`](../api/diagram/bpmnDataObject/#type) property defines whether data is an input or an output. You can create multiple instances of data object with the collection property of data.
 
 {% if page.publishingplatform == "typescript" %}
 

diff --git a/ej2-javascript/diagram/bpmn-events.md b/ej2-javascript/diagram/bpmn-events.md
@@ -52,7 +52,7 @@ The [`event`](../api/diagram/bpmnEvent#event-bpmnevents) property of the node al
 
 ## BPMN event trigger
 
-Event triggers are notated as icons inside the circle and they represent the specific details of the process. The [`trigger`](../api/diagram/bpmnEvent#trigger-bpmntriggers) property of the node allows you to set the type of trigger and by default, it is set as **none**. The following table illustrates the type of event triggers.
+Event triggers are notated as icons inside the circle and they represent the specific details of the process. The [`trigger`](../api/diagram/bpmnEvent/#trigger ) property of the node allows you to set the type of trigger and by default, it is set as **none**. The following table illustrates the type of event triggers.
 
 | Triggers | Start | Non-Interrupting Start | Intermediate | Non-Interrupting Intermediate | Throwing Intermediate | End |
 | -------- | -------- | -------- | -------- | -------- | -------- | -------- |

diff --git a/ej2-javascript/diagram/context-menu.md b/ej2-javascript/diagram/context-menu.md
@@ -51,7 +51,7 @@ Diagram provides some default context menu items to ease the execution of some f
 
 Context menus can be customized for individual nodes by defining specific menu items beyond the default options. To add additional context menu items, you need to define and incorporate them into the [`items`](../api/diagram/contextMenuItemModel/) property of the context menu.
 
-Each custom item can be defined with specific text and ID using the [`text`](../api/diagram/contextMenuItemModel/#text) and [`ID`](../api/diagram/contextMenuItemModel/#id) properties, respectively. Additionally, you can enhance visual cues by associating icons through the [`iconCss`](../api/diagram/contextMenuItemModel/#iconcss) for enabling the use of font icons. The [`target`](../api/diagram/contextMenuItemModel/#target) property specifies where each menu item should appear, and separators can be included using the [`separator`](..api/diagram/contextMenuItemModel/#separator) property to visually group menu items. This flexibility allows for a tailored user interface that meets specific application needs efficiently. Nested menu items are defined within the [`items`](../api/diagram/contextMenuItemModel/#items) property of a parent menu item.
+Each custom item can be defined with specific text and ID using the [`text`](../api/diagram/contextMenuItemModel/#text) and [`ID`](../api/diagram/contextMenuItemModel/#id) properties, respectively. Additionally, you can enhance visual cues by associating icons through the [`iconCss`](../api/diagram/contextMenuItemModel/#iconcss) for enabling the use of font icons. The [`target`](../api/diagram/contextMenuItemModel/#target) property specifies where each menu item should appear, and separators can be included using the [`separator`](../api/diagram/contextMenuItemModel/#separator) property to visually group menu items. This flexibility allows for a tailored user interface that meets specific application needs efficiently. Nested menu items are defined within the [`items`](../api/diagram/contextMenuItemModel/#items) property of a parent menu item.
 
 ### To Display custom menu alone
 
@@ -256,7 +256,7 @@ In the following example, menu items are rendered with shortcut key codes for sp
 |Event|Description|
 |----|----|
 |[`contextMenuBeforeItemRender`](../api/diagram/#contextmenubeforeitemrender)|Triggers while initializing each menu item.|
-|[`contextMenuOpen`](../api/diagram/diagramBeforeMenuOpenEventArgs/)|Triggers upon right-click before opening the context menu.|
+|[`contextMenuOpen`](../api/diagram/#contextmenuopen)|Triggers upon right-click before opening the context menu.|
 |[`contextMenuClick`](../api/diagram/#contextmenuclick)|Triggers when a menu item is clicked.|
 
 The following example shows how to get these events.

diff --git a/ej2-javascript/diagram/events.md b/ej2-javascript/diagram/events.md
@@ -18,7 +18,7 @@ Events in diagrams are triggered during interactions with diagram elements, allo
 The [`load`](../api/diagram/iLoadEventArgs/) event triggers before the diagram load.
 
 ## Loaded Event
-The [`loaded`](../api/diagram/#loaded) event triggers when all diagram elements are loaded using [`loadDiagram`](../api/diagram#loadDiagram) method. You can use this event to customize diagram elements during the loading process.
+The [`loaded`](../api/diagram/#loaded) event triggers when all diagram elements are loaded using [`loadDiagram`](../api/diagram/#loaddiagram) method. You can use this event to customize diagram elements during the loading process.
 
 ```javascript
 var diagram = new ej.diagrams.Diagram({

diff --git a/ej2-javascript/diagram/grid-lines.md b/ej2-javascript/diagram/grid-lines.md
@@ -13,7 +13,7 @@ domainurl: ##DomainURL##
 
 Gridlines are crisscross lines drawn in diagram page like the lines on traditional graph paper. It helps to position the diagram elements on the diagram page.
 
-The [`snapSettings`](../api/diagram#snapsettings-SnapSettingsModel) property is used to customize the gridlines and control the snapping behavior in the diagram.
+The [`snapSettings`](../api/diagram/#snapsettings) property is used to customize the gridlines and control the snapping behavior in the diagram.
 
 ## Customize the gridlines visibility
 
@@ -55,7 +55,7 @@ To show only horizontal/vertical gridlines or to hide gridlines, refer to [`Cons
 
 The appearance of the gridlines can be customized by using a set of predefined properties.
 
-* The [`horizontalGridLines`](../api/diagram/snapSettings#horizontalgridlines-GridlinesModel) and the [`verticalGridLines`](../api/diagram/snapSettings#verticalgridlines-GridlinesModel) properties allow you to customize the appearance of the horizontal and vertical gridlines respectively.
+* The [`horizontalGridLines`](../api/diagram/snapSettings/#horizontalgridlines) and the [`verticalGridLines`](../api/diagram/snapSettings/#verticalgridlines) properties allow you to customize the appearance of the horizontal and vertical gridlines respectively.
 
 * The horizontal gridlines [`lineColor`](../api/diagram/gridlines#linecolor-string) and [`lineDashArray`](../api/diagram/gridlines#linedasharray-string) properties are used to customizes the line color and line style of the horizontal gridlines.
 
@@ -312,7 +312,7 @@ The following code example demonstrates how to set the `snapLineColor` property
 
 ## Customization of snap intervals
 
-By default, the objects are snapped towards the nearest gridline. The gridline or position towards where the diagram object snaps can be customized with the horizontal gridlines’s [`snapInterval`](../api/diagram/gridlines#snapintervals-number) and the vertical gridlines’s [`snapInterval`](../api/diagram/gridlines#snapintervals-number) properties.
+By default, the objects are snapped towards the nearest gridline. The gridline or position towards where the diagram object snaps can be customized with the horizontal gridlines’s [`snapInterval`](../api/diagram/gridlines/#snapintervals) and the vertical gridlines’s [`snapInterval`](../api/diagram/gridlines/#snapintervals) properties.
 
 {% if page.publishingplatform == "typescript" %}
 

diff --git a/ej2-javascript/diagram/group.md b/ej2-javascript/diagram/group.md
@@ -18,7 +18,7 @@ Group is used to cluster multiple nodes and connectors into a single element. It
 
 ## Add group when initializing diagram
 
-A group can be added to the diagram model through [`nodes`](../api/diagram#nodes-NodeModel) collection. To define an object as group, add the child objects to the [`children`](../api/diagram/node#children-string) collection of the group. The following code illustrates how to create a group node.
+A group can be added to the diagram model through [`nodes`](../api/diagram/#nodes) collection. To define an object as group, add the child objects to the [`children`](../api/diagram/node/#children) collection of the group. The following code illustrates how to create a group node.
 
 * While creating group, its child node need to be declared before the group declaration.
 
@@ -85,7 +85,7 @@ The following code illustrates how a group  at runtime.
 
 ## UnGroup nodes at runtime
 
-Group node can be unGrouped dynamically, by using the [`diagram.unGroup`](../api/diagram/#unGroup) method. The following code example shows how to unGroup group node at runtime.
+Group node can be unGrouped dynamically, by using the [`diagram.unGroup`](../api/diagram/#ungroup) method. The following code example shows how to unGroup group node at runtime.
 
 {% if page.publishingplatform == "typescript" %}
 
@@ -198,7 +198,7 @@ diagram.addChildToGroup(groupNode, childNode);
 
 ### Remove children from group at runtime
 
-A specific child from a group node can be removed at runtime by utilizing the diagram method [`removeChildFromGroup`](../api/diagram/#removeChildFromGroup).
+A specific child from a group node can be removed at runtime by utilizing the diagram method [`removeChildFromGroup`](../api/diagram/#removechildfromgroup).
 
 This functionality is achieved by passing the group and its children as arguments to the method.
 
@@ -417,7 +417,7 @@ The following code illustrates how to add canvas panel.
 
 * Stack panel is used to arrange its children in a single line or stack order, either vertically or horizontally.
 
-* It controls spacing by setting margin properties of child and padding properties of group. By default, a stack panel’s [`orientation`](../api/diagram/stackPanel#orientation-Orientation) is vertical.
+* It controls spacing by setting margin properties of child and padding properties of group. By default, a stack panel’s [`orientation`](../api/diagram/stackPanel/#orientation) is vertical.
 
 The following code illustrates how to add a stack panel.
 

diff --git a/ej2-javascript/diagram/js/commands.md b/ej2-javascript/diagram/js/commands.md
@@ -397,7 +397,7 @@ The following code illustrates how to execute the bringToCenter command.
 
 ## FitToPage
 
-The [`fitToPage`](../api/diagram/#fittopage) command adjusts the diagram content to fit within the viewport, considering either width, height, or the entire content. The fitToPage method takes one parameter, [`fitOptions`](api/diagram/iFitOptions/), which specifies the options for fitting the diagram to the page.
+The [`fitToPage`](../api/diagram/#fittopage) command adjusts the diagram content to fit within the viewport, considering either width, height, or the entire content. The fitToPage method takes one parameter, [`fitOptions`](../api/diagram/#fittopage), which specifies the options for fitting the diagram to the page.
 
 ### FitOptions
 

diff --git a/ej2-javascript/diagram/js/complex-layout.md b/ej2-javascript/diagram/js/complex-layout.md
@@ -11,7 +11,7 @@ domainurl: ##DomainURL##
 
 # Complex hierarchical tree layout in ##Platform_Name## Diagram control
 
-Complex hierarchical tree layout arranges nodes in a tree-like structure, where the child node can have more than one parent. This layout is an extended version of the hierarchical tree layout. To create a complex hierarchical tree, the [`type`](../api/diagram/layout) property of layout should be set as `ComplexHierarchicalTree`.
+Complex hierarchical tree layout arranges nodes in a tree-like structure, where the child node can have more than one parent. This layout is an extended version of the hierarchical tree layout. To create a complex hierarchical tree, the [`type`](../api/diagram/layout/#type) property of layout should be set as `ComplexHierarchicalTree`.
 
 ## Complex hierarchical tree layout with nodes and connectors
 
@@ -50,7 +50,7 @@ N> In Diagram Layouts, all root nodes will always render at the same level. This
 
 ## Line Distribution
 
-Line distribution is used to arrange the connectors without overlapping in automatic layout. In some cases, the automatic layout connectors connecting to the nodes will be overlapped with one another. So user can decide whether the segment of each connector from a single parent node should be same point or different point. The [`connectionPointOrigin`](../api/diagram/layout) property of layout is used to enable or disable the line distribution in layout. By default ConnectionPointOrigin will be `SamePoint`.
+Line distribution is used to arrange the connectors without overlapping in automatic layout. In some cases, the automatic layout connectors connecting to the nodes will be overlapped with one another. So user can decide whether the segment of each connector from a single parent node should be same point or different point. The [`connectionPointOrigin`](../api/diagram/layout/#connectionpointorigin) property of layout is used to enable or disable the line distribution in layout. By default ConnectionPointOrigin will be `SamePoint`.
 
 The following code example illustrates how to create a complex hierarchical tree with line distribution.
 

diff --git a/ej2-javascript/diagram/js/connector-bezier.md b/ej2-javascript/diagram/js/connector-bezier.md
@@ -38,7 +38,7 @@ To create a bezier segment, the [`segment.type`](../api/diagram/segments) is set
 * Bezier control points can be positioned in two ways.
 
 * When setting control point positions using the The [`point1`](../api/diagram/bezierSegment#point1-PointModel) and [`point2`](../api/diagram/bezierSegment#point2-PointModel)  properties, the control point remains fixed in its set position while dragging connector end points.
-* When setting control point positions using the [`vector1`](../api/diagram/bezierSegment#vector1-VectorModel) and [`vector2`](../api/diagram/bezierSegment#vector2-VectorModel) properties, the control point dynamically adjusts to maintain the angle and distance originally set while moving the connector end points.
+* When setting control point positions using the [`vector1`](../api/diagram/bezierSegment/#vector1) and [`vector2`](/api/diagram/bezierSegment/#vector2) properties, the control point dynamically adjusts to maintain the angle and distance originally set while moving the connector end points.
 
 #### Point
 
@@ -59,7 +59,7 @@ The [`point1`](../api/diagram/bezierSegment#point1-PointModel) and [`point2`](..
 
 #### Vector
 
-The [`vector1`](../api/diagram/bezierSegment#vector1-VectorModel) and [`vector2`](../api/diagram/bezierSegment#vector2-VectorModel) properties of bezier segment enable you to define the vectors. The following code illustrates how to configure a bezier curve with vectors.
+The [`vector1`](../api/diagram/bezierSegment/#vector1) and [`vector2`](../api/diagram/bezierSegment/#vector2) properties of bezier segment enable you to define the vectors. The following code illustrates how to configure a bezier curve with vectors.
 
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
@@ -118,9 +118,9 @@ This feature allows users to choose whether to reset the control points of bezie
 
 ### How to customize Bezier Segment Thumb Size
 
-Bezier segment thumbs default to size 10. This can be adjusted globally or for individual connectors using the [`segmentThumbSize`](../api/diagram#segmentThumbSize-SegmentThumbSize) property.
-To change the thumb size for all Bezier connectors, set the [`segmentThumbSize`](../api/diagram#segmentThumbSize-SegmentThumbSize) property in the diagram’s model.
-To customize the thumb size for a specific connector, disable the [`InheritSegmentThumbSize`](../api/diagram/connectorConstraints) constraint, then set the desired [`segmentThumbSize`](../api/diagram#segmentThumbSize-SegmentThumbSize).
+Bezier segment thumbs default to size 10. This can be adjusted globally or for individual connectors using the [`segmentThumbSize`](../api/diagram/#segmentthumbsize) property.
+To change the thumb size for all Bezier connectors, set the [`segmentThumbSize`](../api/diagram/#segmentthumbsize) property in the diagram’s model.
+To customize the thumb size for a specific connector, disable the [`InheritSegmentThumbSize`](../api/diagram/connectorConstraints) constraint, then set the desired [`segmentThumbSize`](../api/diagram/#segmentthumbsize).
 
 {% tabs %}
 {% highlight js tabtitle="index.js" %}