diff --git a/blazor/barcode/barcodeGenerator.md b/blazor/barcode/barcodeGenerator.md index ead03d15fc..012efcaa7a 100644 --- a/blazor/barcode/barcodeGenerator.md +++ b/blazor/barcode/barcodeGenerator.md @@ -11,7 +11,7 @@ documentation: ug ## Code39 -The Code 39 character set includes digits 0-9, uppercase letters A–Z, and the symbols space, minus (-), plus (+), period (.), dollar ($), slash (/), and percent (%). A special start/stop character is placed at the beginning and end of each barcode. The barcode can be of any length; even more than 25 characters begin to push the bounds. Code 39 is the only type of barcode that does not require a checksum for common use. +The Code 39 character set includes digits **0-9**, uppercase letters **A–Z**, and the **symbols space**, **minus (-)**, **plus (+)**, **period (.)**, **dollar ($)**, **slash (/)**, and **percent (%)**. A special start/stop character is placed at the beginning and end of each barcode. The barcode can be of any length; even more than 25 characters begin to push the bounds. Code 39 is the only type of barcode that does not require a checksum for common use. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -23,7 +23,7 @@ The Code 39 character set includes digits 0-9, uppercase letters A–Z, and the ## Code39 Extended -Code 39 Extended is an enhanced version of Code 39 that supports ASCII character set. In Code 39 Extended, it can encode lowercase letters (a–z) and special keyboard characters by using combinations of standard Code 39 symbols. +Code 39 Extended is an enhanced version of Code 39 that supports ASCII character set. In Code 39 Extended, it can encode lowercase letters (**a–z**) and special keyboard characters by using combinations of standard Code 39 symbols. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -35,7 +35,7 @@ Code 39 Extended is an enhanced version of Code 39 that supports ASCII character ## Code 11 -Code 11 is used primarily for labeling telecommunications equipment. The character set includes digits 0 to 9, a dash (-), and start/stop codes. +Code 11 is used primarily for labeling telecommunications equipment. The character set includes digits **0 to 9**, a **dash (-)**, and **start/stop codes**. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -49,7 +49,7 @@ Code 11 is used primarily for labeling telecommunications equipment. The charact Codabar is a variable-length symbol that encodes the following 20 characters: -0123456789-$:/.+ABCD +**0123456789-$:/.+ABCD** The characters A, B, C, and D serve as start and stop characters. Codabar is used in libraries, blood banks, the package delivery industry and a variety of other information processing applications. @@ -81,7 +81,7 @@ The value to be encoded must be 8 digits Pharmacode (prefix it with ‘0’ if n ## Code 93 -Code 93 is designed to complement and improve Code 39. It represents the entire ASCII character set through combinations of two characters. Code 93 is a continuous, variable-length symbology and produces denser code. The Standard Mode (default implementation) can encode uppercase letters (A-Z), digits (0-9), and special characters like *, -, $, %, (Space), ., /, and +. +Code 93 is designed to complement and improve Code 39. It represents the entire ASCII character set through combinations of two characters. Code 93 is a continuous, variable-length symbology and produces denser code. The Standard Mode (default implementation) can encode uppercase letters (**A-Z**), digits (**0-9**), and special characters like ***, -, $, %, (Space), ., /, and +**. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -107,7 +107,7 @@ Code 128 is a variable-length, high-density, alphanumeric, linear bar code symbo ### Code 128 Special characters -The last seven characters of Code Sets A and B (character values 96-102) and the last three characters of Code Set C (character values 100-102) are special non-data characters with no ASCII character equivalents that have a particular significance to the Barcode reading device. +The last seven characters of Code Sets A and B (character values **96-102**) and the last three characters of Code Set C (character values **100-102**) are special non-data characters with no ASCII character equivalents that have a particular significance to the Barcode reading device. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -157,7 +157,7 @@ In barcode generators, Customize the barcode text by using display [Text](https: ## Enable Check Sum -The [EnableCheckSum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfBarcodeGenerator_EnableCheckSum) property specifies an error detection in which some additional characters are added to a barcode to protect the integrity of the barcode data. The default value of this property is set as true for BarcodeType.Code39. +The [EnableCheckSum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfBarcodeGenerator_EnableCheckSum) property specifies an error detection in which some additional characters are added to a barcode to protect the integrity of the barcode data. The default value of this property is set as **true** for `BarcodeType.Code39`. The below code explains how to set the EnableCheckSum property to hide the extra characters displayed at the end of the barcode. diff --git a/blazor/barcode/qrcodegenerator.md b/blazor/barcode/qrcodegenerator.md index 003fe379b7..1448edcb31 100644 --- a/blazor/barcode/qrcodegenerator.md +++ b/blazor/barcode/qrcodegenerator.md @@ -11,7 +11,7 @@ documentation: ug ## QR Code -The [Blazor QR Code](https://www.syncfusion.com/blazor-components/blazor-barcode) is a two-dimensional barcode composed of a grid of dark and light dots or blocks that form a square. The data encoded in the barcode can be numeric, alphanumeric, or Shift Japanese Industrial Standards (JIS8) characters. The QR Code uses version from 1 to 40. Version 1 measures 21 modules x 21 modules, Version 2 measures 25 modules x 25 modules, and so on. The number of modules increases in steps of 4 modules per side up to Version 40, which measures 177 modules x 177 modules. Each version has its own capacity. By default, the barcode control automatically sets the version according to the length of the input text. The QR Barcodes are designed for industrial uses and are also commonly used in consumer advertising. +The [Blazor QR Code](https://www.syncfusion.com/blazor-components/blazor-barcode) is a two-dimensional barcode composed of a grid of dark and light dots or blocks that form a square. The data encoded in the barcode can be numeric, alphanumeric, or Shift Japanese Industrial Standards (JIS8) characters. The QR Code uses version from **1 to 40**. Version 1 measures 21 modules x 21 modules, Version 2 measures 25 modules x 25 modules, and so on. The number of modules increases in steps of 4 modules per side up to Version 40, which measures 177 modules x 177 modules. Each version has its own capacity. By default, the barcode control automatically sets the version according to the length of the input text. The QR Barcodes are designed for industrial uses and are also commonly used in consumer advertising. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -61,7 +61,7 @@ In barcode generators, customize the barcode text by using the display [Text](ht ## Error Correction Level -The QR Barcode employs error correction to generate a series of error correction codewords which are added to the data code word sequence in order to enable the symbol to withstand damage without data loss. There are four user–selectable levels of error correction, as shown in the table, that offer the capability of recovery from the following amounts of damage. By default, the [Error correction level](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.ErrorCorrectionLevel.html) is Low. +The QR Barcode employs error correction to generate a series of error correction codewords which are added to the data code word sequence in order to enable the symbol to withstand damage without data loss. There are four user–selectable levels of error correction, as shown in the table, that offer the capability of recovery from the following amounts of damage. By default, the [Error correction level](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.ErrorCorrectionLevel.html) is **Low**. Error Correction Level Table diff --git a/blazor/diagram/annotations/connector-annotation.md b/blazor/diagram/annotations/connector-annotation.md index c698681416..8d7ef34e9a 100644 --- a/blazor/diagram/annotations/connector-annotation.md +++ b/blazor/diagram/annotations/connector-annotation.md @@ -21,7 +21,7 @@ Connector annotations can be precisely positioned using several properties of th ## How to Update Offset Position for Annotations -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Offset) property positions an annotation along the length of the connector segment. It accepts a fractional value from **0** to **1**, where **0** represents the beginning of the segment, **1** represents the end, and **0.5** represents the center. +The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Offset) property positions an annotation along the length of the connector segment. It accepts a fractional value from **0 to 1**, where **0** represents the beginning of the segment, **1** represents the end, and **0.5** represents the center. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/annotations/labels.md b/blazor/diagram/annotations/labels.md index 153513a389..b6ad7baf50 100644 --- a/blazor/diagram/annotations/labels.md +++ b/blazor/diagram/annotations/labels.md @@ -20,6 +20,8 @@ To create and add annotations to nodes and connectors using the Blazor Diagram, {% youtube "youtube:https://www.youtube.com/watch?v=f7Jnl5hSy7I" %} +

+ The following code example demonstrates how to create an annotation for a node and a connector. ```cshtml diff --git a/blazor/diagram/annotations/node-annotation.md b/blazor/diagram/annotations/node-annotation.md index 285a060f49..497ab3b8c6 100644 --- a/blazor/diagram/annotations/node-annotation.md +++ b/blazor/diagram/annotations/node-annotation.md @@ -142,8 +142,8 @@ The following code demonstrates how to align an annotation. A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Annotations/AlignmentOfNodeAnnotation.razor) -N>* The value of the `HorizontalAlignment` is [Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.HorizontalAlignment.html#Syncfusion_Blazor_Diagram_HorizontalAlignment_Center) by default. -
* The value of the `VerticalAlignment` is [Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.VerticalAlignment.html#Syncfusion_Blazor_Diagram_VerticalAlignment_Center) by default. +N>* The value of the `HorizontalAlignment` is **Center** by default. +
* The value of the `VerticalAlignment` is **Center** by default.
* Alignment is positioned based on the offset value. ## How to Change Annotation Margin diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index 486cb1e9d9..ecec3c8e48 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -58,7 +58,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## How to Create a BPMN Activity Task -The [TaskType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_TaskType) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) allows you to define the type of task such as sending, receiving, user-based task, etc. By default, the value of [TaskType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_TaskType) property is set to **None.** This is shown by a small event symbol in the top of the corner. The following code explains how to create different types of BPMN tasks. +The [TaskType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_TaskType) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) allows you to define the type of task such as sending, receiving, user-based task, etc. By default, the value of `TaskType` property is set to **None.** This is shown by a small event symbol in the top of the corner. The following code explains how to create different types of BPMN tasks. ```cshtml @using Syncfusion.Blazor.Diagram @@ -115,7 +115,7 @@ The various types of BPMN tasks are tabulated as follows. ## How to Create a BPMN Activity Collapsed Sub-Process -A [CollapsedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess) is a group of tasks that is used to hide or reveal details of additional levels. The following code explains how to create a [CollapsedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess). +A [CollapsedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess) is a group of tasks that is used to hide or reveal details of additional levels. The following code explains how to create a `CollapsedSubProcess`. ```cshtml @using Syncfusion.Blazor.Diagram @@ -159,7 +159,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ### How to Set Loop Type -[Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) is a task that is internally being looped. The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) allows you to define the type of loop. The default value for [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) is **None**. +[Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) is a task that is internally being looped. The `Loop` property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) allows you to define the type of loop. The default value for `Loop` is **None**. You can define the `Loop` property in BPMN Activity, as shown in the following code. @@ -214,7 +214,7 @@ The following table contains various types of BPMN loops. ### How to Enable Compensation -[IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCompensation) is triggered when the operation is partially failed and enabled it with the [IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCompensation) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). By default, the [IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCompensation) property is set to **false**. +[IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCompensation) is triggered when the operation is partially failed and enabled it with the `IsCompensation` property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). By default, the `IsCompensation` property is set to **false**. ```cshtml @using Syncfusion.Blazor.Diagram @@ -261,7 +261,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync A Call activity is a global sub-process that is reused at various points of the business flow. To create a call activity, enable the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). -N>* By default, the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) property is **false**. +N>* By default, the `IsCall` property is **false**.
* This Property is only applicable for [Task](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_Task) Type Activity. ```cshtml @@ -309,7 +309,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync An Ad-Hoc sub-process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and set it with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsAdhoc) property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). -N>* By default, the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsAdhoc) property is **false**. +N>* By default, the `IsAdhoc` property is **false**.
* This Property is only applicable for [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess) Type Activity. ```cshtml @@ -354,7 +354,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ### How to Set Sub-Process Type -SubProcessType represents the type of task that is being processed. The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_SubProcessType) property of subprocess allows you to define the type of SubProcessType. By default, it is set to [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Default). +SubProcessType represents the type of task that is being processed. The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_SubProcessType) property of subprocess allows you to define the type of SubProcessType. By default, it is set to **Default**. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-store.md b/blazor/diagram/bpmn-shapes/bpmn-data-store.md index 2e7acc7c96..15223eaf7a 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-store.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-store.md @@ -9,7 +9,7 @@ documentation: ug # BPMN Data Store in Blazor Diagram Component -A data store is used to store or access data associated with a business process. To create a data store shape, the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set to [BpmnDataStore](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataStore.html). The following code example explains how to create a data store. +A data store is used to store or access data associated with a business process. To create a data store shape, the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set to **BpmnDataStore**. The following code example explains how to create a data store. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-event.md b/blazor/diagram/bpmn-shapes/bpmn-event.md index 8791ba0e68..ba415e57cf 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-event.md +++ b/blazor/diagram/bpmn-shapes/bpmn-event.md @@ -15,7 +15,7 @@ An [Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnE * **Intermediate** - Indicates the middle of the process. * **End** - Indicates the end of the process, and every business process ends with an event. -The [EventType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEvent.html#Syncfusion_Blazor_Diagram_BpmnEvent_EventType) property of the node allows you to define the type of the event. The default value of the event is [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEventType.html#Syncfusion_Blazor_Diagram_BpmnEventType_Start). The following code example explains how to create a BPMN event. +The [EventType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEvent.html#Syncfusion_Blazor_Diagram_BpmnEvent_EventType) property of the node allows you to define the type of the event. The default value of the event is **Start**. The following code example explains how to create a BPMN event. ```cshtml @using Syncfusion.Blazor.Diagram @@ -60,7 +60,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## How to Create a BPMN Event Trigger -Event triggers are notated as icons inside the circle and they represent the specific details of the process. The [Trigger](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEvent.html#Syncfusion_Blazor_Diagram_BpmnEvent_Trigger) property of the node allows you to set the type of trigger and by default, it is set to [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEventTrigger.html#Syncfusion_Blazor_Diagram_BpmnEventTrigger_None). The following code example explains how to create a BPMN trigger. +Event triggers are notated as icons inside the circle and they represent the specific details of the process. The [Trigger](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEvent.html#Syncfusion_Blazor_Diagram_BpmnEvent_Trigger) property of the node allows you to set the type of trigger and by default, it is set to **None**. The following code example explains how to create a BPMN trigger. ```cshtml diff --git a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md index 5539bd876d..f0540c16b9 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md +++ b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md @@ -9,10 +9,10 @@ documentation: ug # BPMN Expanded Sub-Process in Blazor Diagram Component -An `BpmnExpandedSubProcess` is used to frame a part of the diagram, shows that elements included in it logically belong together, and has no other semantics other than organizing elements. It is represented by a rounded rectangle. +An [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) is used to frame a part of the diagram, shows that elements included in it logically belong together, and has no other semantics other than organizing elements. It is represented by a rounded rectangle. ## How to Create an Expanded Sub-Process -To create an Expanded Sub-Process, define the `Shape` property of the node as [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) and enable `AllowDrop` constraint of the node. +To create an Expanded Sub-Process, define the `Shape` property of the node as `BpmnExpandedSubProcess` and enable `AllowDrop` constraint of the node. The following code example explains how to create a BPMN Expanded Sub-Process. @@ -121,7 +121,7 @@ The following image shows how to add BPMN node into the BPMN ExpandedSubProcess ### How to Set Loop Type - The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) property in the `BpmnExpandedSubProcess` component defines the type of loop behavior for a task that is internally repeated. By default, the Loop property is set to **None**. + The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) property in the `BpmnExpandedSubProcess` component defines the type of loop behavior for a task that is internally repeated. By default, the `Loop` property is set to **None**. The `Loop` property can be configured within the `BpmnExpandedSubProcess` component, as demonstrated in the following example. ```cshtml diff --git a/blazor/diagram/bpmn-shapes/bpmn-gateway.md b/blazor/diagram/bpmn-shapes/bpmn-gateway.md index 95d3e48d0f..a37c7a6c3f 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-gateway.md +++ b/blazor/diagram/bpmn-shapes/bpmn-gateway.md @@ -9,7 +9,7 @@ documentation: ug # BPMN Gateway in Diagram Component -A [BpmnGateway](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) is used to control the flow of a process and it is represented in diamond shape. The [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) property of the `BpmnGateway` can be set with any of the appropriate gateways. By default, the value of `GatewayType` is `None`. The following code example explains how to create a `BPMNGateway`. +A [BpmnGateway](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) is used to control the flow of a process and it is represented in diamond shape. The [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) property of the `BpmnGateway` can be set with any of the appropriate gateways. By default, the value of `GatewayType` is **None**. The following code example explains how to create a `BPMNGateway`. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/commands.md b/blazor/diagram/commands.md index 2651168328..450bc32255 100644 --- a/blazor/diagram/commands.md +++ b/blazor/diagram/commands.md @@ -1097,7 +1097,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn The [Nudge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Nudge_Syncfusion_Blazor_Diagram_Direction_System_Nullable_System_Int32__) commands repositions selected objects by a specified delta in the given direction. -[Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Direction.html) nudge command moves the selected elements towards the specified direction by 1 pixel, by default. +[Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Direction.html) nudge command moves the selected elements towards the specified direction by **1 pixel**, by default. The accepted values of the argument direction are as follows: diff --git a/blazor/diagram/connectors/customization.md b/blazor/diagram/connectors/customization.md index 9a45c47a92..84c2311c7f 100644 --- a/blazor/diagram/connectors/customization.md +++ b/blazor/diagram/connectors/customization.md @@ -23,6 +23,8 @@ To learn more about connector customization, watch the following video: {% youtube "youtube:https://www.youtube.com/watch?v=iKuBSy8mOpE&t=519s" %} +

+ * The following code example illustrates how to create decorators of various shapes. ```cshtml @@ -72,7 +74,7 @@ To learn more about connector customization, watch the following video: ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hDhSsZDdUmUzCzAM?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/Connectors/Customization/Decorator) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Connectors/Customization/Decorator.razor) ### How to Customize Connector Decorator Appearance @@ -141,7 +143,7 @@ The following code example illustrates how to customize the decorator appearance } } ``` -A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Customization/DecoratorAppearance) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Connectors/Customization/DecoratorAppearance.razor) {% previewsample "https://blazorplayground.syncfusion.com/embed/hZhoiZNHqcgvBDIK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Connector with customized decorators in Blazor Diagram](../images/blazor-diagram-decorator.png)" %} @@ -217,7 +219,7 @@ Padding adds space between the connector’s end point and the object to where i } } ``` -A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Customization/Padding) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Connectors/Customization/Padding.razor) {% previewsample "https://blazorplayground.syncfusion.com/embed/htVeWZtdqQzoBYft?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Connector demonstrating source and target padding in Blazor Diagram](../images/blazor-diagram-connector-padding.png)" %} @@ -312,11 +314,11 @@ The following code example illustrates how to enable line bridging. } } ``` -A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Customization/Bridging) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Connectors/Customization/Bridging.razor) >**Note:** Bridging support is not applicable for layout. -The [BridgeSpace](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_BridgeSpace) property of connectors define the width of the line bridging. The default value is **10** pixels. +The [BridgeSpace](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_BridgeSpace) property of connectors define the width of the line bridging. The default value is **10 pixels**. Limitation: [BezierSegment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BezierSegment.html) does not support bridging. @@ -375,7 +377,7 @@ Corner radius rounds the corners of connectors. Set the radius using the [Corner } } ``` -A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Customization/CornerRadius) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Connectors/Customization/CornerRadius.razor) Limitation: [BezierSegment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BezierSegment.html) does not support corner radius. @@ -442,7 +444,7 @@ The following code example illustrates how to customize the segment appearance. ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LNhoCNNxAmxqeFTF?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/Connectors/Customization/SegmentAppearance) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Connectors/Customization/SegmentAppearance.razor) ## How to Enable or Disable Connector Behavior @@ -502,7 +504,7 @@ The following code illustrates how to disable selection. ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BNLIMXjnqwHvfxiD?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/Connectors/Customization/Constraints) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Wasm/Pages/Connectors/Customization/Constraints.razor) ## How to Add Additional Information for Connector @@ -560,7 +562,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VZhysDZxAQmzMPsc?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/Connectors/Customization/CustomProperty) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Connectors/Customization/CustomProperty.razor) ## How to Set Connector Z-Index @@ -602,16 +604,18 @@ The following code illustrates how to render a connector based on stack order. ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hjBIsZDnUcmuZCJG?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/Connectors/Customization/ZIndexProperty) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Connectors/Customization/ZIndexProperty.razor) ## How to Set Hit Padding for Connector -* The [HitPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_HitPadding) refers to the space around the connector's edges. To make it easy to select, selecting when the mouse comes near its vicinity area should be possible. The `HitPadding` property allows you to customize the vicinity area while selecting. The default value is **10** pixels. Within the hit padding region, the connector can be selected and deselected. +* The [HitPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_HitPadding) refers to the space around the connector's edges. To make it easy to select, selecting when the mouse comes near its vicinity area should be possible. The `HitPadding` property allows you to customize the vicinity area while selecting. The default value is **10 pixels**. Within the hit padding region, the connector can be selected and deselected. To learn more about connector hit padding, watch the following segment: {% youtube "https://www.youtube.com/watch?v=iKuBSy8mOpE&t=651s" %} +

+ The following code illustrates how to set hit padding for a connector. ```cshtml @@ -700,7 +704,7 @@ The following code example illustrates how to leave space between the connection ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/rDLSiZjRUwPlqeJk?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/Connectors/Customization/SourcePaddingAndTargetPadding) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Connectors/Customization/SourcePaddingAndTargetPadding.razor) ## How to Set Connection Padding for Connector @@ -752,7 +756,7 @@ The following code example illustrates how to set connection padding for a conne ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BDBIMZZHAQYodScU?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/Connectors/Customization/ConnectionPadding) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Wasm/Pages/Connectors/Customization/ConnectionPadding.razor) ## How to enable Connector Split @@ -831,7 +835,7 @@ The following code illustrates how to enable connector splitting and create conn } } ``` -A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Connectors/Interaction/ConnectorSplitting.razor) {% previewsample "https://blazorplayground.syncfusion.com/embed/LNVSsNXnqvDymRvy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[ConnectorSplitting](../images/ConnectorSplitDemo.gif)" %} @@ -839,7 +843,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## How to Limit Segment Thumbs in a Connector - The [`MaxSegmentThumbs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_MaxSegmentThumbs) property limits the number of segment thumbs displayed on a connector. Segment thumbs are interactive handles that allow users to modify the connector's path. By setting this property, you can limit how many thumbs appear, helping to simplify the user interface and reduce visual complexity. + The [MaxSegmentThumbs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_MaxSegmentThumbs) property limits the number of segment thumbs displayed on a connector. Segment thumbs are interactive handles that allow users to modify the connector's path. By setting this property, you can limit how many thumbs appear, helping to simplify the user interface and reduce visual complexity. ```cshtml @using Syncfusion.Blazor.Diagram @@ -889,7 +893,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn } } ``` -A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Customization/MaxSegmentThumb). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Connectors/Customization/MaxSegmentThumb.razor). {% previewsample "https://blazorplayground.syncfusion.com/embed/rNBSMXDnAFShGTba?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[MaxSegmentThumbs](../images/MaxSegmentThumb.png)" %} @@ -982,7 +986,7 @@ The following example demonstrates how to update the `MaxSegmentThumbs` value at ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hZhoCDtRUlyaTMHD?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/Connectors/Customization/MaxSegmentThumbRuntime). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Connectors/Customization/MaxSegmentThumbRuntime.razor). >**Note:** The `MaxSegmentThumbs` property is applicable only when the connector type is set to **Orthogonal**. diff --git a/blazor/diagram/connectors/interactions.md b/blazor/diagram/connectors/interactions.md index 2ab44a84ad..c6a4fc924d 100644 --- a/blazor/diagram/connectors/interactions.md +++ b/blazor/diagram/connectors/interactions.md @@ -295,7 +295,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### Routing Types -Determines the routing strategy used for connectors in the diagram. It can be set to either [Classic](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.RoutingTypes.html#Syncfusion_Blazor_Diagram_RoutingTypes_Classic) for faster routing or [Advanced](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.RoutingTypes.html#Syncfusion_Blazor_Diagram_RoutingTypes_Advanced) for more accurate routing with better obstacle avoidance. The routing algorithm can be specified by using [RoutingType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LineRoutingSettings.html#Syncfusion_Blazor_Diagram_LineRoutingSettings_RoutingType) property of [LineRoutingSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LineRoutingSettings.html) class. +Determines the routing strategy used for connectors in the diagram. It can be set to either **Classic** for faster routing or **Advanced** for more accurate routing with better obstacle avoidance. The routing algorithm can be specified by using [RoutingType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LineRoutingSettings.html#Syncfusion_Blazor_Diagram_LineRoutingSettings_RoutingType) property of [LineRoutingSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LineRoutingSettings.html) class. #### Classic Routing @@ -390,7 +390,7 @@ The [Advanced](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.R A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Connectors/Interaction/LineRouting.razor) -**Note:** The default value of [RoutingType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LineRoutingSettings.html#Syncfusion_Blazor_Diagram_LineRoutingSettings_RoutingType) is **Classic**. +**Note:** The default value of `RoutingType` is **Classic**. ### How to Enable or Disable Node Routing @@ -800,7 +800,7 @@ The following table shows the various obstacle padding. | 12 | ![Blazor Diagram ObstaclePadding12 ](../images/blazor-diagram-obstacle-padding12.png) | | 20 | ![Blazor Diagram ObstaclePadding20 ](../images/blazor-diagram-obstacle-padding20.png) | -**Note:** [ObstaclePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LineRoutingSettings.html#Syncfusion_Blazor_Diagram_LineRoutingSettings_ObstaclePadding) property is only applicable when the [RoutingType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LineRoutingSettings.html#Syncfusion_Blazor_Diagram_LineRoutingSettings_RoutingType) property is set to [RoutingTypes.Advanced]. Default value of [ObstaclePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LineRoutingSettings.html#Syncfusion_Blazor_Diagram_LineRoutingSettings_ObstaclePadding) is **12**. +**Note:** [ObstaclePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LineRoutingSettings.html#Syncfusion_Blazor_Diagram_LineRoutingSettings_ObstaclePadding) property is only applicable when the [RoutingType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LineRoutingSettings.html#Syncfusion_Blazor_Diagram_LineRoutingSettings_RoutingType) property is set to [RoutingTypes.Advanced]. Default value of `ObstaclePadding` is **12**. ## How to Avoid Line Overlapping The diagram can prevent connectors from overlapping to enhance clarity and readability. This feature intelligently adjusts connector paths to minimise stacking orthogonal connectors on top of each other, reducing visual clutter and enhancing diagram structure. It is especially useful in complex diagrams with multiple orthogonal connectors, where overlapping lines can make interpretation difficult. diff --git a/blazor/diagram/connectors/segments/straight.md b/blazor/diagram/connectors/segments/straight.md index fc39dd1122..37198f23ac 100644 --- a/blazor/diagram/connectors/segments/straight.md +++ b/blazor/diagram/connectors/segments/straight.md @@ -11,7 +11,7 @@ documentation: ug ## How to Create Straight Segments -To create a straight line, set the connector [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Type) of the segment to [Straight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorSegmentType.html#Syncfusion_Blazor_Diagram_ConnectorSegmentType_Straight). Then add one or more straight segments to the [Segments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Segments) collection and need to specify Type for the connector. The following code example illustrates how to create a default straight segment. +To create a straight line, set the connector [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Type) of the segment to **Straight**. Then add one or more straight segments to the [Segments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Segments) collection and need to specify Type for the connector. The following code example illustrates how to create a default straight segment. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/context-menu.md b/blazor/diagram/context-menu.md index faeeb7b41e..178f9b1683 100644 --- a/blazor/diagram/context-menu.md +++ b/blazor/diagram/context-menu.md @@ -62,7 +62,7 @@ Custom context menu provides an option to add new custom items to the context me ### How to Add Custom and Default Context Menu Items Together -The following code example shows how to add custom context menu items along with the default context menu. Set the [ShowCustomMenuOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_ShowCustomMenuOnly) property to false to render both the custom context menu and default context menu. +The following code example shows how to add custom context menu items along with the default context menu. Set the [ShowCustomMenuOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_ShowCustomMenuOnly) property to **false** to render both the custom context menu and default context menu. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/group.md b/blazor/diagram/group.md index 073f9659cd..bfc778f29a 100644 --- a/blazor/diagram/group.md +++ b/blazor/diagram/group.md @@ -29,6 +29,8 @@ To create a group using Nodes and Connectors in the Blazor Diagram, refer to the {% youtube "youtube:https://www.youtube.com/watch?v=qLIyc9RSytQ" %} +

+ ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/how-to.md b/blazor/diagram/how-to.md index 042ab1aa94..d54717eba2 100644 --- a/blazor/diagram/how-to.md +++ b/blazor/diagram/how-to.md @@ -338,7 +338,7 @@ The [Delete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfD A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Methods/Delete.razor) ## How to Reset Diagram Zoom Level -The [ResetZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ResetZoom) method restores the current zoom level of the diagram page to its default value of 100%. This method is particularly useful when the diagram is in a zoomed-in or zoomed-out state, allowing users to quickly return to the standard view. The following code example demonstrates how to implement the ResetZoom method to restore the diagram's default zoom level. +The [ResetZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ResetZoom) method restores the current zoom level of the diagram page to its default value of **100%**. This method is particularly useful when the diagram is in a zoomed-in or zoomed-out state, allowing users to quickly return to the standard view. The following code example demonstrates how to implement the ResetZoom method to restore the diagram's default zoom level. ```cshtml @using Syncfusion.Blazor.Diagram @@ -1693,7 +1693,7 @@ In the Blazor Diagram component, calculating the bounds of paths, text, images, This property enables large data to be transmitted in smaller chunks, effectively preventing connection disconnection issues. Chunk messages allow for the measurement of paths, images, text, and SVG data without exceeding the maximum size limit for a single incoming hub message (MaximumReceiveMessageSize of 32KB). This approach ensures seamless data processing and improved performance, especially when dealing with complex diagrams or large-scale visualizations. -By default, the [EnableChunkMessages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_EnableChunkMessages) property is set to `false`. Developers can easily enable this feature when working with substantial data sets to enhance the stability and reliability of their Blazor Diagram implementations. +By default, the [EnableChunkMessages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_EnableChunkMessages) property is set to **false**. Developers can easily enable this feature when working with substantial data sets to enhance the stability and reliability of their Blazor Diagram implementations. Here is an example demonstrating how to use the [EnableChunkMessages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_EnableChunkMessages) property: diff --git a/blazor/diagram/interaction.md b/blazor/diagram/interaction.md index 18b8e28e4d..8be77f70a0 100644 --- a/blazor/diagram/interaction.md +++ b/blazor/diagram/interaction.md @@ -988,7 +988,7 @@ User handles can be aligned relative to the node boundaries. It has [Margin](htt ## How to Position User Handle -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Offset) property of a [UserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html) is used to align the user handle based on fractions. 0 represents top or left corner, 1 represents bottom or right corner, and 0.5 represents half of width or height. +The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Offset) property of a [UserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html) is used to align the user handle based on fractions. **0** represents top or left corner, **1** represents bottom or right corner, and **0.5** represents half of width or height. ## HHow to Align User Handles Based on Connector Boundary diff --git a/blazor/diagram/layout/complex-hierarchical-layout.md b/blazor/diagram/layout/complex-hierarchical-layout.md index 850bf27067..0dc06c3c71 100644 --- a/blazor/diagram/layout/complex-hierarchical-layout.md +++ b/blazor/diagram/layout/complex-hierarchical-layout.md @@ -9,7 +9,7 @@ documentation: ug # Complex Hierarchical Layout in Blazor Diagram Component -The complex hierarchical tree layout arranges nodes in a tree-like structure in which a 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, set the layout [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Type) property to [ComplexHierarchicalTree](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutType.html#Syncfusion_Blazor_Diagram_LayoutType_ComplexHierarchicalTree). +The complex hierarchical tree layout arranges nodes in a tree-like structure in which a 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, set the layout [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Type) property to **ComplexHierarchicalTree**. ```csharp @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/layout/force-directed-tree-layout.md b/blazor/diagram/layout/force-directed-tree-layout.md index 106392c629..186d5fd38b 100644 --- a/blazor/diagram/layout/force-directed-tree-layout.md +++ b/blazor/diagram/layout/force-directed-tree-layout.md @@ -21,25 +21,25 @@ To enable the Force-Directed Tree Layout, set the layout [Type](https://help.syn Defines the ideal distance between connected nodes. ->**Note:** Minimum value: 30. Larger values spread nodes farther apart. +>**Note:** Minimum value: **30**. Larger values spread nodes farther apart. ### MaximumIteration Specifies how many times the algorithm runs to stabilize the layout. ->**Note:** Minimum value: 100. Higher values improve stability but increase processing time. +>**Note:** Minimum value: **100**. Higher values improve stability but increase processing time. ### RepulsionStrength Controls how strongly nodes repel each other. ->**Note:** Minimum value: 3000. Higher values create more space between nodes. +>**Note:** Minimum value: **3000**. Higher values create more space between nodes. ### AttractionStrength Determines how strongly connected nodes pull toward each other. ->**Note:** Range: 0 to 1. Higher values cluster connected nodes more tightly. +>**Note:** Range: **0 to 1**. Higher values cluster connected nodes more tightly. ``` @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/layout/mind-map.md b/blazor/diagram/layout/mind-map.md index 1d0b0675a8..6f497b5e53 100644 --- a/blazor/diagram/layout/mind-map.md +++ b/blazor/diagram/layout/mind-map.md @@ -14,7 +14,7 @@ A mind map is a diagram that displays the nodes as a spider diagram organizes in To see a quick walkthrough of creating a mind map layout, watch the following video: {% youtube "youtube:https://www.youtube.com/watch?v=_EHmKNok4GQ" %} - +

The following code example illustrates how to create a mind map layout using a data source. ```csharp diff --git a/blazor/diagram/layout/organizational-chart.md b/blazor/diagram/layout/organizational-chart.md index 8876860d4f..80ade287d9 100644 --- a/blazor/diagram/layout/organizational-chart.md +++ b/blazor/diagram/layout/organizational-chart.md @@ -15,6 +15,7 @@ To create and position the Organizational Chart Using Blazor Diagram, you can ch {% youtube "youtube:https://www.youtube.com/watch?v=cjMCTTJssCE&t=22s" %} +

The following code example illustrates how to create an organizational chart. diff --git a/blazor/diagram/nodes/customization.md b/blazor/diagram/nodes/customization.md index bfedec4b8e..d7d7711f7c 100644 --- a/blazor/diagram/nodes/customization.md +++ b/blazor/diagram/nodes/customization.md @@ -15,6 +15,8 @@ To learn more about node customization, refer to the below video link, {% youtube "youtube:https://www.youtube.com/watch?v=iKuBSy8mOpE&t=271s" %} +

+ The following code shows how to customize the appearance of a shape. ```cshtml @@ -111,7 +113,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## How to Update Node Templates -Define node style using a template in [NodeTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTemplates.html#Syncfusion_Blazor_Diagram_DiagramTemplates_NodeTemplate) at tag level. To apply different templates to individual nodes, differentiate the nodes by the `ID` property. The following code explains how to define template for a node. +Define node style using a template in [NodeTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTemplates.html#Syncfusion_Blazor_Diagram_DiagramTemplates_NodeTemplate) at tag level. To apply different templates to individual nodes, differentiate the nodes by the [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_ID) property. The following code explains how to define template for a node. ```cshtml @using Syncfusion.Blazor.Diagram @@ -348,7 +350,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## How to change the border width of a node -The diagram allows customizing the border width of a node using the [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_BorderWidth) property. By default, the border width is **1** pixel. Adjust this value to increase or decrease the thickness of the node's border as needed. +The diagram allows customizing the border width of a node using the [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_BorderWidth) property. By default, the border width is **1 pixel**. Adjust this value to increase or decrease the thickness of the node's border as needed. ```cshtml @using Syncfusion.Blazor.Diagram @@ -713,7 +715,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## How to Set Pivot Property for a Node -* Node rotation is based on [Pivot](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Pivot) values which range from **0 to 1** similar to offset values. By default, `Pivot` is **X = 0.5** and **Y = 0.5**. +* Node rotation is based on [Pivot](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Pivot) values which range from **0 to 1** similar to offset values. By default, `Pivot` is X = **0.5** and Y = **0.5**. The following code illustrates how to set the Pivot value. diff --git a/blazor/diagram/nodes/expand-and-collapse.md b/blazor/diagram/nodes/expand-and-collapse.md index e81f0a7ded..abd154ca9b 100644 --- a/blazor/diagram/nodes/expand-and-collapse.md +++ b/blazor/diagram/nodes/expand-and-collapse.md @@ -580,7 +580,7 @@ The following table shows the relationship between the Icon position and Icon ** ### How to find node is in expanded or not -**IsExpanded** is used to defines whether the node is expanded or not. The following example demonstrate node's isexpanded property. The default value of **IsExpanded** property is **true**. +[IsExpanded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_IsExpanded) is used to defines whether the node is expanded or not. The following example demonstrate node's isexpanded property. The default value of **IsExpanded** property is **true**. ```csharp @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/overview.md b/blazor/diagram/overview.md index 6d9c1a91f9..f40a072931 100644 --- a/blazor/diagram/overview.md +++ b/blazor/diagram/overview.md @@ -23,7 +23,7 @@ documentation: ug * **Swimlane:** Visualize groups and categorizes activities or tasks based on the role or department responsible for their execution, aiding in illustrating complex processes involving multiple participants or departments within an organization. * **Connectors:** Represent connections between nodes, defining relationships and workflows within the diagram. * **Annotations:** Add textual representations to nodes or connectors using annotations. These editable text blocks can be displayed over diagram elements to provide additional information or labels. Multiple annotations can be attached to a single node or connector, allowing for flexible and detailed labeling of diagram components. Annotations support real-time editing, enabling dynamic updates to the diagram's textual content during runtime. -* **Routing:** Enhanced the dynamic updating of connector routes based on the placement or movement of nearby shapes. This feature is activated by setting the Routing enum value to the Constraints property for both the diagram and connectors, and setting the RoutingType to Classic or Advanced. +* **Routing:** Enhanced the dynamic updating of connector routes based on the placement or movement of nearby shapes. This feature is activated by setting the Routing enum value to the Constraints property for both the diagram and connectors, and setting the `RoutingType` to **Classic** or **Advanced**. * **Interaction:** Diagram elements can be selected, rotated, resized, and moved. * **Z-Order:** Diagram elements overlapping can be controlled by changing their Z-Order value. * **Pan and Zoom:** Navigate the diagram with pan and zoom options for detailed and broad views. diff --git a/blazor/diagram/page-settings.md b/blazor/diagram/page-settings.md index 0013d6053a..8637e959f8 100644 --- a/blazor/diagram/page-settings.md +++ b/blazor/diagram/page-settings.md @@ -11,7 +11,7 @@ documentation: ug By default, the diagram page size is decided based on the position of its diagram elements. The size and appearance of diagram pages can be customized using the [PageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PageSettings.html) property of the diagram. -* The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PageSettings.html#Syncfusion_Blazor_Diagram_PageSettings_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PageSettings.html#Syncfusion_Blazor_Diagram_PageSettings_Height) properties of `PageSettings` define the size of the page. The default `Width` is **1123** pixels, and `Height` is **794** pixels. +* The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PageSettings.html#Syncfusion_Blazor_Diagram_PageSettings_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PageSettings.html#Syncfusion_Blazor_Diagram_PageSettings_Height) properties of `PageSettings` define the size of the page. The default `Width` is **1123 pixels**, and `Height` is **794 pixels**. * The [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PageSettings.html#Syncfusion_Blazor_Diagram_PageSettings_Orientation) property of `PageSettings` is used to change the page orientation to portrait or landscape. The default orientation is landscape. @@ -23,6 +23,8 @@ To learn more about customization of diagram page, refer to the below video link {% youtube "https://www.youtube.com/watch?v=iKuBSy8mOpE&t=74s" %} +

+ ```cshtml @using Syncfusion.Blazor.Diagram @@ -208,7 +210,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## How to Change Page Margins -The area between the maintain content of a page and the page edges can be changed by using the [PageMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PageMargin.html) property. The default margins are **25** pixels on all sides. +The area between the maintain content of a page and the page edges can be changed by using the [PageMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PageMargin.html) property. The default margins are **25 pixels** on all sides. ```cshtml @using Syncfusion.Blazor.Diagram @@ -300,7 +302,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## How to Make Responsive with Parent Container -By setting the value in percentage, the diagram gets its dimention with respect to its parent container.Specify the Width and Height as 100% to make the diagram element fill its parent container. +By setting the value in percentage, the diagram gets its dimention with respect to its parent container.Specify the Width and Height as **100%** to make the diagram element fill its parent container. Setting the Height to 100% requires the diagram parent element to have explicit height or you can use calc function to set explicit height based on the browser layout. The following code example illustrates how to set width and height in percentage diff --git a/blazor/diagram/ports/ports.md b/blazor/diagram/ports/ports.md index 4359691cdc..3e41e742cf 100644 --- a/blazor/diagram/ports/ports.md +++ b/blazor/diagram/ports/ports.md @@ -33,6 +33,8 @@ To learn more about creating and customizing ports in the Blazor Diagram, watch {% youtube "youtube:https://www.youtube.com/watch?v=aMgmimZZBcA" %} +

+ ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/ports/positioning.md b/blazor/diagram/ports/positioning.md index 57d4c3dbc4..1b6140d155 100644 --- a/blazor/diagram/ports/positioning.md +++ b/blazor/diagram/ports/positioning.md @@ -83,7 +83,7 @@ The following table shows the relationship between the shape port position and p ## How to Set Path Position for Connector Port -Use the `PathPosition` property to place a connector port along the connector path. It accepts values between 0 to 1, where: +Use the `PathPosition` property to place a connector port along the connector path. It accepts values between **0 to 1**, where: * **0** represents the start point of the connector * **1** represents the end point of the connector diff --git a/blazor/diagram/scroll-settings.md b/blazor/diagram/scroll-settings.md index 6604e8c31a..81adcfc26d 100644 --- a/blazor/diagram/scroll-settings.md +++ b/blazor/diagram/scroll-settings.md @@ -315,7 +315,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn {% previewsample "https://blazorplayground.syncfusion.com/embed/BtVSCZDFJpkPdyYI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Scroll 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. +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 @@ -355,13 +355,13 @@ Scrolling beyond any particular rectangular area can be restricted using the [Sc A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/ScrollSettings/ScrollableArea.razor) ## How to Handle Scroll Settings Property Changes Using Callback Methods -* CurrentZoomChanged : Specifies the callback to be triggered when the current zoom value changes. -* HorizontalOffsetChanged : Specifies the callback to be triggered when the horizontal offset changes. -* VerticalOffsetChanged : Specifies the callback to be triggered when the vertical offset changes. -* MaxZoomChanged : Specifies the callback to trigger when the maximum zoom changes. -* MinZoomChanged : Specifies the callback to trigger when the minimum zoom changes. -* ScrollableAreaChanged : Specifies the callback to trigger when the scrollable area changes. -* ScrollLimitChanged : Specifies the callback to trigger when the scroll limit changes. +* **CurrentZoomChanged** : Specifies the callback to be triggered when the current zoom value changes. +* **HorizontalOffsetChanged** : Specifies the callback to be triggered when the horizontal offset changes. +* **VerticalOffsetChanged** : Specifies the callback to be triggered when the vertical offset changes. +* **MaxZoomChanged** : Specifies the callback to trigger when the maximum zoom changes. +* **MinZoomChanged** : Specifies the callback to trigger when the minimum zoom changes. +* **ScrollableAreaChanged** : Specifies the callback to trigger when the scrollable area changes. +* **ScrollLimitChanged** : Specifies the callback to trigger when the scroll limit changes. ```cshtml diff --git a/blazor/diagram/shapes.md b/blazor/diagram/shapes.md index 2ecddaba7c..2a8b6d3a59 100644 --- a/blazor/diagram/shapes.md +++ b/blazor/diagram/shapes.md @@ -58,7 +58,6 @@ The following code illustrates how to create a text node. } } ``` -{% 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-UG-Examples/blob/master/Diagram/Server/Pages/Shapes/TextNodeSample.razor) @@ -103,7 +102,6 @@ The following code illustrates how an image node is created. } } ``` -{% 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-UG-Examples/blob/master/Diagram/Server/Pages/Shapes/ImageShapeSample.razor) @@ -147,7 +145,6 @@ 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-UG-Examples/blob/master/Diagram/Server/Pages/Shapes/Base64image.razor) @@ -302,7 +299,6 @@ 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-UG-Examples/blob/master/Diagram/Server/Pages/Shapes/HTMLShape.razor) @@ -352,7 +348,6 @@ 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-UG-Examples/blob/master/Diagram/Server/Pages/Shapes/BasicShapeSample.razor) @@ -406,7 +401,6 @@ To create a path node, set the shape as **Path**. The geometry of the path is de }; } ``` -{% 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-UG-Examples/blob/master/Diagram/Server/Pages/Shapes/PathShapeSample.razor) @@ -449,7 +443,6 @@ The [FlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. } } ``` -{% 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-UG-Examples/blob/master/Diagram/Server/Pages/Shapes/FlowShapeSample.razor) @@ -508,7 +501,6 @@ The diagram provides support to embed [SVG](https://help.syncfusion.com/cr/blazo } } ``` -{% 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-UG-Examples/blob/master/Diagram/Server/Pages/Shapes/SVGShape.razor) @@ -557,7 +549,6 @@ 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-UG-Examples/blob/master/Diagram/Server/Pages/Shapes/BPMNShapeSample.razor) diff --git a/blazor/diagram/swimlane/swimlane.md b/blazor/diagram/swimlane/swimlane.md index 354268525b..059dd4f632 100644 --- a/blazor/diagram/swimlane/swimlane.md +++ b/blazor/diagram/swimlane/swimlane.md @@ -323,7 +323,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn Define custom spacing between a lane or phase header and its child elements (nodes, connectors, or groups) using the [ChildrenSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_ChildrenSpacing) property, which accepts a `DiagramThickness` with `Top`, `Bottom`, `Left`, and `Right` values. -By default, `ChildrenSpacing` is 20 pixels on all sides. Adjust these values to control padding between the header and its children within the `Swimlane`. +By default, `ChildrenSpacing` is **20 pixels** on all sides. Adjust these values to control padding between the header and its children within the `Swimlane`. The following example shows how to apply custom spacing using `ChildrenSpacing` property. diff --git a/blazor/diagram/tool-tip.md b/blazor/diagram/tool-tip.md index 230a607074..0928d3c84a 100644 --- a/blazor/diagram/tool-tip.md +++ b/blazor/diagram/tool-tip.md @@ -104,7 +104,7 @@ Tooltips can be attached to 12 predefined positions around the target element. W * [`RightCenter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.Position.html#Syncfusion_Blazor_Popups_Position_RightCenter) * [RightBottom`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.Position.html#Syncfusion_Blazor_Popups_Position_RightCenter) -N> By default, the Tooltip is placed at the BottomRight of the target element. +N> By default, the Tooltip is placed at the **BottomRight** of the target element. The following code example sets the tooltip position for the nodes. @@ -595,7 +595,7 @@ The Tooltip activation mode can be customized to determine how it appears on the * `Click` -N> By default, the Tooltip open mode is Auto. +N> By default, the Tooltip open mode is **Auto**. The following code example illustrates how to set the open mode for tooltips on nodes. @@ -916,7 +916,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn Tooltips for user handles can be configured to remain visible until manually dismissed, a feature known as "sticky" tooltips. When enabled, a close icon appears in the top-right corner of the tooltip, allowing users to explicitly close it when desired. -To enable or disable this sticky mode, use the `IsSticky` property in the tooltip configuration. By default, the `IsSticky` property is set to `false`. +To enable or disable this sticky mode, use the `IsSticky` property in the tooltip configuration. By default, the `IsSticky` property is set to **false**. N> The tooltip will have an open and close state whenever the mouse hovers over different diagram elements. Only one "sticky" tooltip can be visible in the diagram at a time. @@ -1146,7 +1146,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn Enhance the diagram's user experience with sticky tooltips for ports. This feature allows tooltips to remain visible until explicitly closed, providing users with persistent information. When enabled, a close icon appears in the top-right corner of the tooltip, empowering users to dismiss it at their convenience. -To enable or disable this sticky mode, use the `IsSticky` property in the tooltip configuration. By default, the `IsSticky` property is set to `false`. +To enable or disable this sticky mode, use the `IsSticky` property in the tooltip configuration. By default, the `IsSticky` property is set to **false**. N> The tooltip will have an open and close state whenever the mouse hovers over different diagram elements. Only one "sticky" tooltip can be visible in the diagram at a time. diff --git a/blazor/diagram/uml-sequence-diagram.md b/blazor/diagram/uml-sequence-diagram.md index 5ca535b4f4..663489cb19 100644 --- a/blazor/diagram/uml-sequence-diagram.md +++ b/blazor/diagram/uml-sequence-diagram.md @@ -17,7 +17,7 @@ To enable this functionality, assign an instance of `UmlSequenceDiagramModel` to A sequence diagram consists of several key elements, including participants, messages, activation boxes, and fragments. Each of these components plays a crucial role in representing the flow of interaction between objects over time. -The diagram component allows to define and manage these elements through the `UmlSequenceDiagramModel`. Below is an overview of how each element can be implemented: +The diagram component allows to define and manage these elements through the `UmlSequenceDiagramModel. Below` is an overview of how each element can be implemented: * [Participants](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceDiagramModel.html#Syncfusion_Blazor_Diagram_UmlSequenceDiagramModel_Participants): Represent the lifelines (such as actors or systems) involved in the interaction. * [Messages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceDiagramModel.html#Syncfusion_Blazor_Diagram_UmlSequenceDiagramModel_Messages): Indicate the communication between participants, including synchronous and asynchronous calls, returns, and self-messages. diff --git a/blazor/diagram/user-handle.md b/blazor/diagram/user-handle.md index bef0f359bb..017ed967bf 100644 --- a/blazor/diagram/user-handle.md +++ b/blazor/diagram/user-handle.md @@ -217,7 +217,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Position User Handles -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Offset) property of user handles allows precise positioning based on fractional values. A value of 0 represents the Top-Left corner, 1 represents the Bottom-Right corner, and 0.5 represents the midpoint of either the Width or Height. The [Side](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Side) property determines the alignment orientation of the user handle relative to the specified `Offset`. Together, these properties offer flexible and accurate placement of user handles within the diagram. +The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Offset) property of user handles allows precise positioning based on fractional values. A value of **0** represents the Top-Left corner, **1** represents the Bottom-Right corner, and **0.5** represents the midpoint of either the Width or Height. The [Side](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Side) property determines the alignment orientation of the user handle relative to the specified `Offset`. Together, these properties offer flexible and accurate placement of user handles within the diagram. The following table visually demonstrates the possible alignments and user handle positions. @@ -386,7 +386,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to change the size of the user handle -The Diagram component supports customizing user handle dimensions through the [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Size) property. This sets the width and height of user handles in pixels. If not explicitly set, the `Size` property defaults to 25 pixels, providing a standard visual representation. Adjusting this value lets create user handles that are appropriately sized for the specific diagram requirements. +The Diagram component supports customizing user handle dimensions through the [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Size) property. This sets the width and height of user handles in pixels. If not explicitly set, the `Size` property defaults to **25 pixels**, providing a standard visual representation. Adjusting this value lets create user handles that are appropriately sized for the specific diagram requirements. ### How to Style User Handles @@ -397,7 +397,7 @@ User handles can be styled using properties such as PathColor, BorderColor, Back * Use [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_BorderColor) and [BackgroundColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_BackgroundColor) properties to set the border and background colors respectively. Additionally, the [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_BorderWidth) property allows you to adjust the thickness of the user handle's border. -* The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Visible) property controls the visibility of the user handle in the diagram. Set it to `true` to display the handle, or `false` to hide it from view. +* The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Visible) property controls the visibility of the user handle in the diagram. Set it to **true** to display the handle, or **false** to hide it from view. The following code explains how to customize the appearance of the user handle. @@ -1178,9 +1178,9 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Position Connector Fixed User Handle Using Offset The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorFixedUserHandle.html#Syncfusion_Blazor_Diagram_ConnectorFixedUserHandle_Offset) property of the connector fixed user handle allows precise positioning along the connector's length. It uses a fractional value where: -* 0 represents the connector source point -* 1 represents the connector target point -* 0.5 represents the midpoint of the connector segment +* **0** represents the connector source point +* **1** represents the connector target point +* **0.5** represents the midpoint of the connector segment This fractional system enables flexible and accurate alignment of user handles on connectors.