From abda375f448aab01e5d7ba2de964b2fd25eb3863 Mon Sep 17 00:00:00 2001 From: Ramya Date: Mon, 22 Sep 2025 18:40:51 +0530 Subject: [PATCH 01/18] Revamping the Ug --- blazor/diagram/annotations/appearance.md | 101 +++++++++--------- .../annotations/connector-annotation.md | 26 ++--- blazor/diagram/annotations/events.md | 16 +-- blazor/diagram/annotations/interactions.md | 18 ++-- blazor/diagram/annotations/labels.md | 50 ++++----- blazor/diagram/annotations/node-annotation.md | 28 ++--- blazor/diagram/bpmn-shapes/bpmn-activity.md | 28 ++--- blazor/diagram/bpmn-shapes/bpmn-connectors.md | 36 ++++--- .../diagram/bpmn-shapes/bpmn-data-object.md | 6 +- blazor/diagram/bpmn-shapes/bpmn-data-store.md | 4 +- blazor/diagram/bpmn-shapes/bpmn-event.md | 4 +- .../bpmn-shapes/bpmn-expanded-sub-process.md | 35 +++--- blazor/diagram/bpmn-shapes/bpmn-gateway.md | 6 +- blazor/diagram/bpmn-shapes/bpmn-shapes.md | 6 +- .../bpmn-shapes/bpmn-text-annotation.md | 7 +- 15 files changed, 194 insertions(+), 177 deletions(-) diff --git a/blazor/diagram/annotations/appearance.md b/blazor/diagram/annotations/appearance.md index 5927de5974..c551a449a4 100644 --- a/blazor/diagram/annotations/appearance.md +++ b/blazor/diagram/annotations/appearance.md @@ -1,7 +1,7 @@ --- layout: post title: Annotation Appearance in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Appearance in Syncfusion Blazor Diagram component and much more details. +description: Checkout and Learn how to customize the appearance of annotation in the Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug @@ -11,7 +11,7 @@ documentation: ug ## How to Customize Annotation Size -The diagram allows you to set size for annotations by using the Height and Width properties. The default value of the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Height) properties is 0, and it takes the node or connector size as default. The following code example shows how the annotation size is customized. +The annotation size can be customized using the `Height` and `Width` properties. By default, the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Height) properties are 0, which means the annotation inherits the size of its parent node or connector. The following code example demonstrates how to customize the annotation size. ```cshtml @using Syncfusion.Blazor.Diagram @@ -44,13 +44,13 @@ The diagram allows you to set size for annotations by using the Height and Width } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/SizeOfAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/SizeOfAnnotation) ![Changing Annotation Size in Blazor Diagram](../images/blazor-diagram-annotation-size.png) -## How to Add Hyper Link to Annotation +## How to Add a Hyperlink to an Annotation -The diagram provides support to add a [Hyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Hyperlink) to the node's or connector's annotation. It can also be customized. +A [Hyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Hyperlink) can be added to the node's or connector's annotation. It can also be customized. ```cshtml @using Syncfusion.Blazor.Diagram @@ -90,11 +90,13 @@ The diagram provides support to add a [Hyperlink](https://help.syncfusion.com/cr } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/HyperlinktoAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/HyperlinktoAnnotation) ![Annotation with Hyperlink in Blazor Diagram](../images/blazor-diagram-annotation-with-hyperlink.png) -### How to Display Text in Annotation Hyper Links +### How to Display Text in Annotation Hyperlinks + +The Content property of the Hyperlink can be set to display custom text for the link. ```cshtml @using Syncfusion.Blazor.Diagram @@ -135,13 +137,13 @@ You can download a complete working sample from [GitHub](https://github.com/Sync } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/HyperlinkWithContent) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/HyperlinkWithContent) ![HyperLink with Content in Blazor Diagram](../images/blazor-diagram-hyperlink-content.png) ## How to Wrap Text Using Text Wrapping -The [TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextWrapping) property of an annotation defines how the text should be wrapped. When text overflows node boundaries, you can control it by using the `TextWrapping`. So, it is wrapped into multiple lines. The following code explains how to wrap a text in a node. +The [TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextWrapping) property of an annotation's style defines the wrapping behavior for its text content. When text overflows node boundaries, you can control it by using the `TextWrapping`. So, it is wrapped into multiple lines. The following code explains how to wrap a text in a node. ```cshtml @using Syncfusion.Blazor.Diagram @@ -182,7 +184,7 @@ The [TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagr } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationWithTextWrapping) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationWithTextWrapping) | TextWrapping | Description | Image | | -------- | -------- | -------- | @@ -194,11 +196,11 @@ You can download a complete working sample from [GitHub](https://github.com/Sync The [TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextOverflow) property specifies how the overflowed content that is not displayed should be signaled to the user. The TextOverflow property can have the following values. -* **Wrap**: Wraps the text to next line, when it exceeds its bounds. -* **Ellipsis**: It truncates the overflown text and renders an ellipsis ("...") to represent the clipped text. -* **Clip**: Clips the text, and the overflow text will not be shown. +* **Wrap**: Wraps the text to the next line when it exceeds its bounds. +* **Ellipsis**: Truncates the overflown text and renders an ellipsis ("...") to represent the clipped text. +* **Clip**: Clips the text, and the overflowed text will not be visible. -The following code sample shows how the different types of overflow property working for the different types of text wrapping. +The following code sample demonstrates how the TextOverflow property works with different TextWrapping settings. ```cshtml @using Syncfusion.Blazor.Diagram @@ -240,7 +242,7 @@ The following code sample shows how the different types of overflow property wor } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationWithTextOverflow) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationWithTextOverflow) | TextOverflow | Wrapping | Image | | -------- | -------- | -------- | @@ -254,19 +256,21 @@ You can download a complete working sample from [GitHub](https://github.com/Sync | Clip| Wrap | ![Blazor Diagram With Text Wrap in TextClipOverflow](../images/blazor-diagram-flowclip-wrap.png) | | Clip | WrapWithOverflow | ![Blazor Diagram Text Wrap with Overflow in TextClipOverflow](../images/blazor-diagram-flowclip-wrapwithoverflow.png) | -N>**Note :** All the customization over the overflow is also applicable to connector’s annotation. +N>**Note :** All overflow customizations are also applicable to connector annotations. ## How to Customize the Appearance of an Annotation -You can change the font style of the annotations with the font specific properties such as FontSize, FontFamily, and Color. The following code explains how to customize the appearance of the annotation. +The appearance of an annotation can be customized using various style properties. + +* The text style can be modified using properties like [Bold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Bold), [Italic](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Italic), and [TextDecoration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextDecoration). -* The annotation’s [Bold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Bold), [Italic](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Italic), and [TextDecoration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextDecoration) properties are used to style the annotation’s text. +* The annotation's background and border color can be defined with the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Fill), [StrokeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeColor), and [StrokeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeWidth) properties. -* The annotation’s [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Fill), [StrokeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeColor), and [StrokeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeWidth) properties are used to define the background color and border color of the annotation and the [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Opacity) property is used to define the transparency of the annotations. +* The transparency of the annotation is controlled by the [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Opacity) property. * The [Visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Visibility) property of the annotation enables or disables the visibility of annotation. -The Fill, Border, and Opacity appearances of the text can also be customized with appearance specific properties of the annotation. The following code explains how to customize the appearance of the annotation. +The following code explains how to customize the visual appearance of an annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -312,13 +316,13 @@ The Fill, Border, and Opacity appearances of the text can also be customized wit } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/Appearance) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/Appearance) ![Blazor Diagram Label with Custom Annotation](../images/blazor-diagram-label-with-custom-annotation.png) ## How to Update Annotation Font Style at Runtime -You can change the font style of the annotations with the font specific properties such as [FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontSize), [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontFamily), and [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Color). The following code explains how to update the font style of the annotation. +The font style of annotations can be changed dynamically at runtime by modifying properties such as [FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontSize), [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontFamily), and [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Color). The following code demonstrates how to update the font style of the annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -380,22 +384,22 @@ You can change the font style of the annotations with the font specific properti } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationStyleatRunTime) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationStyleatRunTime) ## How to Edit Annotations at Runtime -The diagram provides support to edit an annotation at runtime, either programmatically or interactively. By default, the annotation is in view mode. However, it can be brought into edit mode in two ways. +Annotations can be edited at runtime either programmatically or interactively. By default, annotations are in view mode. Edit mode can be enabled in the following ways: -* You can edit the annotation programmatically by using the [StartTextEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_StartTextEdit_Syncfusion_Blazor_Diagram_IDiagramObject_System_String_) method. -* Also, you can edit the annotation interactively. -* By double-clicking the annotation. -* By selecting the item and pressing the F2 key. +* Programmatically: Invoke the [StartTextEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_StartTextEdit_Syncfusion_Blazor_Diagram_IDiagramObject_System_String_) method of the diagram component. +* Interactively: + * Double-click the annotation. + * Select the parent and press the F2 key. -Double-clicking any annotation will enable the editing and the node enables first annotation editing. When the focus of editor is lost, the annotation for the node is updated. +Double-clicking an annotation enables edit mode. For a object with multiple annotations, double-clicking the object itself will start the edit for the first annotation in its collection. When the focus of editor is lost, the annotation content is updated. -## How to Set Read Only Mode for Annotations +## How to Set Read-Only Mode for Annotations -The diagram allows you to create read-only annotations. You have to set the read-only property of annotation to enable or disable the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_ReadOnly) constraints. The following code explains how to enable read-only mode. +Annotations can be set to read-only mode by configuring their Constraints. Setting the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_ReadOnly) constraints prevents user interaction and modification. The following code explains how to enable read-only mode. ```cshtml @using Syncfusion.Blazor.Diagram @@ -432,11 +436,11 @@ The diagram allows you to create read-only annotations. You have to set the read } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/ReaonlyConstraints) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/ReaonlyConstraints) ## How to Create Multiple Annotations -You can add any number of annotations to a node or connector. The following code example shows how to add multiple annotations to a node. +Multiple annotations can be added to a single node or connector. The following code example shows how to add multiple annotations to both a node and a connector. ```cshtml @using Syncfusion.Blazor.Diagram @@ -513,18 +517,18 @@ You can add any number of annotations to a node or connector. The following code } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/MultipleAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/MultipleAnnotation) ![Blazor Diagram with Multiple Annotations](../images/blazor-diagram-multiple-annotations.png) N>* Type of the annotation’s property of the node or connector is ObservableCollection.
* Default value of the annotation will be null. -
* All the same customization can be applicable for the annotations. -
* Text Editing can be started only the first annotation of the annotation collection when you double click the node or connector. +
* All customization options are applicable to each annotation in the collection. +
* When double-clicking a node or connector, text editing is initiated only for the first annotation in the collection. ## How to Control Annotation Constraints -[AnnotationConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html) are used to enable or disable certain behaviors of the annotation. Constraints are provided as flagged enumerations, so that multiple behaviors can be enabled or disabled with bitwise operators. +[AnnotationConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html) are used to enable or disable certain behaviors of an annotation. Constraints are provided as flag enumerations, allowing multiple behaviors to be combined using bitwise operators. AnnotationConstraints may have multiple behaviors as follows: @@ -534,14 +538,15 @@ AnnotationConstraints may have multiple behaviors as follows: | [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_None) | Disables all behaviors of Annotation. | |[InheritReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_InheritReadOnly) |Enables or disables to inherit the ReadOnly option from the parent object.| -N> The default value is [InheritReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_InheritReadOnly) for constraints property of the annotation. +N> The default value for an annotation's Constraints property is [InheritReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_InheritReadOnly). -Refer to [Constraints](https://blazor.syncfusion.com/documentation/diagram/constraints) to learn about how to enable or disable the annotation constraints. +Refer to [Constraints](https://blazor.syncfusion.com/documentation/diagram/constraints) to learn more about how to enable or disable the annotation constraints. ## How to Define Templates in Annotations -The Diagram provides support for templates in annotations. You can define HTML content at the tag level and specify the use of a template using the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property. If you need to define separate templates for each annotation, you can differentiate them by using the ID property. -The following code illustrates how to define a template for a node's annotation. Similarly, you can define templates for connectors. +The Diagram component supports using templates for annotations. HTML content can be defined within a Diagram Templates tag and associated with an annotation by setting its [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property to true. If you need to define separate templates for each annotation, you can differentiate using the ID property. + +The following code illustrates how to define a template for both a node's and a connector's annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -635,14 +640,14 @@ The following code illustrates how to define a template for a node's annotation. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/TemplateSupportforAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/TemplateSupportforAnnotation) ![Blazor Diagram with Template Annotations](../images/TemplateSupportforAnnotation.png) ## How to Add Additional Information for an Annotation -The [AdditionalInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_AdditionalInfo) property of an annotation allows you to store extra information associated with the annotation in a flexible way. This can be useful for maintaining metadata or additional details that you may need to access programmatically. +The [AdditionalInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_AdditionalInfo) property of an annotation allows you to store extra information associated with the annotation in a flexible way. This can be useful for maintaining metadata or additional details that need to be accessed programmatically. -The following code shows how to set the AdditionalInfo value. +The following code demonstrates how to set a value for the AdditionalInfo property. ```cshtml @using Syncfusion.Blazor.Diagram @@ -683,17 +688,17 @@ The following code shows how to set the AdditionalInfo value. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AdditionalInfoProperty) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AdditionalInfoProperty) -**Note:** You can set any type of value for the AdditionalInfo property. +**Note:** The AdditionalInfo property can accept any type of object as its value. ## See also * [How to add or remove annotation constraints](../constraints#annotation-constraints) -* [How to add annotation for Node](./node-annotation) +* [How to add an annotation for a Node](./node-annotation) -* [How to add annotation for Connector](./connector-annotation) +* [How to add an annotation for a Connector](./connector-annotation) * [How to Prevent Text Overflow and Display Excess Content on Hover in a Diagram](https://support.syncfusion.com/kb/article/18726/how-to-prevent-text-overflow-and-display-excess-content-on-hover-in-a-diagram) \ No newline at end of file diff --git a/blazor/diagram/annotations/connector-annotation.md b/blazor/diagram/annotations/connector-annotation.md index 8dfeafc11e..82b83c5732 100644 --- a/blazor/diagram/annotations/connector-annotation.md +++ b/blazor/diagram/annotations/connector-annotation.md @@ -1,7 +1,7 @@ --- layout: post title: Connector Annotation Position in Blazor Diagram | Syncfusion -description: Checkout and learn here all about Annotation for Connector in Syncfusion Blazor Diagram component and more. +description: Checkout and Learn how to position and align annotations on connectors in the Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Connector Annotation Position in Blazor Diagram -Annotations of a connector can be positioned using the following properties of Annotation class. +Connector annotations can be precisely positioned using several properties of the `PathAnnotation` class, including: * Offset * Alignment @@ -21,7 +21,7 @@ Annotations of a connector can be positioned using the following properties of A ## 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 of an annotation is used to align the annotations based on fractions. A value of 0 represents Top-Left corner, 1 represents Bottom-Right corner, and 0.5 represents half of Width/Height. +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 @@ -68,19 +68,19 @@ The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Pat } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/UpdateOffsetofAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/UpdateOffsetofAnnotation) The following image shows the relationship between the annotation position and offset (fraction values). ![Displaying Annotation based on Offset in Blazor Diagram](../images/blazor-diagram-annotation-basedon-offset.png) >**Note:** -> * By default, offset value of the connector annotation is 0.5. -> * Connector annotation's Id should not start with numbers or special characters and should not contain special characters such as underscores(_) or spaces. +> * By default, the Offset value of a connector annotation is 0.5. +> * An annotation's ID must not start with a number or special character and must not contain underscores(_) or spaces. ## How to Change Annotation Alignment -The connector’s annotation can be aligned over its segment path using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Alignment) property of the annotation. +The [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Alignment) property aligns an annotation relative to the connector's path. ```cshtml @using Syncfusion.Blazor.Diagram @@ -121,7 +121,7 @@ The connector’s annotation can be aligned over its segment path using the [Ali } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/AlignmentOfAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/AlignmentOfAnnotation) The following screenshot shows how the annotation of the connector aligned over its path. @@ -131,7 +131,7 @@ N> By default, Alignment value of the connector annotation is `Center`. ## How to Change Annotation Displacement -The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Displacement) property is used to dislocate the annotation by the value given. By default, annotation will be in centered on the connector path. When you assign a value to the Displacement property, the annotation will be displaced from its position by displacement value. +The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Displacement) property moves an annotation from its default position along the connector path. By default, annotation will be in centered on the connector path. It accepts a DiagramPoint object that specifies the horizontal (X) and vertical (Y) distance to move the annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -171,7 +171,7 @@ The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagr } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/DisplacementOfAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/DisplacementOfAnnotation) ## How to Update Annotation Segment Angle @@ -213,20 +213,20 @@ The following code example shows how the connector annotation rotated in its pat } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/SegmentAngleOfAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/SegmentAngleOfAnnotation) | SegmentAngle | Output | |---|---| | True | ![Blazor Diagram Annotation in Vertical Position](../images/blazor-diagram-annotation-in-vertical-position.png) | | False | ![Blazor Diagram Annotation in Horizontal Position](../images/blazor-diagram-annotation-in-horizontal-position.png) | -N> By default, the SegmentAngle will be disabled. +N> By default, the SegmentAngle property is disabled (false). The `HorizontalAlignment`, `VerticalAlignment` and `Margin` properties were explained in the [NodeAnnotation](./node-annotation). ## See also -* [How to add annotation for Node](./node-annotation) +* [How to add an annotation for a Node](./node-annotation) * [How to add or remove annotation constraints](../constraints#annotation-constraints) diff --git a/blazor/diagram/annotations/events.md b/blazor/diagram/annotations/events.md index 0346bf033b..9d31839410 100644 --- a/blazor/diagram/annotations/events.md +++ b/blazor/diagram/annotations/events.md @@ -1,7 +1,7 @@ --- layout: post title: Annotation Events in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Events in Syncfusion Blazor Diagram component and much more details. +description: Checkout and Learn how to use annotation events in the Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug @@ -9,17 +9,17 @@ documentation: ug # Annotation Events in Blazor Diagram Component -## How to Handle Text Change event +## How to Handle Text Change Event * While editing a node's or connector's annotation, the following event can be used to do the customization. * When a node's or connector's annotation is changed in the diagram, this event is getting triggered. |Event Name|Arguments|Description| |------------|-----------|------------------------| -|[TextChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_TextChanged)|[TextChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextChangeEventArgs.html)|Triggers when the node’s/connector's label is changed in the diagram.| -|[TextChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_TextChanging)|[TextChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextChangeEventArgs.html)|An event that is raised when the node and connector's label is changing in the diagram.| +|[TextChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_TextChanged)|[TextChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextChangeEventArgs.html)|Triggers after a node or connector's annotation text has been changed in the diagram.| +|[TextChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_TextChanging)|[TextChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextChangeEventArgs.html)|An event that is raised when the node and connector's annotation text is changing in the diagram.| -The following code example shows how to register and get notifications from the TextChanged and TextChanging events. +The following code example shows how to register and get notifications from the `TextChanged` and `TextChanging` events. ```cshtml @using Syncfusion.Blazor.Diagram @@ -61,7 +61,7 @@ The following code example shows how to register and get notifications from the } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Events/TextChangedEvent) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Events/TextChangedEvent) ## See also @@ -69,6 +69,6 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * [How to customize the annotation](./appearance) -* [How to add annotation for Node](./node-annotation) +* [How to add an annotation for a Node](./node-annotation) -* [How to add annotation for Connector](./connector-annotation) +* [How to add an annotation for a Connector](./connector-annotation) diff --git a/blazor/diagram/annotations/interactions.md b/blazor/diagram/annotations/interactions.md index 2beddf9b66..20bd0ad901 100644 --- a/blazor/diagram/annotations/interactions.md +++ b/blazor/diagram/annotations/interactions.md @@ -1,7 +1,7 @@ --- layout: post title: Annotation Interaction in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Interaction in Syncfusion Blazor Diagram component and much more details. +description: Checkout and Learn how to interact with annotations in the Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug @@ -12,7 +12,7 @@ documentation: ug Diagram provides the support to the annotations rotation interactively. ## How to Rotate Annotations -The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_RotationReference) property of an annotation allows you to control whether the text should rotate relative to its parent node or the Page. The following code examples illustrate how to configure RotationReference for an annotation. +The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_RotationReference) property of an annotation allows you to control whether the text should rotate relative to its parent node or the Page. The following code examples illustrate how to configure `RotationReference` for an annotation. ```cshtml @@ -72,16 +72,16 @@ The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. Value | Description | Image | | -------- | -------- | -------- | | Page | When this option is set, the annotation remains fixed in its original orientation even if its parent node is rotated. | ![Blazor Diagram RotationReference page](../images/rotationReferencePage.gif) | -| Parent | In this case, the annotation rotates along with its parent node. | ![Blazor Diagram RotationReference Parent](../images/rotationReferenceParent.gif) | +| Parent | When this option is set, the annotation rotates along with its parent node. | ![Blazor Diagram RotationReference Parent](../images/rotationReferenceParent.gif) | -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Interactions/RotationReference) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Interactions/RotationReference) ## How to rotate a Annotation using the RotationAngle property -The [RotationAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_RotationAngle) property for an annotation gets or sets the rotation angle in degrees. This determines how much the annotation text is tilted from its normal position. The default value is 0. +The [RotationAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_RotationAngle) property sets the rotation angle of an annotation in degrees. This determines how much the annotation text is tilted from its normal position. The default value is 0. -The following code examples illustrate how to configure RotationAngle for an annotation. +The following code examples illustrate how to configure `RotationAngle` for an annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -112,7 +112,7 @@ The following code examples illustrate how to configure RotationAngle for an ann } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/RotationAngleProperty) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/RotationAngleProperty) ![Annotation Rotation in Blazor Diagram](../images/RotationAngleAnnotation.png) @@ -120,8 +120,8 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * [How to add or remove annotation constraints](../constraints#annotation-constraints) -* [How to add annotation for Node](./node-annotation) +* [How to add an annotation for a Node](./node-annotation) -* [How to add annotation for Connector](./connector-annotation) +* [How to add an annotation for a Connector](./connector-annotation) * [How to animate connectors using annotationtemplate in angular diagram](https://support.syncfusion.com/kb/article/20265/how-to-animate-connectors-using-annotationtemplate-in-angular-diagram ) \ No newline at end of file diff --git a/blazor/diagram/annotations/labels.md b/blazor/diagram/annotations/labels.md index 25fc1063fe..755366ee05 100644 --- a/blazor/diagram/annotations/labels.md +++ b/blazor/diagram/annotations/labels.md @@ -1,7 +1,7 @@ --- layout: post title: Annotation in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about actions of annotation in Syncfusion Blazor Diagram component and more. +description: Checkout and Learn how to create, add, remove, and update annotation for nodes and connectors in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug @@ -9,18 +9,18 @@ documentation: ug # Annotation in Blazor Diagram Component -The [Annotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html) is a block of text that can be displayed over a node or connector and it is used to textually represent an object with a string that can be edited at run time. Multiple annotations can be added to a node or connector. +The [Annotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html) is a block of text that can be displayed over a node or connector and it is used to textually represent an object with a string that can be edited at run time. Multiple annotations can be added to a single node or connector. -## How to Create Annotation +## How to Create an Annotation -An annotation can be added to a node or connector by defining the annotation object and adding it to the annotation collection of the node or connector. The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Content) property of the annotation defines the text to be displayed. +An annotation can be added to a node or connector by defining the annotation object and adding it to the `Annotation` collection of the parent object. The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Content) property of the annotation defines the text to be displayed. -To create and add annotation to Nodes and Connectors using the Blazor Diagram, refer to the below video link, +To create and add annotations to nodes and connectors using the Blazor Diagram, refer to the following video: {% youtube "youtube:https://www.youtube.com/watch?v=f7Jnl5hSy7I" %} -The following code explains how to create an annotation. +The following code example demonstrates how to create an annotation for a node and a connector. ```cshtml @using Syncfusion.Blazor.Diagram @@ -69,18 +69,18 @@ The following code explains how to create an annotation. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/CreateAnnotation/CreateAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/CreateAnnotation/CreateAnnotation) ![Blazor Diagram Node with Annotation](../images/blazor-diagram-node-with-annotation.png) -N>* [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_ID) for each annotation should be unique and so it is further used to find the annotation at runtime and do any customization. -
* By default, node’s annotation positioned in center point of the shape. -
* By default, connector’s path annotation positioned in center point of its path. +N>* Each annotation's [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_ID) should be unique. It can be used to find and customize the annotation at runtime. +
* By default, a node's annotation is positioned at the center of the shape. +
* By default, a connector’s path annotation positioned at the center of its path. >**Note:** Do not use underscores(_) for annotation's id. -## How to Add Annotation at Runtime +## How to Add an Annotation at Runtime -You can add an annotation at runtime to the Annotations collection of the node/connector in the diagram component by using the `Add` method. +An annotation can be added to the Annotations collection of a node or connector at runtime by using the `Add` methods. The following code explains how to add an annotation to a node at runtime by using `Add` method. @@ -122,7 +122,7 @@ The following code explains how to add an annotation to a node at runtime by usi } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AddAnnotationAtRunTime) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AddAnnotationAtRunTime) Also, the annotations can be added at runtime by using the [AddAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramObjectCollection-1.html#Syncfusion_Blazor_Diagram_DiagramObjectCollection_1_AddAsync__0_) method. The `await` operator suspends the evaluation of the enclosing async method until the asynchronous operation represented by its operand completes. @@ -136,13 +136,13 @@ public async void AddLabel() await(diagram.Nodes[0].Annotations as DiagramObjectCollection).AddAsync(annotation); } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations) ![Adding Annotation in Blazor Diagram](../images/blazor-diagram-add-annotation.png) -## How to Remove Annotation at Runtime +## How to Remove an Annotation at Runtime -A collection of annotations can be removed from a node by using the `RemoveAt` method. The following code explains how to remove an annotation from a node. +An annotation can be removed from a node or connector's Annotations collection by using the `RemoveAt` method. The following code explains how to remove an annotation from a node. ```cshtml @using Syncfusion.Blazor.Diagram @@ -186,9 +186,9 @@ A collection of annotations can be removed from a node by using the `RemoveAt` m } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/RemoveAnnotation/RemoveAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/RemoveAnnotation/RemoveAnnotation) -Also, a collection of annotations can be removed from the node by using the `Remove` method. +Also, The `Remove` method can also be used to remove a specific annotation object. ```cshtml // Method to remove annotation at runtime using Remove method. @@ -200,13 +200,13 @@ Also, a collection of annotations can be removed from the node by using the `Rem ``` N>* You can delete multiple annotations from a node to pass the collection of annotation objects as argument. -
* The `Add`, `Remove`, and `RemoveAt` methods are applicable for connectors too. +
* The `Add`, `AddAsync`, `Remove`, and `RemoveAt` methods are applicable for connectors too. -## How to Update Annotation at Runtime +## How to Update an Annotation at Runtime -You can get the annotation directly from the node’s annotations collection property and you can change any annotation properties at runtime. +An annotation can be updated at runtime by retrieving it from the node or connector's Annotations collection and modifying its properties. -The following code sample shows how the annotation of the node changed at runtime. +The following code sample shows how to change the content of a node's annotation at runtime. ```cshtml @using Syncfusion.Blazor.Diagram @@ -250,7 +250,7 @@ The following code sample shows how the annotation of the node changed at runtim } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/UpdateAnnotation/UpdateAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/UpdateAnnotation/UpdateAnnotation) ## See also @@ -261,6 +261,6 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * [How to animate connectors using annotationtemplate in angular diagram](https://support.syncfusion.com/kb/article/20265/how-to-animate-connectors-using-annotationtemplate-in-angular-diagram ) * [How to dynamically create and connect diagram nodes with annotations via ports in syncfusion® blazor diagram](https://support.syncfusion.com/kb/article/19001/how-to-dynamically-create-and-connect-diagram-nodes-with-annotations-via-ports-in-syncfusion-blazor-diagram)  -* [How to Prevent Text Overflow and Display Excess Content on Hover in a Diagram?](https://support.syncfusion.com/kb/article/18726/how-to-prevent-text-overflow-and-display-excess-content-on-hover-in-a-diagram) +* [How to Prevent text Overflow and display excess Content on hover in a diagram](https://support.syncfusion.com/kb/article/18726/how-to-prevent-text-overflow-and-display-excess-content-on-hover-in-a-diagram) -* [How to generate a hierarchical layout with annotation at runtime?](https://support.syncfusion.com/kb/article/17884/how-to-generate-a-hierarchical-layout-with-annotation-at-runtime) \ No newline at end of file +* [How to generate a hierarchical layout with annotations at runtime](https://support.syncfusion.com/kb/article/17884/how-to-generate-a-hierarchical-layout-with-annotation-at-runtime) \ No newline at end of file diff --git a/blazor/diagram/annotations/node-annotation.md b/blazor/diagram/annotations/node-annotation.md index 90f46e74d6..6a89005441 100644 --- a/blazor/diagram/annotations/node-annotation.md +++ b/blazor/diagram/annotations/node-annotation.md @@ -1,7 +1,7 @@ --- layout: post title: Node Annotation Position in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about annotation for node in Syncfusion Blazor Diagram component and more. +description: Checkout and Learn how to position annotations on nodes in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug @@ -9,7 +9,9 @@ documentation: ug # Node Annotation Position in Blazor Diagram Component -The diagram allows you to customize the position and appearance of the annotation efficiently. Annotations can be aligned relative to the node boundaries. It has Margin, Offset, Horizontal, and Vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignments properties of the [ShapeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html) class. Annotations of a node can be positioned using the following properties of `ShapeAnnotation`. +The diagram allows you to customize the position and appearance of the annotation efficiently. Annotations can be aligned relative to the node boundaries. It has Margin, Offset, Horizontal, and Vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignments properties of the [ShapeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html) class. + + Annotations of a node can be positioned using the following properties of `ShapeAnnotation`. * Offset * HorizontalAlignment @@ -18,9 +20,9 @@ The diagram allows you to customize the position and appearance of the annotatio ## How to Change Annotation Offset Position -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_Offset) property of an annotation is used to align the annotations based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height. +The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_Offset) property of an annotation is used to align the annotations based on fractions. It is defined by a `DiagramPoint` where the X and Y values are fractions of the node's width and height, respectively. A value of 0 represents the top or left edge, 1 represents the bottom or right edge, and 0.5 represents the center. -The following code shows the relationship between the shape annotation position and the path annotation offset (fraction values). +The following code demonstrates how to set an annotation's `Offset`. ```cshtml @using Syncfusion.Blazor.Diagram @@ -56,7 +58,7 @@ The following code shows the relationship between the shape annotation position } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/OffsetofAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/OffsetofAnnotation) | Offset values | Output | @@ -81,7 +83,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync The [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_HorizontalAlignment) property of an annotation is used to set how the annotation is horizontally aligned at the annotation position determined from the fraction values. The [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_VerticalAlignment) property is used to set how the annotation is vertically aligned at the annotation position. -The following table shows all the possible alignments visually with 'offset (0, 0)'. +The following table shows all the possible alignments visually with an 'offset of (0, 0)'. | Horizontal Alignment | Vertical Alignment | Output with Offset(0,0) | | -------- | -------- | -------- | @@ -95,7 +97,7 @@ The following table shows all the possible alignments visually with 'offset (0, | Center | Bottom | ![Blazor Diagram Label in Center Bottom Position](../images/blazor-diagram-label-in-centerbottom-position.png) | | Right |Bottom |![Blazor Diagram Label in Right Bottom Position](../images/blazor-diagram-label-in-rightbottom-position.png) | -The following code explains how to align annotations. +The following code demonstrates how to align an annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -133,7 +135,7 @@ The following code explains how to align annotations. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/AlignmentOfAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/AlignmentOfAnnotation) 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. @@ -142,7 +144,7 @@ N>* The value of the `HorizontalAlignment` is [Center](https://help.syncfusion.c ## How to Change Annotation Margin -[Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Margin) is an absolute value used to add some blank space to any one of its four sides. The annotations can be displaced with the margin property. The following code example explains how to align an annotation based on its Offset, HorizontalAlignment, VerticalAlignment, and Margin values. +The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Margin) property adds space around the annotation. The annotations can be displaced with the margin property. The following code example explains how to align an annotation based on its Offset, HorizontalAlignment, VerticalAlignment, and Margin values. ```cshtml @using Syncfusion.Blazor.Diagram @@ -182,12 +184,12 @@ N>* The value of the `HorizontalAlignment` is [Center](https://help.syncfusion.c } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/MarginOfAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/MarginOfAnnotation) ## How to Align the Text -The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextAlign) property of an annotation allows you to set how the text should be aligned (Left, Right, Center, or Justify) inside the text block. The following code explains how to set TextAlign for an annotation. +The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextAlign) property of an annotation's Style allows you to set how the text should be aligned (Left, Right, Center, or Justify) inside the text block. The following code explains how to set TextAlign for an annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -228,11 +230,11 @@ The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/AlignText) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/AlignText) ## See also -* [How to add annotation for Connector](./connector-annotation) +* [How to add an annotation for a Connector](./connector-annotation) * [How to add or remove annotation constraints](../constraints#annotation-constraints) diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index bec15c2b7b..d1b36835b3 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -11,7 +11,7 @@ documentation: ug The [Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) is the task that is performed in a business process. It is represented by a rounded rectangle. -There are two types of activities. They are listed as follows: +There are two primary types of activities. They are listed as follows: * [Task](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_Task): It occurs within a process and is not broken down to a finer level of detail. * [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess): It occurs within a process and is broken down to a finer level of detail. @@ -52,13 +52,15 @@ You can specify the any one of the above activity type using the [ActivityType]( } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivity) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivity) ![Send Task BPMN Shape](../images/Task.png) ## 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](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. ```cshtml @using Syncfusion.Blazor.Diagram @@ -95,12 +97,12 @@ The [TaskType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.B } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivityTask) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivityTask) ![Send Task BPMN Shape](../images/Send.png) -The various types of BPMN tasks are tabulated as follows. +The available BPMN task types are described below. | Shape | Image | Description| | -------- | -------- | -------- | @@ -152,7 +154,7 @@ A [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivityCollapsedSubProcess) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivityCollapsedSubProcess) ![Collapsed Subprocess BPMN Shape](../images/Bpmn-CollapsedSub-Process-Loop-None.png) @@ -198,12 +200,12 @@ You can define the `Loop` property in BPMN Activity, as shown in the following c } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Loop) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Loop) ![Standard Task BPMN Shape](../images/Bpmn-Task-Loop-Standard.png) -The following table contains various types of BPMN loops. +The available loop types are described below. | LoopActivity | Task | Subprocess | Description| | -------- | -------- | --------| --------| @@ -252,7 +254,7 @@ The following table contains various types of BPMN loops. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Compensation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Compensation) ![IsCompensationActivity Task BPMN Shape](../images/Bpmn-Task-Compensation.png) @@ -347,14 +349,14 @@ N>* By default, the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.B } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Adhoc) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Adhoc) ![IsAdHocActivity CollapsedSub-Process BPMN Shape](../images/Bpmn-CollapsedSub-Process-AdHocpng.png) ### 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). +The `SubProcessType` property 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). ```cshtml @using Syncfusion.Blazor.Diagram @@ -391,11 +393,11 @@ SubProcessType represents the type of task that is being processed. The [SubProc } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/SubProcessType) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/SubProcessType) ![Event Boundary BPMN Shape](../images/Bpmn-CollapsedSub-Process-Event.png) -The following table contains various types of BPMN boundaries. +The available sub-process types are described below. | SubProcessType | Image | Description| | -------- | -------- | -------- | diff --git a/blazor/diagram/bpmn-shapes/bpmn-connectors.md b/blazor/diagram/bpmn-shapes/bpmn-connectors.md index ecb451a1da..1d642f73af 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-connectors.md +++ b/blazor/diagram/bpmn-shapes/bpmn-connectors.md @@ -11,19 +11,21 @@ documentation: ug The `BPMN Connectors` are lines that connect BPMN flow objects. -They are classified as follows. +They are primarily classified into three categories: * Association * Sequence * Message -## How to Create a Association +## How to Create an Association -The `BPMN Association` flow is used to link flow objects with their corresponding text or artifact. An association is represented as a dotted graphical line with an opened arrow. -To create an Association, the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to [AssociationFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_AssociationFlow). The types of association are as follows: +An `BPMN Association` flow is used to link flow objects with their corresponding text or artifact. It is represented as a dotted graphical line with an opened arrow. +To create an Association, set the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to one of the association types. -* DirectionalAssociationFlow: Represented as a dotted graphical line with one side arrow. -* BiDirectionalAssociationFlow: Represented as a dotted graphical line with double side arrow. -* AssociationFlow: An Association is represented as a dotted graphical line with an opened arrow. +The available association types are: + +* DirectionalAssociationFlow: A dotted graphical line with one side arrow. +* BiDirectionalAssociationFlow: A dotted graphical line with double side arrow. +* AssociationFlow: A dotted graphical line with an opened arrow. The following code example explains how to create an association. @@ -58,7 +60,7 @@ The following code example explains how to create an association. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Association) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Association) ![Default BPMN FlowShapes](../images/Bpmn-AssociationFlow.png) @@ -72,7 +74,9 @@ The following table shows the visual representation of association flows. ## How to Create a Sequence -A `Sequence` flow shows the order that the activities are performed in a BPMN process and is represented by a solid graphical line. To create a SequenceFlow, [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to [SequenceFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_SequenceFlow). The types of sequence are as follows: +A `Sequence` flow shows the order that the activities are performed in a BPMN process and is represented by a solid graphical line. To create a SequenceFlow,set the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) shape to one of the sequence types. + +The available sequence types are: * SequenceFlow: Sequence flows represent the typical path between the two flow objects. * ConditionalSequenceFlow: Conditional sequence flows are used to control the flow of a process based on certain conditions. @@ -111,11 +115,11 @@ The following code example explains how to create a sequence flow. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Sequence) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Sequence) ![Normal Sequence BPMN Shape](../images/Bpmn-SequenceFlow.png) -The following table contains various representation of sequence flows. +The following table shows the different representations of sequence flows. | Sequence | Image | | -------- | -------- | @@ -127,7 +131,9 @@ N> The default value for the property `Sequence` is **Normal.** ## How to Create a Message -`Message` flows are used when two separately controlled processes communicate and collaborate with one another. An activity or event in one pool can initiate a message to the another pool. Message Flows are depicted as lines with an empty circle indicating where the message originates and an empty arrowhead where the message terminates. To create a MessageFlow, the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to [MessageFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_MessageFlow). The types of message flows are as follows: +A `Message` flows are used when two separately controlled processes communicate and collaborate with one another. An activity or event in one pool can initiate a message to the another pool. Message Flows are depicted as lines with an empty circle indicating where the message originates and an empty arrowhead where the message terminates. To create a MessageFlow, the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to one of the message types. + +The available message flow types are: * InitiatingMessageFlow: An activity or event in one pool can initiate a message to another pool. * NonInitiatingMessageFlow: An activity or event in one pool cannot initiate a message to another pool. @@ -166,11 +172,11 @@ The following code example explains how to define a message flow. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Message) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Message) ![Default Message BPMN Shape](../images/Bpmn-MessageFlow.png) -The following table contains various representation of message flows. +The following table shows the different representations of message flows. | Message | Image | | -------- | -------- | @@ -178,4 +184,4 @@ The following table contains various representation of message flows. | [InitiatingMessageFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_InitiatingMessageFlow) | ![InitiatingMessage Message BPMN Shape](../images/Bpmn-NonInitiatingMessageFlow.png) | | [NonInitiatingMessageFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_NonInitiatingMessageFlow) | ![NonInitiatingMessage Message BPMN Shape](../images/Bpmn-InitiatingMessageFlow.png) | -N> The default value for the property `Flow` is **SequenceFlow.** +N> The default value for the property `Flow` property of a `BpmnFlow` shape is **SequenceFlow.** diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-object.md b/blazor/diagram/bpmn-shapes/bpmn-data-object.md index fc0e34822e..644ee9cece 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-object.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-object.md @@ -9,7 +9,7 @@ documentation: ug # BPMN Data Object in Blazor Diagram Component -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 [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), and the [DataObjectType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_DataObjectType) property defines whether data is an input or output. You can indicate the collection of data object by setting the [IsCollectiveData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_IsCollectiveData) property of [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html) as **True.** +A `BPMN 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 [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), and the [DataObjectType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_DataObjectType) property defines whether data is an input or output. You can indicate the collection of data object by setting the [IsCollectiveData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_IsCollectiveData) property of [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html) as **True.** ```cshtml @using Syncfusion.Blazor.Diagram @@ -46,11 +46,11 @@ A data object represents information flowing through the process, such as data p } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnDataObject/BpmnDataObject) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnDataObject/BpmnDataObject) ![ Data BPMN Shape](../images/Bpmn-DataObject-Collective-None.png) -The following table contains various representation of the BPMN data object. +The following table describes the different types of BPMN Data Objects. | DataObjectType | Symbol |IsCollectiveData| Description| | -------- | -------- |-------- | -------- | diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-store.md b/blazor/diagram/bpmn-shapes/bpmn-data-store.md index 459dc80831..ac992e958e 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 DataStore is used to store or access data associated with a business process. To create a dataStore, 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 source. +A DataStore 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 source. ```cshtml @using Syncfusion.Blazor.Diagram @@ -42,6 +42,6 @@ A DataStore is used to store or access data associated with a business process. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnDataStore/BpmnDataStore) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnDataStore/BpmnDataStore) ![BPMN Datasource](../images/Bpmn-DataStore.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-event.md b/blazor/diagram/bpmn-shapes/bpmn-event.md index 5d5212d551..4e809c8dc2 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-event.md +++ b/blazor/diagram/bpmn-shapes/bpmn-event.md @@ -52,7 +52,7 @@ The [EventType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnEvent/BpmnEventType) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnEvent/BpmnEventType) ![None Trigger End event event BPMNShape](../images/Bpmn-Event-End.png) @@ -97,7 +97,7 @@ Event triggers are notated as icons inside the circle and they represent the spe } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnEvent/BpmnEventType) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnEvent/BpmnEventType) ![Message Trigger Start Event BPMN Shape](../images/Bpmn-Event-Message-Start.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md index 99fb043502..d520b96466 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 ExpandedSubProcess 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 `BPMN Expanded Sub-Process` 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 BPMN Expanded Sub-Process -To create a ExpandedSubProcess, define the `Shape` property of the node as [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) and enable allow drop property of the node. +## 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 allow drop property of the node. The following code example explains how to create a BPMN Expanded Sub-Process. @@ -47,14 +47,15 @@ The following code example explains how to create a BPMN Expanded Sub-Process. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/BpmnExpandedSubProcess) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/BpmnExpandedSubProcess) -![BPMN Expanded Sub-Process](../images/Bpmn-ExpandedSubProcess.png) +![BPMN Expanded Sub-Process shape in Blazor Diagram.](../images/Bpmn-ExpandedSubProcess.png) + +## How to Add BPMN Nodes into a BPMN Expanded Sub-Process -## How to Add BPMN Nodes into BPMN Expanded Sub-Process To add a BpmnNode into [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), define the BpmnNodeViewModel object and add it to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Children) collection of the [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html). -The following code example explains how to add a BPMN node to a BPMN Expanded Sub-Process using `Children` property. +The following code example explains how to add a BPMN node to an BPMN Expanded Sub-Process using the `Children` property. ```cshtml @using Syncfusion.Blazor.Diagram @@ -97,7 +98,7 @@ The following code example explains how to add a BPMN node to a BPMN Expanded Su } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/AddChildren) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/AddChildren) ![ExpandedSubProcess BPMN Shape](../images/Bpmn-ExpandedSubProcess-WithChildren.png) @@ -116,7 +117,7 @@ The following image shows how to add BPMN node into the BPMN ExpandedSubProcess ### How to Set Loop Type -[Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) is a task that is internally being looped. The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) allows you to define the type of loop. The default value for [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None). You can define the `Loop` property in [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), as shown in the following code. +The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) is a task that is internally being looped. The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) allows you to define the type of loop. The default value for [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None). You can define the `Loop` property in [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), as shown in the following code. ```cshtml @using Syncfusion.Blazor.Diagram @@ -152,11 +153,11 @@ The following image shows how to add BPMN node into the BPMN ExpandedSubProcess } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessLoop) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessLoop) ![Standard ExpandedSubProcess BPMN Shape](../images/Bpmn-Task-Loop-Standard.png) -The following table contains various types of BPMN loops. +The following table describes the available loop types for an Expanded Sub-Process. | LoopActivity | Task | Description| @@ -204,14 +205,14 @@ The following table contains various types of BPMN loops. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessCompensation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessCompensation) ![IsCompensationActivity ExpandedSub-Process BPMN Shape](../images/Bpmn-Task-Compensation.png) ### How to Enable Ad-Hoc -An ad-hoc ExpandedSubProcess is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and can be set with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsAdhoc) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html). +An `Ad-Hoc` Expanded Sub-Process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and can be set with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsAdhoc) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html). ```cshtml @using Syncfusion.Blazor.Diagram @@ -247,14 +248,14 @@ An ad-hoc ExpandedSubProcess is a group of tasks that are executed in any order } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessAdhoc) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessAdhoc) ![IsAdHocActivity ExpandedSub-Process BPMN Shape](../images/Bpmn-ExpandedSub-Process-Adhoc.png) ### 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.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_SubProcessType) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) 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). +The `SubProcessType` represents the type of task that is being processed. The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_SubProcessType) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) 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). ```cshtml @using Syncfusion.Blazor.Diagram @@ -290,11 +291,11 @@ SubProcessType represents the type of task that is being processed. The [SubProc } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessType) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessType) ![Event Boundary BPMN Shape](../images/Bpmn-ExpandedSub-Process-Event.png) -The following table contains various types of BPMN SubProcess. +The following table describes the available sub-process types. | SubProcessType | Image | Description| | -------- | -------- | -------- | diff --git a/blazor/diagram/bpmn-shapes/bpmn-gateway.md b/blazor/diagram/bpmn-shapes/bpmn-gateway.md index 9c08db8259..69cab3c37b 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 Blazor Diagram Component -A Gateway 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) can be set with any of the appropriate gateways. By default, the value of [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_None). The following code example explains how to create a BPMN Gateway. +A `BPMN Gateway` 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) can be set with any of the appropriate gateways. By default, the value of [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_None). The following code example explains how to create a BPMN Gateway. ```cshtml @using Syncfusion.Blazor.Diagram @@ -45,14 +45,14 @@ A Gateway is used to control the flow of a process and it is represented in diam } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnGateway/BpmnGateway) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnGateway/BpmnGateway) ![GateWay BPMN Shape](../images/bpmn-gataway-none.png) N> By default, the `GatewayType` will be set to **None.** -There are several types of gateways as follows: +The following table describes the available gateway types. | Shape | Image | Description| | -------- | -------- | -------- | diff --git a/blazor/diagram/bpmn-shapes/bpmn-shapes.md b/blazor/diagram/bpmn-shapes/bpmn-shapes.md index 3fb0b35515..f072dff140 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-shapes.md +++ b/blazor/diagram/bpmn-shapes/bpmn-shapes.md @@ -11,7 +11,7 @@ documentation: ug BPMN (Business Process Model and Notation) shapes are used to represent the internal business procedure in a graphical notation and enable you to communicate the procedures in a standard manner. To create a BPMN shape, the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as any one of the built-in shapes. -The following code example explains how to create a simple business process. +The following code example demonstrates how to create a simple BPMN Task shape. ```cshtml @using Syncfusion.Blazor.Diagram @@ -47,14 +47,14 @@ The following code example explains how to create a simple business process. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnShape/BpmnShape) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnShape/BpmnShape) >**Note:** Node's Id should not start with numbers or special characters and should not contain special characters such as underscore(_) or space. ![Activity Shape](../images/Task.png) -The list of supported BPMN shapes are as follows: +The following table describes the available BPMN shapes. | Shape | Image | Description| | -------- | -------- | -------- | diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 954f284ffb..06882fd354 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -15,7 +15,7 @@ documentation: ug * The annotation element can be switched from a BPMN node to another BPMN node simply by dragging the source end of the annotation connector into the other BPMN node. -* By default, the TextAnnotation shape has a connection. +* By default, the `TextAnnotation` shape has a connection. * The [TextAnnotationDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationDirection) property is used to set the shape direction of the text annotation. @@ -68,7 +68,7 @@ documentation: ug } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnTextAnnotation/BpmnTextAnnotation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnTextAnnotation/BpmnTextAnnotation) ![Auto BPMN Shape](../images/Bpmn-TextAnnotation-Auto.png) @@ -139,13 +139,14 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Auto BPMN Shape](../images/bpmn-text-annotation_WithTarget.png) ## How to Connect a Text Annotation to a BPMN Node + Drag and drop any bpmn shapes from the palette to the diagram and connect the BPMN Node and TextAnnotation. The following image shows how to drag a symbol from the palette and connect the TextAnnotation to the BPMNNode with interaction. ![Auto BPMN Shape](../images/Bpmn-TextAnnotationTarget-Connect.gif) -There are several types of Text annotation directions as follows: +The following table describes the available Text annotation directions | Direction | Image | | -------- | -------- | From f12e33f75af6241615ebc074c1e9ba684ecc98b1 Mon Sep 17 00:00:00 2001 From: Ramya Date: Wed, 24 Sep 2025 14:54:39 +0530 Subject: [PATCH 02/18] Revamping the Ug --- blazor/diagram/annotations/appearance.md | 2 +- blazor/diagram/annotations/labels.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-activity.md | 6 +++--- blazor/diagram/bpmn-shapes/bpmn-connectors.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-data-object.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-event.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md | 5 +++-- blazor/diagram/bpmn-shapes/bpmn-gateway.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-shapes.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-text-annotation.md | 2 +- 10 files changed, 14 insertions(+), 13 deletions(-) diff --git a/blazor/diagram/annotations/appearance.md b/blazor/diagram/annotations/appearance.md index c551a449a4..5ed356a4ae 100644 --- a/blazor/diagram/annotations/appearance.md +++ b/blazor/diagram/annotations/appearance.md @@ -544,7 +544,7 @@ Refer to [Constraints](https://blazor.syncfusion.com/documentation/diagram/const ## How to Define Templates in Annotations -The Diagram component supports using templates for annotations. HTML content can be defined within a Diagram Templates tag and associated with an annotation by setting its [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property to true. If you need to define separate templates for each annotation, you can differentiate using the ID property. +The Diagram component supports templating for annotations. HTML content can be defined within the DiagramTemplates tag and linked to an annotation by setting the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property to true. To define separate templates for individual annotations, use the ID property to differentiate them. The following code illustrates how to define a template for both a node's and a connector's annotation. ```cshtml diff --git a/blazor/diagram/annotations/labels.md b/blazor/diagram/annotations/labels.md index 755366ee05..d48dc00270 100644 --- a/blazor/diagram/annotations/labels.md +++ b/blazor/diagram/annotations/labels.md @@ -258,7 +258,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn * [How to customize the annotation](./appearance) -* [How to animate connectors using annotationtemplate in angular diagram](https://support.syncfusion.com/kb/article/20265/how-to-animate-connectors-using-annotationtemplate-in-angular-diagram ) +* [How to animate connectors using annotationtemplate in angular diagram](https://support.syncfusion.com/kb/article/20265/how-to-animate-connectors-using-annotation template-in-angular-diagram ) * [How to dynamically create and connect diagram nodes with annotations via ports in syncfusion® blazor diagram](https://support.syncfusion.com/kb/article/19001/how-to-dynamically-create-and-connect-diagram-nodes-with-annotations-via-ports-in-syncfusion-blazor-diagram)  * [How to Prevent text Overflow and display excess Content on hover in a diagram](https://support.syncfusion.com/kb/article/18726/how-to-prevent-text-overflow-and-display-excess-content-on-hover-in-a-diagram) diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index d1b36835b3..c56bef9f86 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -1,6 +1,6 @@ --- layout: post -title: BPMN Activity in Blazor Diagram Component | Syncfusion +title: BPMN Activity in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about BPMN activity such as task, sub-process in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component @@ -58,7 +58,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## 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 [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 specification of the task type, such as sending, receiving, or user-based tasks. By default, the TaskType property is set to None, which is visually represented by a small event symbol in the top corner of the activity shape. The following code explains how to create different types of BPMN tasks. @@ -356,7 +356,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Set Sub-Process Type -The `SubProcessType` property 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). +The `SubProcessType` property represents the type of task being processed within a BPMN subprocess. The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_SubProcessType) property of the subprocess allows specification of the subprocess type. By default, it is set to Default. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-connectors.md b/blazor/diagram/bpmn-shapes/bpmn-connectors.md index 1d642f73af..79b15cae41 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-connectors.md +++ b/blazor/diagram/bpmn-shapes/bpmn-connectors.md @@ -1,6 +1,6 @@ --- layout: post -title: BPMN Connectors in Blazor Diagram Component | Syncfusion +title: BPMN Connectors in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about BPMN Connectors such as association, sequence, message in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-object.md b/blazor/diagram/bpmn-shapes/bpmn-data-object.md index 644ee9cece..5b72669643 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-object.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-object.md @@ -1,6 +1,6 @@ --- layout: post -title: BPMN Data Object in Blazor Diagram Component | Syncfusion +title: BPMN Data Object in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create BPMN data object in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component diff --git a/blazor/diagram/bpmn-shapes/bpmn-event.md b/blazor/diagram/bpmn-shapes/bpmn-event.md index 4e809c8dc2..abde0cbe45 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-event.md +++ b/blazor/diagram/bpmn-shapes/bpmn-event.md @@ -1,6 +1,6 @@ --- layout: post -title: BPMN Event in Blazor Diagram Component | Syncfusion +title: BPMN Event in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create the BPMN event and event trigger in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component diff --git a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md index d520b96466..e86a9011c9 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md +++ b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md @@ -117,7 +117,8 @@ 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) is a task that is internally being looped. The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) allows you to define the type of loop. The default value for [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None). You can define the `Loop` property in [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), as shown in the following code. + The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) property in the [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) component defines the type of loop behavior for a task that is internally repeated. By default, the Loop property is set to [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None). + The Loop property can be configured within the BpmnExpandedSubProcess component, as demonstrated in the following example. ```cshtml @using Syncfusion.Blazor.Diagram @@ -255,7 +256,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Set Sub-Process Type -The `SubProcessType` represents the type of task that is being processed. The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_SubProcessType) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) 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). +The `SubProcessType` represents the type of task being processed within a BPMN expanded subprocess. The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_SubProcessType) property of the [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) component allows specification of the subprocess type. By default, it is set to [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Default). ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-gateway.md b/blazor/diagram/bpmn-shapes/bpmn-gateway.md index 69cab3c37b..0101d2b3f0 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-gateway.md +++ b/blazor/diagram/bpmn-shapes/bpmn-gateway.md @@ -1,6 +1,6 @@ --- layout: post -title: BPMN Gateway in Blazor Diagram Component | Syncfusion +title: BPMN Gateway in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create the BPMN gateway in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component diff --git a/blazor/diagram/bpmn-shapes/bpmn-shapes.md b/blazor/diagram/bpmn-shapes/bpmn-shapes.md index f072dff140..a3822a3a2a 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-shapes.md +++ b/blazor/diagram/bpmn-shapes/bpmn-shapes.md @@ -1,6 +1,6 @@ --- layout: post -title: BPMN Shapes in Blazor Diagram Component | Syncfusion +title: BPMN Shapes in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create various BPMN Shapes in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 06882fd354..eb366c5d49 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -1,6 +1,6 @@ --- layout: post -title: BPMN Text Annotation in Blazor Diagram Component | Syncfusion +title: BPMN Text Annotation in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create BPMN text annotation in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component From 6827e093aadfbd55b128f56bfdf7805dd47e2b9b Mon Sep 17 00:00:00 2001 From: Ramya Date: Wed, 24 Sep 2025 15:18:48 +0530 Subject: [PATCH 03/18] Revamping the Ug --- blazor/diagram/annotations/labels.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-activity.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-connectors.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-data-object.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-event.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-gateway.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-shapes.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-text-annotation.md | 4 ++-- 8 files changed, 15 insertions(+), 15 deletions(-) diff --git a/blazor/diagram/annotations/labels.md b/blazor/diagram/annotations/labels.md index d48dc00270..8f92d36736 100644 --- a/blazor/diagram/annotations/labels.md +++ b/blazor/diagram/annotations/labels.md @@ -258,7 +258,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn * [How to customize the annotation](./appearance) -* [How to animate connectors using annotationtemplate in angular diagram](https://support.syncfusion.com/kb/article/20265/how-to-animate-connectors-using-annotation template-in-angular-diagram ) +* [How to animate connectors using annotation template in angular diagram](https://support.syncfusion.com/kb/article/20265/how-to-animate-connectors-using-annotation template-in-angular-diagram ) * [How to dynamically create and connect diagram nodes with annotations via ports in syncfusion® blazor diagram](https://support.syncfusion.com/kb/article/19001/how-to-dynamically-create-and-connect-diagram-nodes-with-annotations-via-ports-in-syncfusion-blazor-diagram)  * [How to Prevent text Overflow and display excess Content on hover in a diagram](https://support.syncfusion.com/kb/article/18726/how-to-prevent-text-overflow-and-display-excess-content-on-hover-in-a-diagram) diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index c56bef9f86..067fca86d1 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Activity in Syncfusion Blazor Diagram Component | Syncfusion +title: BPMN Activity in Blazor Diagram Component | Syncfusion description: Learn here all about BPMN activity such as task, sub-process in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Activity in Blazor Diagram Component +# BPMN Activity in Syncfusion Blazor Diagram Component The [Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) is the task that is performed in a business process. It is represented by a rounded rectangle. diff --git a/blazor/diagram/bpmn-shapes/bpmn-connectors.md b/blazor/diagram/bpmn-shapes/bpmn-connectors.md index 79b15cae41..e09159db05 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-connectors.md +++ b/blazor/diagram/bpmn-shapes/bpmn-connectors.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Connectors in Syncfusion Blazor Diagram Component | Syncfusion +title: BPMN Connectors in Blazor Diagram Component | Syncfusion description: Learn here all about BPMN Connectors such as association, sequence, message in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Connectors in Blazor Diagram Component +# BPMN Connectors in Syncfusion Blazor Diagram Component The `BPMN Connectors` are lines that connect BPMN flow objects. diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-object.md b/blazor/diagram/bpmn-shapes/bpmn-data-object.md index 5b72669643..8505b38cc3 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-object.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-object.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Data Object in Syncfusion Blazor Diagram Component | Syncfusion +title: BPMN Data Object in Blazor Diagram Component | Syncfusion description: Learn here all about how to create BPMN data object in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Data Object in Blazor Diagram Component +# BPMN Data Object in Syncfusion Blazor Diagram Component A `BPMN 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 [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), and the [DataObjectType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_DataObjectType) property defines whether data is an input or output. You can indicate the collection of data object by setting the [IsCollectiveData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_IsCollectiveData) property of [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html) as **True.** diff --git a/blazor/diagram/bpmn-shapes/bpmn-event.md b/blazor/diagram/bpmn-shapes/bpmn-event.md index abde0cbe45..282df8a245 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-event.md +++ b/blazor/diagram/bpmn-shapes/bpmn-event.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Event in Syncfusion Blazor Diagram Component | Syncfusion +title: BPMN Event in Blazor Diagram Component | Syncfusion description: Learn here all about how to create the BPMN event and event trigger in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Event in Blazor Diagram Component +# BPMN Event in Syncfusion Blazor Diagram Component An [Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEvent.html) is a common BPMN process model element that represents something that happens during a business process and is notated with a circle. The type of events are as follows: diff --git a/blazor/diagram/bpmn-shapes/bpmn-gateway.md b/blazor/diagram/bpmn-shapes/bpmn-gateway.md index 0101d2b3f0..ffeac5a3d9 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-gateway.md +++ b/blazor/diagram/bpmn-shapes/bpmn-gateway.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Gateway in Syncfusion Blazor Diagram Component | Syncfusion +title: BPMN Gateway in Blazor Diagram Component | Syncfusion description: Learn here all about how to create the BPMN gateway in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Gateway in Blazor Diagram Component +# BPMN Gateway in Syncfusion Blazor Diagram Component A `BPMN Gateway` 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) can be set with any of the appropriate gateways. By default, the value of [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_None). The following code example explains how to create a BPMN Gateway. diff --git a/blazor/diagram/bpmn-shapes/bpmn-shapes.md b/blazor/diagram/bpmn-shapes/bpmn-shapes.md index a3822a3a2a..f6f76e8150 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-shapes.md +++ b/blazor/diagram/bpmn-shapes/bpmn-shapes.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Shapes in Syncfusion Blazor Diagram Component | Syncfusion +title: BPMN Shapes in Blazor Diagram Component | Syncfusion description: Learn here all about how to create various BPMN Shapes in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Shapes in Blazor Diagram Component +# BPMN Shapes in Syncfusion Blazor Diagram Component BPMN (Business Process Model and Notation) shapes are used to represent the internal business procedure in a graphical notation and enable you to communicate the procedures in a standard manner. To create a BPMN shape, the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as any one of the built-in shapes. diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index eb366c5d49..80d695d8ba 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Text Annotation in Syncfusion Blazor Diagram Component | Syncfusion +title: BPMN Text Annotation in Blazor Diagram Component | Syncfusion description: Learn here all about how to create BPMN text annotation in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Text Annotation in Blazor Diagram Component +# BPMN Text Annotation in Syncfusion Blazor Diagram Component * A BPMN object can be associated with a text annotation that does not affect the flow but provides information about objects within a flow. From 2c330d5a62e2ce5f39e0c26b7ce129c84b1d06a8 Mon Sep 17 00:00:00 2001 From: Ramya Date: Wed, 24 Sep 2025 17:54:34 +0530 Subject: [PATCH 04/18] Revamping the Ug --- blazor/diagram/bpmn-shapes/bpmn-activity.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-connectors.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-data-object.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-event.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-gateway.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-shapes.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-text-annotation.md | 4 ++-- 7 files changed, 14 insertions(+), 14 deletions(-) diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index 067fca86d1..08f39aba5d 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Activity in Blazor Diagram Component | Syncfusion +title: BPMN Activity in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about BPMN activity such as task, sub-process in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Activity in Syncfusion Blazor Diagram Component +# BPMN Activity in Diagram Component The [Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) is the task that is performed in a business process. It is represented by a rounded rectangle. diff --git a/blazor/diagram/bpmn-shapes/bpmn-connectors.md b/blazor/diagram/bpmn-shapes/bpmn-connectors.md index e09159db05..cd9cdbae9f 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-connectors.md +++ b/blazor/diagram/bpmn-shapes/bpmn-connectors.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Connectors in Blazor Diagram Component | Syncfusion +title: BPMN Connectors in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about BPMN Connectors such as association, sequence, message in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Connectors in Syncfusion Blazor Diagram Component +# BPMN Connectors in Diagram Component The `BPMN Connectors` are lines that connect BPMN flow objects. diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-object.md b/blazor/diagram/bpmn-shapes/bpmn-data-object.md index 8505b38cc3..cff8637d18 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-object.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-object.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Data Object in Blazor Diagram Component | Syncfusion +title: BPMN Data Object in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create BPMN data object in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Data Object in Syncfusion Blazor Diagram Component +# BPMN Data Object in Diagram Component A `BPMN 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 [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), and the [DataObjectType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_DataObjectType) property defines whether data is an input or output. You can indicate the collection of data object by setting the [IsCollectiveData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_IsCollectiveData) property of [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html) as **True.** diff --git a/blazor/diagram/bpmn-shapes/bpmn-event.md b/blazor/diagram/bpmn-shapes/bpmn-event.md index 282df8a245..65b065df03 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-event.md +++ b/blazor/diagram/bpmn-shapes/bpmn-event.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Event in Blazor Diagram Component | Syncfusion +title: BPMN Event in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create the BPMN event and event trigger in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Event in Syncfusion Blazor Diagram Component +# BPMN Event in Diagram Component An [Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEvent.html) is a common BPMN process model element that represents something that happens during a business process and is notated with a circle. The type of events are as follows: diff --git a/blazor/diagram/bpmn-shapes/bpmn-gateway.md b/blazor/diagram/bpmn-shapes/bpmn-gateway.md index ffeac5a3d9..e1c323193d 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-gateway.md +++ b/blazor/diagram/bpmn-shapes/bpmn-gateway.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Gateway in Blazor Diagram Component | Syncfusion +title: BPMN Gateway in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create the BPMN gateway in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Gateway in Syncfusion Blazor Diagram Component +# BPMN Gateway in Diagram Component A `BPMN Gateway` 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) can be set with any of the appropriate gateways. By default, the value of [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_None). The following code example explains how to create a BPMN Gateway. diff --git a/blazor/diagram/bpmn-shapes/bpmn-shapes.md b/blazor/diagram/bpmn-shapes/bpmn-shapes.md index f6f76e8150..174758c767 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-shapes.md +++ b/blazor/diagram/bpmn-shapes/bpmn-shapes.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Shapes in Blazor Diagram Component | Syncfusion +title: BPMN Shapes in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create various BPMN Shapes in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Shapes in Syncfusion Blazor Diagram Component +# BPMN Shapes in Diagram Component BPMN (Business Process Model and Notation) shapes are used to represent the internal business procedure in a graphical notation and enable you to communicate the procedures in a standard manner. To create a BPMN shape, the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as any one of the built-in shapes. diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 80d695d8ba..65f4c994c5 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Text Annotation in Blazor Diagram Component | Syncfusion +title: BPMN Text Annotation in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create BPMN text annotation in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Text Annotation in Syncfusion Blazor Diagram Component +# BPMN Text Annotation in Diagram Component * A BPMN object can be associated with a text annotation that does not affect the flow but provides information about objects within a flow. From b0a9101c5f83d7ffaefa2f40f8c4b2c308768a44 Mon Sep 17 00:00:00 2001 From: Ramya Date: Wed, 24 Sep 2025 18:22:49 +0530 Subject: [PATCH 05/18] Revamping the Ug --- blazor/diagram/bpmn-shapes/bpmn-text-annotation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 65f4c994c5..456523b657 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -1,6 +1,6 @@ --- layout: post -title: BPMN Text Annotation in Syncfusion Blazor Diagram Component | Syncfusion +title: BPMN Text Annotation in Blazor Diagram Component | Syncfusion description: Learn here all about how to create BPMN text annotation in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component From f9333a0939f292181426a9d36e46937f25d58961 Mon Sep 17 00:00:00 2001 From: Ramya Date: Thu, 25 Sep 2025 09:44:11 +0530 Subject: [PATCH 06/18] Revamping the Ug --- blazor/diagram/bpmn-shapes/bpmn-text-annotation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 456523b657..65f4c994c5 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -1,6 +1,6 @@ --- layout: post -title: BPMN Text Annotation in Blazor Diagram Component | Syncfusion +title: BPMN Text Annotation in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create BPMN text annotation in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component From 542cbc0db8911da33e7e60ff57c9cda5d9349992 Mon Sep 17 00:00:00 2001 From: Ramya Date: Thu, 25 Sep 2025 10:06:47 +0530 Subject: [PATCH 07/18] Revamping the Ug using AI. --- blazor/diagram/bpmn-shapes/bpmn-text-annotation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 65f4c994c5..456523b657 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -1,6 +1,6 @@ --- layout: post -title: BPMN Text Annotation in Syncfusion Blazor Diagram Component | Syncfusion +title: BPMN Text Annotation in Blazor Diagram Component | Syncfusion description: Learn here all about how to create BPMN text annotation in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component From 8f3c424c501b7879ceb40141fb66e28426ea268f Mon Sep 17 00:00:00 2001 From: Ramya Date: Thu, 25 Sep 2025 10:12:51 +0530 Subject: [PATCH 08/18] Revamping the Ug using AI. --- blazor/diagram/bpmn-shapes/bpmn-text-annotation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 456523b657..387ac1e6bc 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -1,6 +1,6 @@ --- layout: post -title: BPMN Text Annotation in Blazor Diagram Component | Syncfusion +title: BPMN Text Annotation in Diagram | Syncfusion description: Learn here all about how to create BPMN text annotation in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component From d5177076686deeeaba7b8b846989c5fd0f0ebf9c Mon Sep 17 00:00:00 2001 From: Ramya Date: Mon, 6 Oct 2025 16:41:45 +0530 Subject: [PATCH 09/18] Revamping the Ug --- blazor/diagram/annotations/appearance.md | 22 ++++++++++++++++++ .../annotations/connector-annotation.md | 8 +++++++ blazor/diagram/annotations/events.md | 2 ++ blazor/diagram/annotations/labels.md | 8 +++++++ blazor/diagram/annotations/node-annotation.md | 7 ++++++ blazor/diagram/bpmn-shapes/bpmn-activity.md | 23 +++++++++++++++---- blazor/diagram/bpmn-shapes/bpmn-connectors.md | 6 +++++ .../diagram/bpmn-shapes/bpmn-data-object.md | 2 ++ blazor/diagram/bpmn-shapes/bpmn-data-store.md | 2 ++ blazor/diagram/bpmn-shapes/bpmn-event.md | 4 ++++ .../bpmn-shapes/bpmn-expanded-sub-process.md | 14 ++++++++++- blazor/diagram/bpmn-shapes/bpmn-gateway.md | 2 ++ blazor/diagram/bpmn-shapes/bpmn-shapes.md | 2 ++ .../bpmn-shapes/bpmn-text-annotation.md | 4 ++++ 14 files changed, 101 insertions(+), 5 deletions(-) diff --git a/blazor/diagram/annotations/appearance.md b/blazor/diagram/annotations/appearance.md index 5ed356a4ae..f34faeabe3 100644 --- a/blazor/diagram/annotations/appearance.md +++ b/blazor/diagram/annotations/appearance.md @@ -44,6 +44,8 @@ The annotation size can be customized using the `Height` and `Width` properties. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXByCtXxVTAfPZsm?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/Annotations/Appearance/SizeOfAnnotation) ![Changing Annotation Size in Blazor Diagram](../images/blazor-diagram-annotation-size.png) @@ -90,6 +92,8 @@ A [Hyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.An } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBIWtDRBTaSnpxq?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/Annotations/Appearance/HyperlinktoAnnotation) ![Annotation with Hyperlink in Blazor Diagram](../images/blazor-diagram-annotation-with-hyperlink.png) @@ -137,6 +141,8 @@ The Content property of the Hyperlink can be set to display custom text for the } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLoMXNRrIZKmISV?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/Annotations/Appearance/HyperlinkWithContent) ![HyperLink with Content in Blazor Diagram](../images/blazor-diagram-hyperlink-content.png) @@ -184,6 +190,8 @@ The [TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagr } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthoiXDdVIsShZlW?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/Annotations/Appearance/AnnotationWithTextWrapping) | TextWrapping | Description | Image | @@ -242,6 +250,8 @@ The following code sample demonstrates how the TextOverflow property works with } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVoCXtHLSBncEEM?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/Annotations/Appearance/AnnotationWithTextOverflow) | TextOverflow | Wrapping | Image | @@ -316,6 +326,8 @@ The following code explains how to customize the visual appearance of an annotat } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBSMtXHByUvlGFt?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/Annotations/Appearance/Appearance) ![Blazor Diagram Label with Custom Annotation](../images/blazor-diagram-label-with-custom-annotation.png) @@ -384,6 +396,8 @@ The font style of annotations can be changed dynamically at runtime by modifying } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLSMXXHLypEIAGt?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/Annotations/Appearance/AnnotationStyleatRunTime) ## How to Edit Annotations at Runtime @@ -436,6 +450,8 @@ Annotations can be set to read-only mode by configuring their Constraints. Setti } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrIWjtxBeoSmkMG?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/Annotations/Appearance/ReaonlyConstraints) ## How to Create Multiple Annotations @@ -517,6 +533,8 @@ Multiple annotations can be added to a single node or connector. The following c } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLoMZtHrSEKMWRQ?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/Annotations/Appearance/MultipleAnnotation) ![Blazor Diagram with Multiple Annotations](../images/blazor-diagram-multiple-annotations.png) @@ -640,6 +658,8 @@ The following code illustrates how to define a template for both a node's and a } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVoMDtHVnZBKrQG?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/Annotations/TemplateSupportforAnnotation) ![Blazor Diagram with Template Annotations](../images/TemplateSupportforAnnotation.png) @@ -688,6 +708,8 @@ The following code demonstrates how to set a value for the AdditionalInfo proper } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtreCDDHBnjOUXBB?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/Annotations/AdditionalInfoProperty) **Note:** The AdditionalInfo property can accept any type of object as its value. diff --git a/blazor/diagram/annotations/connector-annotation.md b/blazor/diagram/annotations/connector-annotation.md index 82b83c5732..58c0c81082 100644 --- a/blazor/diagram/annotations/connector-annotation.md +++ b/blazor/diagram/annotations/connector-annotation.md @@ -68,6 +68,8 @@ The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Pat } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLSsDtHrxzCiyfQ?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/Annotations/AnnotationOfConnector/UpdateOffsetofAnnotation) The following image shows the relationship between the annotation position and offset (fraction values). @@ -121,6 +123,8 @@ The [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLIWNNdhRHwmmwP?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/Annotations/AnnotationOfConnector/AlignmentOfAnnotation) The following screenshot shows how the annotation of the connector aligned over its path. @@ -171,6 +175,8 @@ The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagr } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhSiDjdhHmyHgYP?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/Annotations/AnnotationOfConnector/DisplacementOfAnnotation) ## How to Update Annotation Segment Angle @@ -213,6 +219,8 @@ The following code example shows how the connector annotation rotated in its pat } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLIWtDnBRPnqaBj?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/Annotations/AnnotationOfConnector/SegmentAngleOfAnnotation) | SegmentAngle | Output | diff --git a/blazor/diagram/annotations/events.md b/blazor/diagram/annotations/events.md index 9d31839410..a4a6bd9347 100644 --- a/blazor/diagram/annotations/events.md +++ b/blazor/diagram/annotations/events.md @@ -61,6 +61,8 @@ The following code example shows how to register and get notifications from the } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVoijjnBnkUtSTH?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/Annotations/Events/TextChangedEvent) ## See also diff --git a/blazor/diagram/annotations/labels.md b/blazor/diagram/annotations/labels.md index 8f92d36736..e34685446f 100644 --- a/blazor/diagram/annotations/labels.md +++ b/blazor/diagram/annotations/labels.md @@ -69,6 +69,8 @@ The following code example demonstrates how to create an annotation for a node a } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjroijNRrQAsIOIt?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/Annotations/CreateAnnotation/CreateAnnotation) ![Blazor Diagram Node with Annotation](../images/blazor-diagram-node-with-annotation.png) @@ -122,6 +124,8 @@ The following code explains how to add an annotation to a node at runtime by usi } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLIMjtxrwUyoCqW?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/Annotations/AddAnnotationAtRunTime) Also, the annotations can be added at runtime by using the [AddAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramObjectCollection-1.html#Syncfusion_Blazor_Diagram_DiagramObjectCollection_1_AddAsync__0_) method. The `await` operator suspends the evaluation of the enclosing async method until the asynchronous operation represented by its operand completes. @@ -186,6 +190,8 @@ An annotation can be removed from a node or connector's Annotations collection b } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjByiXZHBwzKleyR?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/Annotations/RemoveAnnotation/RemoveAnnotation) Also, The `Remove` method can also be used to remove a specific annotation object. @@ -250,6 +256,8 @@ The following code sample shows how to change the content of a node's annotation } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBIitZxBcSXRxWo?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/Annotations/UpdateAnnotation/UpdateAnnotation) ## See also diff --git a/blazor/diagram/annotations/node-annotation.md b/blazor/diagram/annotations/node-annotation.md index 6a89005441..7c5151434a 100644 --- a/blazor/diagram/annotations/node-annotation.md +++ b/blazor/diagram/annotations/node-annotation.md @@ -58,6 +58,8 @@ The following code demonstrates how to set an annotation's `Offset`. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBeiZDnBmmdikgL?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/Annotations/AnnotationOfNode/OffsetofAnnotation) @@ -135,6 +137,8 @@ The following code demonstrates how to align an annotation. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDByMjDHhGlBwFTP?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/Annotations/AnnotationOfNode/AlignmentOfAnnotation) @@ -184,6 +188,8 @@ The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Ann } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhoWjDnBcbmFJCD?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/Annotations/AnnotationOfNode/MarginOfAnnotation) @@ -229,6 +235,7 @@ The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhSWDjdVvthJdOl?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/Annotations/AnnotationOfNode/AlignText) diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index 08f39aba5d..ab5609bdf3 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -52,6 +52,8 @@ You can specify the any one of the above activity type using the [ActivityType]( } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrIsXNHrvVrSjlR?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/BpmnEditor/BpmnActivity/BpmnActivity) ![Send Task BPMN Shape](../images/Task.png) @@ -71,11 +73,11 @@ The following code explains how to create different types of BPMN tasks. @code { // Initialize the node collection with node. - DiagramObjectCollection nodes; + DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { - nodes = new DiagramObjectCollection(); + Node node = new Node() { // Position of the node. OffsetX = 100, @@ -97,6 +99,8 @@ The following code explains how to create different types of BPMN tasks. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLeCtDxBvEwTETe?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/BpmnEditor/BpmnActivity/BpmnActivityTask) @@ -154,6 +158,8 @@ A [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhoCNjHLuiTiOoy?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/BpmnEditor/BpmnActivity/BpmnActivityCollapsedSubProcess) @@ -200,6 +206,8 @@ You can define the `Loop` property in BPMN Activity, as shown in the following c } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhSCZDxBkiYnGrJ?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/BpmnEditor/BpmnActivity/Loop) @@ -250,10 +258,12 @@ The available loop types are described below. IsCompensation = true, } }; - nodes.Add(node1); + nodes.Add(node); } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLoWZtRLYBpywwx?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/BpmnEditor/BpmnActivity/Compensation) @@ -302,6 +312,8 @@ N>* By default, the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDByWDNnVYBkymiU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Call) @@ -349,8 +361,9 @@ N>* By default, the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.B } } ``` -A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Adhoc) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrosNXRhkKyQthF?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/BpmnEditor/BpmnActivity/Adhoc) ![IsAdHocActivity CollapsedSub-Process BPMN Shape](../images/Bpmn-CollapsedSub-Process-AdHocpng.png) @@ -393,6 +406,8 @@ The `SubProcessType` property represents the type of task being processed within } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhSCZXxLkpZmobl?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/BpmnEditor/BpmnActivity/SubProcessType) ![Event Boundary BPMN Shape](../images/Bpmn-CollapsedSub-Process-Event.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-connectors.md b/blazor/diagram/bpmn-shapes/bpmn-connectors.md index cd9cdbae9f..57cfe83f18 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-connectors.md +++ b/blazor/diagram/bpmn-shapes/bpmn-connectors.md @@ -60,6 +60,8 @@ The following code example explains how to create an association. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBeitNHVuzaWWAu?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/BpmnEditor/BpmnConnectors/Association) ![Default BPMN FlowShapes](../images/Bpmn-AssociationFlow.png) @@ -115,6 +117,8 @@ The following code example explains how to create a sequence flow. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVIsDjHBuSBuntI?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/BpmnEditor/BpmnConnectors/Sequence) ![Normal Sequence BPMN Shape](../images/Bpmn-SequenceFlow.png) @@ -172,6 +176,8 @@ The following code example explains how to define a message flow. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVSittnhOeEgbiL?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/BpmnEditor/BpmnConnectors/Message) ![Default Message BPMN Shape](../images/Bpmn-MessageFlow.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-object.md b/blazor/diagram/bpmn-shapes/bpmn-data-object.md index cff8637d18..c4ef6c2c6e 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-object.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-object.md @@ -46,6 +46,8 @@ A `BPMN Data Object` represents information flowing through the process, such as } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBeiXjxVORwXwCi?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/BpmnEditor/BpmnDataObject/BpmnDataObject) ![ Data BPMN Shape](../images/Bpmn-DataObject-Collective-None.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-store.md b/blazor/diagram/bpmn-shapes/bpmn-data-store.md index ac992e958e..a63567cb55 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-store.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-store.md @@ -42,6 +42,8 @@ A DataStore is used to store or access data associated with a business process. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNryCNtxhaGiAiQN?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/BpmnEditor/BpmnDataStore/BpmnDataStore) ![BPMN Datasource](../images/Bpmn-DataStore.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-event.md b/blazor/diagram/bpmn-shapes/bpmn-event.md index 65b065df03..6dfa0d17ef 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-event.md +++ b/blazor/diagram/bpmn-shapes/bpmn-event.md @@ -52,6 +52,8 @@ The [EventType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLoWZZdracaAiTe?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/BpmnEditor/BpmnEvent/BpmnEventType) ![None Trigger End event event BPMNShape](../images/Bpmn-Event-End.png) @@ -97,6 +99,8 @@ Event triggers are notated as icons inside the circle and they represent the spe } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtresttdBOFpnepH?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/BpmnEditor/BpmnEvent/BpmnEventType) ![Message Trigger Start Event BPMN Shape](../images/Bpmn-Event-Message-Start.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md index e86a9011c9..9b76b67a25 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md +++ b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md @@ -47,6 +47,8 @@ The following code example explains how to create a BPMN Expanded Sub-Process. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLIiXXdLYuCAIfE?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/BpmnEditor/BpmnExpandedSubProcess/BpmnExpandedSubProcess) ![BPMN Expanded Sub-Process shape in Blazor Diagram.](../images/Bpmn-ExpandedSubProcess.png) @@ -98,6 +100,8 @@ The following code example explains how to add a BPMN node to an BPMN Expanded S } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBoitNxAtXgsIWc?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/BpmnEditor/BpmnExpandedSubProcess/AddChildren) @@ -154,6 +158,8 @@ The following image shows how to add BPMN node into the BPMN ExpandedSubProcess } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLSCXtnAjCCJzPT?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/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessLoop) ![Standard ExpandedSubProcess BPMN Shape](../images/Bpmn-Task-Loop-Standard.png) @@ -202,10 +208,12 @@ The following table describes the available loop types for an Expanded Sub-Proce IsCompensation = true, } }; - nodes.Add(node1); + nodes.Add(node); } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBystZxqXilLbOk?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/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessCompensation) @@ -249,6 +257,8 @@ An `Ad-Hoc` Expanded Sub-Process is a group of tasks that are executed in any or } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBSsXjnKTCBmLLc?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/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessAdhoc) @@ -292,6 +302,8 @@ The `SubProcessType` represents the type of task being processed within a BPMN e } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/htVoCZjRAziQIRel?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/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessType) ![Event Boundary BPMN Shape](../images/Bpmn-ExpandedSub-Process-Event.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-gateway.md b/blazor/diagram/bpmn-shapes/bpmn-gateway.md index e1c323193d..1dd2cb098d 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-gateway.md +++ b/blazor/diagram/bpmn-shapes/bpmn-gateway.md @@ -45,6 +45,8 @@ A `BPMN Gateway` is used to control the flow of a process and it is represented } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrIWZtdKJhVMLXv?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/BpmnEditor/BpmnGateway/BpmnGateway) diff --git a/blazor/diagram/bpmn-shapes/bpmn-shapes.md b/blazor/diagram/bpmn-shapes/bpmn-shapes.md index 174758c767..bcfb0455f4 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-shapes.md +++ b/blazor/diagram/bpmn-shapes/bpmn-shapes.md @@ -47,6 +47,8 @@ The following code example demonstrates how to create a simple BPMN Task shape. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLIMZDRqphwEgmr?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/BpmnEditor/BpmnShape/BpmnShape) diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 387ac1e6bc..d065f592da 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -68,6 +68,8 @@ documentation: ug } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDrIsXNxgTgIKWVj?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/BpmnEditor/BpmnTextAnnotation/BpmnTextAnnotation) ![Auto BPMN Shape](../images/Bpmn-TextAnnotation-Auto.png) @@ -134,6 +136,8 @@ The following code example represents how to create a TextAnnotation and connect } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrIWNXnKpTiBXyn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnTextAnnotation/TextAnnotationTarget) ![Auto BPMN Shape](../images/bpmn-text-annotation_WithTarget.png) From d1f4524b4f3a73e9f9a9fe214e237bc07cca111c Mon Sep 17 00:00:00 2001 From: Ramya Date: Mon, 6 Oct 2025 18:06:17 +0530 Subject: [PATCH 10/18] Revamping the Ug --- blazor/diagram/annotations/interactions.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/blazor/diagram/annotations/interactions.md b/blazor/diagram/annotations/interactions.md index 20bd0ad901..1e6771aab9 100644 --- a/blazor/diagram/annotations/interactions.md +++ b/blazor/diagram/annotations/interactions.md @@ -67,7 +67,7 @@ The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } } ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVesNXxpShYJhRa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} Value | Description | Image | | -------- | -------- | -------- | @@ -112,6 +112,8 @@ The following code examples illustrate how to configure `RotationAngle` for an a } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLIiZDRTogIAqku?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/Annotations/RotationAngleProperty) ![Annotation Rotation in Blazor Diagram](../images/RotationAngleAnnotation.png) From 660d569afb9bb03908dbec39cbf00467bceddb6c Mon Sep 17 00:00:00 2001 From: Ramya Date: Wed, 8 Oct 2025 15:38:18 +0530 Subject: [PATCH 11/18] Revamping the Ug --- blazor/diagram/bpmn-shapes/bpmn-activity.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-text-annotation.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index ab5609bdf3..9a88ccb3dc 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -314,7 +314,7 @@ N>* By default, the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/rDByWDNnVYBkymiU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Call) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Call) ![IsAdHocActivity CollapsedSub-Process BPMN Shape](../images/Bpmn-Task-Call.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index d065f592da..98411851e3 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -138,7 +138,7 @@ The following code example represents how to create a TextAnnotation and connect ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VNrIWNXnKpTiBXyn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnTextAnnotation/TextAnnotationTarget) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnTextAnnotation/TextAnnotationTarget) ![Auto BPMN Shape](../images/bpmn-text-annotation_WithTarget.png) From 50f61fabf55de936a85a7c242839601a186f6d59 Mon Sep 17 00:00:00 2001 From: Ramya Date: Fri, 10 Oct 2025 15:19:38 +0530 Subject: [PATCH 12/18] Revamping the Ug --- blazor/diagram/annotations/appearance.md | 20 ++++++++--------- .../annotations/connector-annotation.md | 4 ++-- blazor/diagram/annotations/interactions.md | 2 +- blazor/diagram/annotations/node-annotation.md | 8 +++---- blazor/diagram/bpmn-shapes/bpmn-activity.md | 18 +++++++-------- blazor/diagram/bpmn-shapes/bpmn-connectors.md | 22 +++++++++---------- .../diagram/bpmn-shapes/bpmn-data-object.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-data-store.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-event.md | 6 ++--- .../bpmn-shapes/bpmn-expanded-sub-process.md | 12 +++++----- blazor/diagram/bpmn-shapes/bpmn-gateway.md | 2 +- .../bpmn-shapes/bpmn-text-annotation.md | 4 ++-- 12 files changed, 51 insertions(+), 51 deletions(-) diff --git a/blazor/diagram/annotations/appearance.md b/blazor/diagram/annotations/appearance.md index f34faeabe3..d0f34cf281 100644 --- a/blazor/diagram/annotations/appearance.md +++ b/blazor/diagram/annotations/appearance.md @@ -11,7 +11,7 @@ documentation: ug ## How to Customize Annotation Size -The annotation size can be customized using the `Height` and `Width` properties. By default, the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Height) properties are 0, which means the annotation inherits the size of its parent node or connector. The following code example demonstrates how to customize the annotation size. +The annotation size can be customized using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Width) properties. By default, the `Width` and `Height` properties are **0**, which means the annotation inherits the size of its parent node or connector. The following code example demonstrates how to customize the annotation size. ```cshtml @using Syncfusion.Blazor.Diagram @@ -100,7 +100,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Display Text in Annotation Hyperlinks -The Content property of the Hyperlink can be set to display custom text for the link. +The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Content) property of the `Hyperlink` can be set to display custom text for the link. ```cshtml @using Syncfusion.Blazor.Diagram @@ -202,13 +202,13 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Control Text Overflow -The [TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextOverflow) property specifies how the overflowed content that is not displayed should be signaled to the user. The TextOverflow property can have the following values. +The [TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextOverflow) property specifies how the overflowed content that is not displayed should be signaled to the user. The `TextOverflow` property can have the following values. * **Wrap**: Wraps the text to the next line when it exceeds its bounds. * **Ellipsis**: Truncates the overflown text and renders an ellipsis ("...") to represent the clipped text. * **Clip**: Clips the text, and the overflowed text will not be visible. -The following code sample demonstrates how the TextOverflow property works with different TextWrapping settings. +The following code sample demonstrates how the `TextOverflow` property works with different `TextWrapping` settings. ```cshtml @using Syncfusion.Blazor.Diagram @@ -407,7 +407,7 @@ Annotations can be edited at runtime either programmatically or interactively. B * Programmatically: Invoke the [StartTextEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_StartTextEdit_Syncfusion_Blazor_Diagram_IDiagramObject_System_String_) method of the diagram component. * Interactively: * Double-click the annotation. - * Select the parent and press the F2 key. + * Select the parent and press the F2 or enter key. Double-clicking an annotation enables edit mode. For a object with multiple annotations, double-clicking the object itself will start the edit for the first annotation in its collection. When the focus of editor is lost, the annotation content is updated. @@ -540,7 +540,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ![Blazor Diagram with Multiple Annotations](../images/blazor-diagram-multiple-annotations.png) N>* Type of the annotation’s property of the node or connector is ObservableCollection. -
* Default value of the annotation will be null. +
* Default value of the annotation will be **null**.
* All customization options are applicable to each annotation in the collection.
* When double-clicking a node or connector, text editing is initiated only for the first annotation in the collection. @@ -548,7 +548,7 @@ N>* Type of the annotation’s property of the node or connector is ObservableCo [AnnotationConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html) are used to enable or disable certain behaviors of an annotation. Constraints are provided as flag enumerations, allowing multiple behaviors to be combined using bitwise operators. -AnnotationConstraints may have multiple behaviors as follows: +`AnnotationConstraints` may have multiple behaviors as follows: | Constraints | Usages | |---|---| @@ -562,7 +562,7 @@ Refer to [Constraints](https://blazor.syncfusion.com/documentation/diagram/const ## How to Define Templates in Annotations -The Diagram component supports templating for annotations. HTML content can be defined within the DiagramTemplates tag and linked to an annotation by setting the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property to true. To define separate templates for individual annotations, use the ID property to differentiate them. +The Diagram component supports templating for annotations. HTML content can be defined within the `DiagramTemplates` tag and linked to an annotation by setting the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property to **true**. To define separate templates for individual annotations, use the ID property to differentiate them. The following code illustrates how to define a template for both a node's and a connector's annotation. ```cshtml @@ -667,7 +667,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn The [AdditionalInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_AdditionalInfo) property of an annotation allows you to store extra information associated with the annotation in a flexible way. This can be useful for maintaining metadata or additional details that need to be accessed programmatically. -The following code demonstrates how to set a value for the AdditionalInfo property. +The following code demonstrates how to set a value for the `AdditionalInfo` property. ```cshtml @using Syncfusion.Blazor.Diagram @@ -712,7 +712,7 @@ The following code demonstrates how to set a value for the AdditionalInfo proper A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AdditionalInfoProperty) -**Note:** The AdditionalInfo property can accept any type of object as its value. +**Note:** The `AdditionalInfo` property can accept any type of object as its value. ## See also diff --git a/blazor/diagram/annotations/connector-annotation.md b/blazor/diagram/annotations/connector-annotation.md index 58c0c81082..4f374b1fe0 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 @@ -228,7 +228,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn | True | ![Blazor Diagram Annotation in Vertical Position](../images/blazor-diagram-annotation-in-vertical-position.png) | | False | ![Blazor Diagram Annotation in Horizontal Position](../images/blazor-diagram-annotation-in-horizontal-position.png) | -N> By default, the SegmentAngle property is disabled (false). +N> By default, the `SegmentAngle` property is disabled (false). The `HorizontalAlignment`, `VerticalAlignment` and `Margin` properties were explained in the [NodeAnnotation](./node-annotation). diff --git a/blazor/diagram/annotations/interactions.md b/blazor/diagram/annotations/interactions.md index 1e6771aab9..3b80687aac 100644 --- a/blazor/diagram/annotations/interactions.md +++ b/blazor/diagram/annotations/interactions.md @@ -79,7 +79,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## How to rotate a Annotation using the RotationAngle property -The [RotationAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_RotationAngle) property sets the rotation angle of an annotation in degrees. This determines how much the annotation text is tilted from its normal position. The default value is 0. +The [RotationAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_RotationAngle) property sets the rotation angle of an annotation in degrees. This determines how much the annotation text is tilted from its normal position. The default value is **0**. The following code examples illustrate how to configure `RotationAngle` for an annotation. diff --git a/blazor/diagram/annotations/node-annotation.md b/blazor/diagram/annotations/node-annotation.md index 7c5151434a..ee16f73522 100644 --- a/blazor/diagram/annotations/node-annotation.md +++ b/blazor/diagram/annotations/node-annotation.md @@ -20,7 +20,7 @@ The diagram allows you to customize the position and appearance of the annotatio ## How to Change Annotation Offset Position -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_Offset) property of an annotation is used to align the annotations based on fractions. It is defined by a `DiagramPoint` where the X and Y values are fractions of the node's width and height, respectively. A value of 0 represents the top or left edge, 1 represents the bottom or right edge, and 0.5 represents the center. +The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_Offset) property of an annotation is used to align the annotations based on fractions. It is defined by a `DiagramPoint` where the X and Y values are fractions of the node's width and height, respectively. A value of **0** represents the top or left edge, **1** represents the bottom or right edge, and **0.5** represents the center. The following code demonstrates how to set an annotation's `Offset`. @@ -78,7 +78,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn >**Note:** > * Type of the offset property for node’s shape annotation is [DiagramPoint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramPoint.html). -> * Type of the offset property for a connector’s path annotation is double. +> * Type of the offset property for a connector’s path annotation is **double**. > * Node annotation's Id should not start with numbers or special characters and should not contain special characters such as underscores(_) or spaces. ## How to Change the Annotation Alignment @@ -148,7 +148,7 @@ N>* The value of the `HorizontalAlignment` is [Center](https://help.syncfusion.c ## How to Change Annotation Margin -The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Margin) property adds space around the annotation. The annotations can be displaced with the margin property. The following code example explains how to align an annotation based on its Offset, HorizontalAlignment, VerticalAlignment, and Margin values. +The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Margin) property adds space around the annotation. The annotations can be displaced with the margin property. The following code example explains how to align an annotation based on its `Offset`, `HorizontalAlignment`, `VerticalAlignment`, and `Margin` values. ```cshtml @using Syncfusion.Blazor.Diagram @@ -195,7 +195,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## How to Align the Text -The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextAlign) property of an annotation's Style allows you to set how the text should be aligned (Left, Right, Center, or Justify) inside the text block. The following code explains how to set TextAlign for an annotation. +The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextAlign) property of an annotation's Style allows you to set how the text should be aligned (Left, Right, Center, or Justify) inside the text block. The following code explains how to set `TextAlign` for an annotation. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index 9a88ccb3dc..28a8020ee3 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -60,7 +60,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## 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 specification of the task type, such as sending, receiving, or user-based tasks. By default, the TaskType property is set to None, which is visually represented by a small event symbol in the top corner of the activity shape. +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 specification of the task type, such as sending, receiving, or user-based tasks. By default, the TaskType property is set to **None**, which is visually represented by a small event symbol in the top corner of the activity shape. The following code explains how to create different types of BPMN tasks. @@ -121,7 +121,7 @@ The available BPMN task types are described below. ## How to Create a BPMN Activity Collapsed Sub-Process -A [Collapsed Sub-Process](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 [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess). +A [Collapsed Sub-Process](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 `Collapsed Sub-Process`. ```cshtml @using Syncfusion.Blazor.Diagram @@ -167,7 +167,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_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` allows you to define the type of loop. The default value for `Loop` is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None). You can define the `Loop` property in BPMN Activity, as shown in the following code. @@ -224,7 +224,7 @@ The available loop types are described below. ### 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`. By default, the `IsCompensation` property is set to **false**. ```cshtml @using Syncfusion.Blazor.Diagram @@ -271,9 +271,9 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Enable Call -A [Call](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) 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). +A [Call](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) 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`. -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 @@ -321,9 +321,9 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Enable Ad-Hoc -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). +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`. -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 @@ -369,7 +369,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Set Sub-Process Type -The `SubProcessType` property represents the type of task being processed within a BPMN subprocess. The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_SubProcessType) property of the subprocess allows specification of the subprocess type. By default, it is set to Default. +The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_SubProcessType) property represents the type of task being processed within a BPMN subprocess. The `SubProcessType` property of the subprocess allows specification of the subprocess type. By default, it is set to **Default**. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-connectors.md b/blazor/diagram/bpmn-shapes/bpmn-connectors.md index 57cfe83f18..020092fab5 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-connectors.md +++ b/blazor/diagram/bpmn-shapes/bpmn-connectors.md @@ -23,9 +23,9 @@ To create an Association, set the [Flow](https://help.syncfusion.com/cr/blazor/S The available association types are: -* DirectionalAssociationFlow: A dotted graphical line with one side arrow. -* BiDirectionalAssociationFlow: A dotted graphical line with double side arrow. -* AssociationFlow: A dotted graphical line with an opened arrow. +* **DirectionalAssociationFlow**: A dotted graphical line with one side arrow. +* **BiDirectionalAssociationFlow**: A dotted graphical line with double side arrow. +* **AssociationFlow**: A dotted graphical line with an opened arrow. The following code example explains how to create an association. @@ -76,13 +76,13 @@ The following table shows the visual representation of association flows. ## How to Create a Sequence -A `Sequence` flow shows the order that the activities are performed in a BPMN process and is represented by a solid graphical line. To create a SequenceFlow,set the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) shape to one of the sequence types. +A `Sequence` flow shows the order that the activities are performed in a BPMN process and is represented by a solid graphical line. To create a SequenceFlow,set the `Flow` property of the `BpmnFlowShape` shape to one of the sequence types. The available sequence types are: -* SequenceFlow: Sequence flows represent the typical path between the two flow objects. -* ConditionalSequenceFlow: Conditional sequence flows are used to control the flow of a process based on certain conditions. -* DefaultSequenceFlow: Default sequence flows are represented by an arrow with a tic mark on one end. +* **SequenceFlow**: Sequence flows represent the typical path between the two flow objects. +* **ConditionalSequenceFlow**: Conditional sequence flows are used to control the flow of a process based on certain conditions. +* **DefaultSequenceFlow**: Default sequence flows are represented by an arrow with a tic mark on one end. The following code example explains how to create a sequence flow. @@ -135,13 +135,13 @@ N> The default value for the property `Sequence` is **Normal.** ## How to Create a Message -A `Message` flows are used when two separately controlled processes communicate and collaborate with one another. An activity or event in one pool can initiate a message to the another pool. Message Flows are depicted as lines with an empty circle indicating where the message originates and an empty arrowhead where the message terminates. To create a MessageFlow, the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to one of the message types. +A `Message` flows are used when two separately controlled processes communicate and collaborate with one another. An activity or event in one pool can initiate a message to the another pool. Message Flows are depicted as lines with an empty circle indicating where the message originates and an empty arrowhead where the message terminates. To create a MessageFlow, the `Flow` property of the `BpmnFlowShape` should be set to one of the message types. The available message flow types are: -* InitiatingMessageFlow: An activity or event in one pool can initiate a message to another pool. -* NonInitiatingMessageFlow: An activity or event in one pool cannot initiate a message to another pool. -* MessageFlow: A MessageFlow shows the flow of messages between two participants and is represented by line. +* **InitiatingMessageFlow**: An activity or event in one pool can initiate a message to another pool. +* **NonInitiatingMessageFlow**: An activity or event in one pool cannot initiate a message to another pool. +* **MessageFlow**: A MessageFlow shows the flow of messages between two participants and is represented by line. The following code example explains how to define a message flow. diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-object.md b/blazor/diagram/bpmn-shapes/bpmn-data-object.md index c4ef6c2c6e..d017e24e58 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-object.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-object.md @@ -9,7 +9,7 @@ documentation: ug # BPMN Data Object in Diagram Component -A `BPMN 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 [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), and the [DataObjectType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_DataObjectType) property defines whether data is an input or output. You can indicate the collection of data object by setting the [IsCollectiveData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_IsCollectiveData) property of [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html) as **True.** +A `BPMN 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 [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), and the [DataObjectType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_DataObjectType) property defines whether data is an input or output. You can indicate the collection of data object by setting the [IsCollectiveData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_IsCollectiveData) property of `BpmnDataObject` as **True.** ```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 a63567cb55..0abab2a75d 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 DataStore 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 source. +A `DataStore` 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. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-event.md b/blazor/diagram/bpmn-shapes/bpmn-event.md index 6dfa0d17ef..b0a094e042 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-event.md +++ b/blazor/diagram/bpmn-shapes/bpmn-event.md @@ -11,9 +11,9 @@ documentation: ug An [Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEvent.html) is a common BPMN process model element that represents something that happens during a business process and is notated with a circle. The type of events are as follows: -* Start - Indicates the beginning of the process and every business process start with an event. -* Intermediate - Indicates the middle of the process. -* End - Indicates the end of the process, and every business process ends with an event. +* **Start** - Indicates the beginning of the process and every business process start with an event. +* **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. diff --git a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md index 9b76b67a25..cfdb746466 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md +++ b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md @@ -55,7 +55,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## How to Add BPMN Nodes into a BPMN Expanded Sub-Process -To add a BpmnNode into [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), define the BpmnNodeViewModel object and add it to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Children) collection of the [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html). +To add a Bpmn node into [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), define the BpmnNodeViewModel object and add it to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Children) collection of the `BpmnExpandedSubProcess`. The following code example explains how to add a BPMN node to an BPMN Expanded Sub-Process using the `Children` property. @@ -121,8 +121,8 @@ 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) component defines the type of loop behavior for a task that is internally repeated. By default, the Loop property is set to [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None). - The Loop property can be configured within the BpmnExpandedSubProcess component, as demonstrated in the following example. + 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None). + The Loop property can be configured within the `BpmnExpandedSubProcess` component, as demonstrated in the following example. ```cshtml @using Syncfusion.Blazor.Diagram @@ -176,7 +176,7 @@ The following table describes the available loop types for an Expanded Sub-Proce ### How to Enable Compensation -[IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsCompensation) is triggered when the operation is partially failed and can be enabled with the [IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsCompensation) property of the [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html). By default, the [IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsCompensation) is set to false. +[IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsCompensation) is triggered when the operation is partially failed and can be enabled with the `IsCompensation` property of the `BpmnExpandedSubProcess`. By default, the `IsCompensation` is set to **false**. ```cshtml @using Syncfusion.Blazor.Diagram @@ -221,7 +221,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Enable Ad-Hoc -An `Ad-Hoc` Expanded Sub-Process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and can be set with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsAdhoc) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html). +An `Ad-Hoc` Expanded Sub-Process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and can be set with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsAdhoc) property of `BpmnExpandedSubProcess`. ```cshtml @using Syncfusion.Blazor.Diagram @@ -266,7 +266,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Set Sub-Process Type -The `SubProcessType` represents the type of task being processed within a BPMN expanded subprocess. The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_SubProcessType) property of the [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) component allows specification of the subprocess type. By default, it is set to [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Default). +The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_SubProcessType) represents the type of task being processed within a BPMN expanded subprocess. The `SubProcessType` property of the `BpmnExpandedSubProcess` component allows specification of the subprocess type. By default, it is set to [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Default). ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-gateway.md b/blazor/diagram/bpmn-shapes/bpmn-gateway.md index 1dd2cb098d..b8e7fa346e 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 `BPMN Gateway` 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) can be set with any of the appropriate gateways. By default, the value of [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_None). The following code example explains how to create a BPMN Gateway. +A `BPMN Gateway` 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) can be set with any of the appropriate gateways. By default, the value of `GatewayType` is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_None). The following code example explains how to create a BPMN Gateway. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 98411851e3..006b540eaa 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -11,7 +11,7 @@ documentation: ug * A BPMN object can be associated with a text annotation that does not affect the flow but provides information about objects within a flow. -* A TextAnnotation points to or references another BPMN shape, which we call the [TextAnnotationTarget](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationTarget) of the TextAnnotation. When a target shape is moved, copied, or deleted, any TextAnnotations attached to the shape will be moved, copied, or deleted too. Thus, the TextAnnotations remain with their target shapes though you can reposition the TextAnnotation to any offset from its target. The [TextAnnotationTarget](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationTarget) property of the [BpmnTextAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html) is used to connect an annotation element to the BPMN Node. +* A TextAnnotation points to or references another BPMN shape, which we call the [TextAnnotationTarget](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationTarget) of the TextAnnotation. When a target shape is moved, copied, or deleted, any TextAnnotations attached to the shape will be moved, copied, or deleted too. Thus, the TextAnnotations remain with their target shapes though you can reposition the TextAnnotation to any offset from its target. The `TextAnnotationTarget` property of the [BpmnTextAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html) is used to connect an annotation element to the BPMN Node. * The annotation element can be switched from a BPMN node to another BPMN node simply by dragging the source end of the annotation connector into the other BPMN node. @@ -19,7 +19,7 @@ documentation: ug * The [TextAnnotationDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationDirection) property is used to set the shape direction of the text annotation. -* By default, the [TextAnnotationDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationDirection) is set to a [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextAnnotationDirection.html#Syncfusion_Blazor_Diagram_TextAnnotationDirection_Left). +* By default, the `TextAnnotationDirection` is set to a [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextAnnotationDirection.html#Syncfusion_Blazor_Diagram_TextAnnotationDirection_Left). * To set the size for text annotation, use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Height) properties of the node. From d61302d239899358622270b992b05486b5fbf670 Mon Sep 17 00:00:00 2001 From: Ramya Date: Fri, 10 Oct 2025 17:34:30 +0530 Subject: [PATCH 13/18] Revamping the Ug --- blazor/diagram/annotations/labels.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md | 4 ++-- blazor/diagram/bpmn-shapes/bpmn-gateway.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-text-annotation.md | 8 ++++---- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/blazor/diagram/annotations/labels.md b/blazor/diagram/annotations/labels.md index e34685446f..bea1f635a3 100644 --- a/blazor/diagram/annotations/labels.md +++ b/blazor/diagram/annotations/labels.md @@ -82,7 +82,7 @@ N>* Each annotation's [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz ## How to Add an Annotation at Runtime -An annotation can be added to the Annotations collection of a node or connector at runtime by using the `Add` methods. +An annotation can be added to the `Annotations` collection of a node or connector at runtime by using the `Add` method. The following code explains how to add an annotation to a node at runtime by using `Add` method. @@ -146,7 +146,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## How to Remove an Annotation at Runtime -An annotation can be removed from a node or connector's Annotations collection by using the `RemoveAt` method. The following code explains how to remove an annotation from a node. +An annotation can be removed from a node or connector's `Annotations` collection by using the `RemoveAt` method. The following code explains how to remove an annotation from a node. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md index cfdb746466..2768ed8de5 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md +++ b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md @@ -55,7 +55,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## How to Add BPMN Nodes into a BPMN Expanded Sub-Process -To add a Bpmn node into [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), define the BpmnNodeViewModel object and add it to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Children) collection of the `BpmnExpandedSubProcess`. +To add a BPMN node into [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), define the BpmnNodeViewModel object and add it to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Children) collection of the `BpmnExpandedSubProcess`. The following code example explains how to add a BPMN node to an BPMN Expanded Sub-Process using the `Children` property. @@ -266,7 +266,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Set Sub-Process Type -The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_SubProcessType) represents the type of task being processed within a BPMN expanded subprocess. The `SubProcessType` property of the `BpmnExpandedSubProcess` component allows specification of the subprocess type. By default, it is set to [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Default). +The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_SubProcessType) represents the type of task being processed within a BPMN expanded subprocess. The `SubProcessType` property of the `BpmnExpandedSubProcess` component allows specification of the subprocess type. By default, it is set to **Default**. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-gateway.md b/blazor/diagram/bpmn-shapes/bpmn-gateway.md index b8e7fa346e..65136e964c 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 `BPMN Gateway` 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) can be set with any of the appropriate gateways. By default, the value of `GatewayType` is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_None). The following code example explains how to create a BPMN Gateway. +A `BPMNGateway` 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) 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/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 006b540eaa..573a53aa4e 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -11,15 +11,15 @@ documentation: ug * A BPMN object can be associated with a text annotation that does not affect the flow but provides information about objects within a flow. -* A TextAnnotation points to or references another BPMN shape, which we call the [TextAnnotationTarget](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationTarget) of the TextAnnotation. When a target shape is moved, copied, or deleted, any TextAnnotations attached to the shape will be moved, copied, or deleted too. Thus, the TextAnnotations remain with their target shapes though you can reposition the TextAnnotation to any offset from its target. The `TextAnnotationTarget` property of the [BpmnTextAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html) is used to connect an annotation element to the BPMN Node. +* A BPMNTextAnnotation points to or references another BPMN shape, which we call the [TextAnnotationTarget](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationTarget) of the BPMNTextAnnotation. When a target shape is moved, copied, or deleted, any BPMNTextAnnotation attached to the shape will be moved, copied, or deleted too. Thus, the BPMNTextAnnotations remain with their target shapes though you can reposition the BPMNTextAnnotation to any offset from its target. The `TextAnnotationTarget` property of the [BpmnTextAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html) is used to connect an annotation element to the BPMN Node. * The annotation element can be switched from a BPMN node to another BPMN node simply by dragging the source end of the annotation connector into the other BPMN node. -* By default, the `TextAnnotation` shape has a connection. +* By default, the `BPMNTextAnnotation` shape has a connection. * The [TextAnnotationDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationDirection) property is used to set the shape direction of the text annotation. -* By default, the `TextAnnotationDirection` is set to a [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextAnnotationDirection.html#Syncfusion_Blazor_Diagram_TextAnnotationDirection_Left). +* By default, the `TextAnnotationDirection` is set to a **Left**. * To set the size for text annotation, use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Height) properties of the node. @@ -142,7 +142,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ![Auto BPMN Shape](../images/bpmn-text-annotation_WithTarget.png) -## How to Connect a Text Annotation to a BPMN Node +## How to Connect a BPMN Text Annotation to a BPMN Node Drag and drop any bpmn shapes from the palette to the diagram and connect the BPMN Node and TextAnnotation. From cd2c9be0b5eca8fbc64a2fa0f0710d9d1e4cbc4f Mon Sep 17 00:00:00 2001 From: Ramya Date: Fri, 10 Oct 2025 19:37:18 +0530 Subject: [PATCH 14/18] Revamping the Ug --- blazor/diagram/annotations/appearance.md | 6 +- .../annotations/connector-annotation.md | 4 +- blazor/diagram/annotations/interactions.md | 4 +- blazor/diagram/annotations/node-annotation.md | 6 +- blazor/diagram/bpmn-shapes/bpmn-activity.md | 71 +++++++------------ blazor/diagram/bpmn-shapes/bpmn-connectors.md | 4 +- .../bpmn-shapes/bpmn-expanded-sub-process.md | 4 +- 7 files changed, 41 insertions(+), 58 deletions(-) diff --git a/blazor/diagram/annotations/appearance.md b/blazor/diagram/annotations/appearance.md index d0f34cf281..24f1c833d6 100644 --- a/blazor/diagram/annotations/appearance.md +++ b/blazor/diagram/annotations/appearance.md @@ -413,7 +413,7 @@ Double-clicking an annotation enables edit mode. For a object with multiple anno ## How to Set Read-Only Mode for Annotations -Annotations can be set to read-only mode by configuring their Constraints. Setting the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_ReadOnly) constraints prevents user interaction and modification. The following code explains how to enable read-only mode. +Annotations can be set to read-only mode by configuring their [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Constraints). Setting the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_ReadOnly) constraints prevents user interaction and modification. The following code explains how to enable read-only mode. ```cshtml @using Syncfusion.Blazor.Diagram @@ -556,13 +556,13 @@ N>* Type of the annotation’s property of the node or connector is ObservableCo | [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_None) | Disables all behaviors of Annotation. | |[InheritReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_InheritReadOnly) |Enables or disables to inherit the ReadOnly option from the parent object.| -N> The default value for an annotation's Constraints property is [InheritReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_InheritReadOnly). +N> The default value for an annotation's Constraints property is **InheritReadOnly**. Refer to [Constraints](https://blazor.syncfusion.com/documentation/diagram/constraints) to learn more about how to enable or disable the annotation constraints. ## How to Define Templates in Annotations -The Diagram component supports templating for annotations. HTML content can be defined within the `DiagramTemplates` tag and linked to an annotation by setting the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property to **true**. To define separate templates for individual annotations, use the ID property to differentiate them. +The Diagram component supports templating for annotations. HTML content can be defined within the `DiagramTemplates` tag and linked to an annotation by setting the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property to **true**. To define separate templates for individual annotations, use the `ID` property to differentiate them. The following code illustrates how to define a template for both a node's and a connector's annotation. ```cshtml diff --git a/blazor/diagram/annotations/connector-annotation.md b/blazor/diagram/annotations/connector-annotation.md index 4f374b1fe0..a974684ff0 100644 --- a/blazor/diagram/annotations/connector-annotation.md +++ b/blazor/diagram/annotations/connector-annotation.md @@ -77,7 +77,7 @@ The following image shows the relationship between the annotation position and o ![Displaying Annotation based on Offset in Blazor Diagram](../images/blazor-diagram-annotation-basedon-offset.png) >**Note:** -> * By default, the Offset value of a connector annotation is 0.5. +> * By default, the `offset` value of a connector annotation is 0.5. > * An annotation's ID must not start with a number or special character and must not contain underscores(_) or spaces. ## How to Change Annotation Alignment @@ -228,7 +228,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn | True | ![Blazor Diagram Annotation in Vertical Position](../images/blazor-diagram-annotation-in-vertical-position.png) | | False | ![Blazor Diagram Annotation in Horizontal Position](../images/blazor-diagram-annotation-in-horizontal-position.png) | -N> By default, the `SegmentAngle` property is disabled (false). +N> By default, the `SegmentAngle` property is **false**. The `HorizontalAlignment`, `VerticalAlignment` and `Margin` properties were explained in the [NodeAnnotation](./node-annotation). diff --git a/blazor/diagram/annotations/interactions.md b/blazor/diagram/annotations/interactions.md index 3b80687aac..819909b43a 100644 --- a/blazor/diagram/annotations/interactions.md +++ b/blazor/diagram/annotations/interactions.md @@ -71,8 +71,8 @@ The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. Value | Description | Image | | -------- | -------- | -------- | -| Page | When this option is set, the annotation remains fixed in its original orientation even if its parent node is rotated. | ![Blazor Diagram RotationReference page](../images/rotationReferencePage.gif) | -| Parent | When this option is set, the annotation rotates along with its parent node. | ![Blazor Diagram RotationReference Parent](../images/rotationReferenceParent.gif) | +| **Page** | When this option is set, the annotation remains fixed in its original orientation even if its parent node is rotated. | ![Blazor Diagram RotationReference page](../images/rotationReferencePage.gif) | +| **Parent** | When this option is set, the annotation rotates along with its parent node. | ![Blazor Diagram RotationReference Parent](../images/rotationReferenceParent.gif) | A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Interactions/RotationReference) diff --git a/blazor/diagram/annotations/node-annotation.md b/blazor/diagram/annotations/node-annotation.md index ee16f73522..711045f60f 100644 --- a/blazor/diagram/annotations/node-annotation.md +++ b/blazor/diagram/annotations/node-annotation.md @@ -9,7 +9,7 @@ documentation: ug # Node Annotation Position in Blazor Diagram Component -The diagram allows you to customize the position and appearance of the annotation efficiently. Annotations can be aligned relative to the node boundaries. It has Margin, Offset, Horizontal, and Vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignments properties of the [ShapeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html) class. +The diagram allows you to customize the position and appearance of the annotation efficiently. Annotations can be aligned relative to the node boundaries. It has margin, offset, horizontal, and vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignments properties of the [ShapeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html) class. Annotations of a node can be positioned using the following properties of `ShapeAnnotation`. @@ -78,7 +78,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn >**Note:** > * Type of the offset property for node’s shape annotation is [DiagramPoint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramPoint.html). -> * Type of the offset property for a connector’s path annotation is **double**. +> * Type of the offset property for a connector’s path annotation is double. > * Node annotation's Id should not start with numbers or special characters and should not contain special characters such as underscores(_) or spaces. ## How to Change the Annotation Alignment @@ -195,7 +195,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## How to Align the Text -The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextAlign) property of an annotation's Style allows you to set how the text should be aligned (Left, Right, Center, or Justify) inside the text block. The following code explains how to set `TextAlign` for an annotation. +The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextAlign) property of an annotation's style allows you to set how the text should be aligned (Left, Right, Center, or Justify) inside the text block. The following code explains how to set `TextAlign` for an annotation. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index 28a8020ee3..500c4c4b87 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -1,20 +1,20 @@ --- layout: post -title: BPMN Activity in Syncfusion Blazor Diagram Component | Syncfusion +title: BPMN Activity in Blazor Diagram Component | Syncfusion description: Learn here all about BPMN activity such as task, sub-process in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Activity in Diagram Component +# BPMN Activity in Blazor Diagram Component The [Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) is the task that is performed in a business process. It is represented by a rounded rectangle. -There are two primary types of activities. They are listed as follows: +There are two types of activities. They are listed as follows: * [Task](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_Task): It occurs within a process and is not broken down to a finer level of detail. -* [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess): It occurs within a process and is broken down to a finer level of detail. +* [CollapsedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess): It occurs within a process and is broken down to a finer level of detail. You can specify the any one of the above activity type using the [ActivityType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_ActivityType) property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). @@ -52,17 +52,13 @@ You can specify the any one of the above activity type using the [ActivityType]( } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrIsXNHrvVrSjlR?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/BpmnEditor/BpmnActivity/BpmnActivity) +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivity) ![Send Task BPMN Shape](../images/Task.png) ## 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 specification of the task type, such as sending, receiving, or user-based tasks. By default, the TaskType property is set to **None**, which is visually represented by a small event symbol in the top corner of the activity shape. - -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](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. ```cshtml @using Syncfusion.Blazor.Diagram @@ -73,11 +69,11 @@ The following code explains how to create different types of BPMN tasks. @code { // Initialize the node collection with node. - DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramObjectCollection nodes; protected override void OnInitialized() { - Node node = new Node() + nodes = new DiagramObjectCollection(); { // Position of the node. OffsetX = 100, @@ -99,14 +95,12 @@ The following code explains how to create different types of BPMN tasks. } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLeCtDxBvEwTETe?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/BpmnEditor/BpmnActivity/BpmnActivityTask) +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivityTask) ![Send Task BPMN Shape](../images/Send.png) -The available BPMN task types are described below. +The various types of BPMN tasks are tabulated as follows. | Shape | Image | Description| | -------- | -------- | -------- | @@ -121,7 +115,7 @@ The available BPMN task types are described below. ## How to Create a BPMN Activity Collapsed Sub-Process -A [Collapsed Sub-Process](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 `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). ```cshtml @using Syncfusion.Blazor.Diagram @@ -158,16 +152,14 @@ A [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhoCNjHLuiTiOoy?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/BpmnEditor/BpmnActivity/BpmnActivityCollapsedSubProcess) +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivityCollapsedSubProcess) ![Collapsed Subprocess BPMN Shape](../images/Bpmn-CollapsedSub-Process-Loop-None.png) ### 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` property of `Bpmn Activity` allows you to define the type of loop. The default value for `Loop` is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_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](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**. You can define the `Loop` property in BPMN Activity, as shown in the following code. @@ -206,14 +198,12 @@ You can define the `Loop` property in BPMN Activity, as shown in the following c } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhSCZDxBkiYnGrJ?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/BpmnEditor/BpmnActivity/Loop) +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Loop) ![Standard Task BPMN Shape](../images/Bpmn-Task-Loop-Standard.png) -The available loop types are described below. +The following table contains various types of BPMN loops. | LoopActivity | Task | Subprocess | Description| | -------- | -------- | --------| --------| @@ -224,7 +214,7 @@ The available loop types are described below. ### 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` property of the `Bpmn Activity`. By default, the `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](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. ```cshtml @using Syncfusion.Blazor.Diagram @@ -258,22 +248,20 @@ The available loop types are described below. IsCompensation = true, } }; - nodes.Add(node); + nodes.Add(node1); } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLoWZtRLYBpywwx?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/BpmnEditor/BpmnActivity/Compensation) +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Compensation) ![IsCompensationActivity Task BPMN Shape](../images/Bpmn-Task-Compensation.png) ### How to Enable Call -A [Call](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) 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`. +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` property is **false**. +N>* By default, the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_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 @@ -312,18 +300,16 @@ N>* By default, the `IsCall` property is **false**. } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDByWDNnVYBkymiU?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/BpmnEditor/BpmnActivity/Call) +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Call) ![IsAdHocActivity CollapsedSub-Process BPMN Shape](../images/Bpmn-Task-Call.png) ### How to Enable Ad-Hoc -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`. +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` property is **false**. +N>* By default, the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_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 @@ -361,15 +347,14 @@ N>* By default, the `IsAdhoc` property is **false**. } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrosNXRhkKyQthF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Adhoc) -A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Adhoc) ![IsAdHocActivity CollapsedSub-Process BPMN Shape](../images/Bpmn-CollapsedSub-Process-AdHocpng.png) ### How to Set Sub-Process Type -The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_SubProcessType) property represents the type of task being processed within a BPMN subprocess. The `SubProcessType` property of the subprocess allows specification of the subprocess type. By default, it is set to **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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Default). ```cshtml @using Syncfusion.Blazor.Diagram @@ -406,13 +391,11 @@ The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dia } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhSCZXxLkpZmobl?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/BpmnEditor/BpmnActivity/SubProcessType) +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/SubProcessType) ![Event Boundary BPMN Shape](../images/Bpmn-CollapsedSub-Process-Event.png) -The available sub-process types are described below. +The following table contains various types of BPMN boundaries. | SubProcessType | Image | Description| | -------- | -------- | -------- | diff --git a/blazor/diagram/bpmn-shapes/bpmn-connectors.md b/blazor/diagram/bpmn-shapes/bpmn-connectors.md index 020092fab5..b4dc525754 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-connectors.md +++ b/blazor/diagram/bpmn-shapes/bpmn-connectors.md @@ -18,8 +18,8 @@ They are primarily classified into three categories: ## How to Create an Association -An `BPMN Association` flow is used to link flow objects with their corresponding text or artifact. It is represented as a dotted graphical line with an opened arrow. -To create an Association, set the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to one of the association types. +An BPMN `AssociationFlow` is used to link flow objects with their corresponding text or artifact. It is represented as a dotted graphical line with an opened arrow. +To create an association, set the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to one of the association types. The available association types are: diff --git a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md index 2768ed8de5..970692114e 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 `BPMN Expanded Sub-Process` 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` 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 allow drop property of the node. +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. The following code example explains how to create a BPMN Expanded Sub-Process. From 43b255f5beb53ea1955a6d3948a7cfcc69c36158 Mon Sep 17 00:00:00 2001 From: Ramya Date: Fri, 10 Oct 2025 20:22:16 +0530 Subject: [PATCH 15/18] Revamping the Ug --- blazor/diagram/bpmn-shapes/bpmn-activity.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index 500c4c4b87..2bb50c0f3b 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Activity in Blazor Diagram Component | Syncfusion -description: Learn here all about BPMN activity such as task, sub-process in Syncfusion Blazor Diagram component and more. +title: BPMN Activity in Syncfusion Blazor Diagram Component | Syncfusion +description: Learn here all about BPMN activity such as task, sub-process in Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Activity in Blazor Diagram Component +# BPMN Activity in Diagram Component The [Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) is the task that is performed in a business process. It is represented by a rounded rectangle. From abb52b56b9d495965042b88dfcd6d5e3e273ff37 Mon Sep 17 00:00:00 2001 From: Ramya Date: Fri, 10 Oct 2025 20:51:17 +0530 Subject: [PATCH 16/18] Revamping the Ug --- blazor/diagram/bpmn-shapes/bpmn-activity.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index 2bb50c0f3b..499069bb25 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -1,7 +1,7 @@ --- layout: post title: BPMN Activity in Syncfusion Blazor Diagram Component | Syncfusion -description: Learn here all about BPMN activity such as task, sub-process in Blazor Diagram component and more. +description: Learn here all about BPMN activity such as task, sub-process in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug From 33957861b87f52cf723724e3d19390468a03cc6b Mon Sep 17 00:00:00 2001 From: SuganthiK963 <69144533+SuganthiK963@users.noreply.github.com> Date: Sat, 11 Oct 2025 14:35:43 +0530 Subject: [PATCH 17/18] Revamping the Ug --- blazor/diagram/bpmn-shapes/bpmn-data-object.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-object.md b/blazor/diagram/bpmn-shapes/bpmn-data-object.md index d017e24e58..c57cb5258f 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-object.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-object.md @@ -9,7 +9,7 @@ documentation: ug # BPMN Data Object in Diagram Component -A `BPMN 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 [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), and the [DataObjectType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_DataObjectType) property defines whether data is an input or output. You can indicate the collection of data object by setting the [IsCollectiveData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_IsCollectiveData) property of `BpmnDataObject` as **True.** +A [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html) 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 [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as `BpmnDataObject`, and the [DataObjectType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_DataObjectType) property defines whether data is an input or output. You can indicate the collection of data object by setting the [IsCollectiveData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_IsCollectiveData) property of `BpmnDataObject` as **True.** ```cshtml @using Syncfusion.Blazor.Diagram From 245a8f064ac77f9a8f6757f2fb0f3c41e8b7ead7 Mon Sep 17 00:00:00 2001 From: Ramya Date: Mon, 13 Oct 2025 19:18:32 +0530 Subject: [PATCH 18/18] Revamping the Ug --- blazor/diagram/bpmn-shapes/bpmn-data-store.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md | 8 ++++---- blazor/diagram/bpmn-shapes/bpmn-gateway.md | 2 +- blazor/diagram/bpmn-shapes/bpmn-text-annotation.md | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-store.md b/blazor/diagram/bpmn-shapes/bpmn-data-store.md index 0abab2a75d..514f4a688f 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 `DataStore` 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-expanded-sub-process.md b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md index 970692114e..40ffc61c14 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md +++ b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md @@ -55,7 +55,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## How to Add BPMN Nodes into a BPMN Expanded Sub-Process -To add a BPMN node into [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), define the BpmnNodeViewModel object and add it to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Children) collection of the `BpmnExpandedSubProcess`. +To add a BPMN node into [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), define the BPMN node object and add it to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Children) collection of the `BpmnExpandedSubProcess`. The following code example explains how to add a BPMN node to an BPMN Expanded Sub-Process using the `Children` property. @@ -121,8 +121,8 @@ 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None). - The Loop property can be configured within the `BpmnExpandedSubProcess` component, as demonstrated in the following example. + 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 @using Syncfusion.Blazor.Diagram @@ -221,7 +221,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Enable Ad-Hoc -An `Ad-Hoc` Expanded Sub-Process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and can be set with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsAdhoc) property of `BpmnExpandedSubProcess`. +An Ad-Hoc Expanded Sub-Process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and can be set with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsAdhoc) property of `BpmnExpandedSubProcess`. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/bpmn-shapes/bpmn-gateway.md b/blazor/diagram/bpmn-shapes/bpmn-gateway.md index 65136e964c..9c6867d3a1 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` 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) 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/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 573a53aa4e..05ab547859 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -11,7 +11,7 @@ documentation: ug * A BPMN object can be associated with a text annotation that does not affect the flow but provides information about objects within a flow. -* A BPMNTextAnnotation points to or references another BPMN shape, which we call the [TextAnnotationTarget](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationTarget) of the BPMNTextAnnotation. When a target shape is moved, copied, or deleted, any BPMNTextAnnotation attached to the shape will be moved, copied, or deleted too. Thus, the BPMNTextAnnotations remain with their target shapes though you can reposition the BPMNTextAnnotation to any offset from its target. The `TextAnnotationTarget` property of the [BpmnTextAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html) is used to connect an annotation element to the BPMN Node. +* A [BpmnTextAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html) points to or references another BPMN shape, which we call the [TextAnnotationTarget](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationTarget) of the `BPMNTextAnnotation`. When a target shape is moved, copied, or deleted, any `BPMNTextAnnotation` attached to the shape will be moved, copied, or deleted too. Thus, the `BPMNTextAnnotation` remain with their target shapes though you can reposition the `BPMNTextAnnotation` to any offset from its target. The `TextAnnotationTarget` property of the `BpmnTextAnnotation` is used to connect an annotation element to the BPMN Node. * The annotation element can be switched from a BPMN node to another BPMN node simply by dragging the source end of the annotation connector into the other BPMN node.