Skip to content

Revamping the Ug #6740

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Oct 14, 2025
Merged

Revamping the Ug #6740

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
545e6c4
Revamping the Ug
RamyaSubramaniSF4537 Sep 26, 2025
8775774
Revamping the Ug
RamyaSubramaniSF4537 Sep 26, 2025
93b107e
Revamping the Ug
RamyaSubramaniSF4537 Sep 30, 2025
9571e57
Revamping the Ug
RamyaSubramaniSF4537 Oct 8, 2025
7f0d20d
Revamping the Ug
RamyaSubramaniSF4537 Oct 9, 2025
dabdd85
Revamping the Ug
RamyaSubramaniSF4537 Oct 10, 2025
b77b71f
Revamping the Ug
RamyaSubramaniSF4537 Oct 10, 2025
24456f7
Merge branch 'development' into ES-983512-UG4
RamyaSubramaniSF4537 Oct 10, 2025
005ea14
Revamping the Ug
RamyaSubramaniSF4537 Oct 13, 2025
9e26327
Merge branch 'development' into ES-983512-UG4
SuganthiK963 Oct 13, 2025
02a48df
Merge branch 'development' into ES-983512-UG4
RamyaSubramaniSF4537 Oct 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 27 additions & 13 deletions blazor/diagram/export.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ documentation: ug
---

# Exporting in Blazor Diagram Component
To save and export blazor diagram, refer to the below video link,
To save and export a Blazor Diagram, watch the following video tutorial for a quick walkthrough of key options and workflows.

{% youtube "youtube:https://www.youtube.com/watch?v=2hhl00gMObc" %}

Expand Down Expand Up @@ -47,15 +47,17 @@ Diagram provides support to export the diagram as image or SVG files. The follow
}
}
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/Export)
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVSsXjPKcQBMSRD?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/Export/Export)

## Exporting Options

Diagram provides support to export the desired region of the diagram to the desired formats.

### How to Export Diagram to Different File Formats

[DiagramExportFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramExportFormat.html) specifies the type/format of the exported file. By default, the diagram is exported in .jpeg format. You can export the diagram to the following formats:
[DiagramExportFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramExportFormat.html) specifies the type/format of the exported file. By default, the diagram is exported in .jpeg format. Export the diagram to the following formats:

* JPEG
* PNG
Expand All @@ -81,7 +83,9 @@ Diagram provides support to export the desired region of the diagram to the desi
}
}
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/ExportOption)
{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVICZDlgwcGbHBb?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/Export/ExportOption)

### How to Customize Page Size

Expand Down Expand Up @@ -109,7 +113,9 @@ Diagram provides support to change the page size. The page size can be adjusted
}
}
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/ExportWithPageSize)
{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBesNNFgwFiDfWu?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/Export/ExportWithPageSize)

### How to Add Margin Around Exported Diagram Image

Expand Down Expand Up @@ -141,7 +147,9 @@ 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/Export/ExportMargin)
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNryCjZvAmvTSrzu?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/Export/ExportMargin)

### How to Export Diagrams by Region

Expand Down Expand Up @@ -180,7 +188,9 @@ The following code example illustrates how to export the diagram based on page s
}
}
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/ExportRegion)
{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrSiXtvUwbliLpo?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/Export/ExportRegion)

### How to Export Diagram with Custom Bounds

Expand Down Expand Up @@ -212,7 +222,9 @@ The following code example illustrates how to export the region specified in the
}
}
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/ExportClipBounds)
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZresXjFUwYAvcER?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/Export/ExportClipBounds)

### How to Export Diagram as Single or Multiple Pages

Expand Down Expand Up @@ -251,11 +263,13 @@ The following code example illustrates how to export the diagram to a single pag
}
}
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/ExportWithPage)
{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBoMtjbgwaFojuu?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/Export/ExportWithPage)

### How to Change Orientation at Runtime

Diagram provides support to switch between [Portrait](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PageOrientation.html#Syncfusion_Blazor_Diagram_PageOrientation_Portrait) and [Landscape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PageOrientation.html#Syncfusion_Blazor_Diagram_PageOrientation_Landscape) orientation while exporting. You can change the orientation by setting the [DiagramExportSettings.Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramExportSettings.html#Syncfusion_Blazor_Diagram_DiagramExportSettings_Orientation) Property. The default value is Landscape.
The diagram component supports switching between [Portrait](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PageOrientation.html#Syncfusion_Blazor_Diagram_PageOrientation_Portrait) and [Landscape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PageOrientation.html#Syncfusion_Blazor_Diagram_PageOrientation_Landscape) orientation while exporting. The orientation can be configured by setting the [DiagramExportSettings.Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramExportSettings.html#Syncfusion_Blazor_Diagram_DiagramExportSettings_Orientation) Property. By default, the orientation is set to **Landscape**.

```cshtml
@using Syncfusion.Blazor.Diagram
Expand Down Expand Up @@ -284,11 +298,11 @@ Diagram provides support to switch between [Portrait](https://help.syncfusion.co
}
}
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/ExportOrientation)
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/ExportOrientation)

### How to Export the Diagram as PDF

Diagram does not have built-in support to convert the diagram to a PDF file. However, you can achieve this by exporting the diagram as a base-64 and then converting the exported file to PDF using Syncfusion.PdfExport.PdfDocument. Javascript functions `downloadPdf` and `triggerDownload` are invoked to automatically download the pdf file.
Diagram does not have built-in support to convert the diagram to a PDF file. However, this can be achieved by exporting the diagram as a base64 and then converting the exported file to PDF using Syncfusion.PdfExport.PdfDocument. JavaScript functions `downloadPdf` and `triggerDownload` are invoked to automatically download the pdf file.

The following code illustrates how to export the diagram as PDF file.

Expand Down Expand Up @@ -397,7 +411,7 @@ triggerDownload: function triggerDownload(type, fileName, url)
anchorElement.click();
}
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/ExportToPDF)
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/ExportToPDF)

## See Also

Expand Down
41 changes: 23 additions & 18 deletions blazor/diagram/flip.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,17 @@ documentation: ug

# Flip in Blazor Diagram Component

The diagram component offers functionality to flip nodes, connectors, and groups. Flipping creates a mirror image of the original element, allowing for versatile visual representations within the diagram.
The diagram component supports flipping nodes, connectors, and groups. Flipping creates a mirror image of the original element, allowing for versatile visual representations within the diagram.

## How to Flip the Node or Group

The [Flip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_Flip) command is used to mirror the content and ports of selected objects across either the horizontal, vertical, or both directions on the diagram page. This transformation allows for quick and easy reorientation of diagram elements.
The [Flip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_Flip) command mirrors the content and ports of selected objects across the horizontal axis, vertical axis, or both on the diagram page. This transformation allows for quick and easy reorientation of diagram elements.

**Note:** The Flip command can be applied to both individual nodes and node groups, including their selected child nodes.
**Note:** The `Flip` command applies to both individual nodes and node groups, including their selected child nodes.

### How to Change the Flip Direction

The [FlipDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlipDirection.html) property is used to mirror nodes, groups, or connectors across horizontal, vertical, or both directions. This feature allows you to create symmetrical or reversed representations of diagram elements, enhancing the flexibility and visual appeal of your Blazor diagrams.
The [FlipDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlipDirection.html) property mirrors nodes, groups, or connectors across horizontal, vertical, or both directions. This enables symmetrical or reversed representations of diagram elements, enhancing the flexibility and visual appeal of your Blazor diagrams.

| FlipDirection | Description |
| -------- | -------- |
Expand All @@ -36,15 +36,15 @@ The [FlipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.D
| DiagramFlipMode | Description |
| -------- | -------- |
|[Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html#Syncfusion_Blazor_Diagram_DiagramFlipMode_Content)| Flips the node along with annotations and their text.|
|[Port](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html#Syncfusion_Blazor_Diagram_DiagramFlipMode_Port)| It enables or disables the flip for an object’s port.|
|[Port](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html#Syncfusion_Blazor_Diagram_DiagramFlipMode_Port)| Enables or disables the flip for an object’s port.|
|[All](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html#Syncfusion_Blazor_Diagram_DiagramFlipMode_All)| Enables or disables flip operations for annotations, their text, and ports|
|[Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html#Syncfusion_Blazor_Diagram_DiagramFlipMode_Text)| Flips only the text of annotations, excluding the annotation elements themselves.|
|[Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html#Syncfusion_Blazor_Diagram_DiagramFlipMode_Text)| Flips only the text of annotations, excluding the annotation elements.|
|[PortAndLabelOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html#Syncfusion_Blazor_Diagram_DiagramFlipMode_PortAndLabelOnly)| Flips the node along with ports and annotations, excluding the annotation text.|
|[PortWithLabelText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html#Syncfusion_Blazor_Diagram_DiagramFlipMode_PortWithLabelText)| Flips the node along with ports and annotation text, excluding the annotation elements themselves.|
|[PortWithLabelText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html#Syncfusion_Blazor_Diagram_DiagramFlipMode_PortWithLabelText)| Flips the node along with ports and annotation text, excluding the annotation elements.|
|[LabelOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html#Syncfusion_Blazor_Diagram_DiagramFlipMode_LabelOnly)| Flips the node along with annotations, excluding their text.|


**Note:** The [FlipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html) property is exclusively applicable to nodes within the diagram. It does not affect connectors or any other diagram elements.
**Note:** The [FlipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html) property applies only to nodes. It does not affect connectors or other diagram elements.

The following code example shows how to flip the node.

Expand Down Expand Up @@ -109,7 +109,7 @@ The following code example shows how to flip the node.
ID = "node1",
Width = 100,
Height = 100,
OffsetX = 700,
OffsetX = 200,
OffsetY = 100,
Flip = FlipDirection.Horizontal,
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
Expand Down Expand Up @@ -146,7 +146,7 @@ The following code example shows how to flip the node.
ID = "node2",
Width = 100,
Height = 100,
OffsetX = 900,
OffsetX = 400,
OffsetY = 100,
Flip = FlipDirection.Horizontal,
FlipMode = DiagramFlipMode.Port,
Expand Down Expand Up @@ -218,7 +218,9 @@ The following code example shows how to flip the node.

}
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Flip/FlipDirection)
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrysNtlgEhFRKGy?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/Flip/FlipDirection)


| FlipDirection | DiagramFlipMode | Output|
Expand Down Expand Up @@ -250,7 +252,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync

![Flip](./images/blazor-diagram-flip-node.gif)
## How to flip the Group Node
The flip functionality for a group node works similarly to that of normal nodes. However, when flipping a group node, the flip of its child nodes is combined with the group’s flip. This combination ensures that the child nodes inherit the group’s flip while retaining their own individual flips.
The flip functionality for a group node is similar to that of normal nodes. However, when flipping a group node, the flip of its child nodes is combined with the group’s flip. This combination ensures that the child nodes inherit the group’s flip while retaining their own individual flips.

Example:

Expand All @@ -259,7 +261,7 @@ The flip functionality for a group node works similarly to that of normal nodes.

## How to Change Group Flip Mode

The [FlipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html) of a group node also behave similarly to those of normal nodes. However,When you apply a flip mode to a group node, it takes precedence over any flip mode set on its child nodes, overriding their individual settings.
The [FlipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html) of a group node behaves similarly to that of normal nodes. However,when a flip mode is applied to a group node, it takes precedence over any flip mode set on its child nodes, overriding their individual settings.

For example, in the below code,
the flipMode for the child node `Node1` is set to [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html#Syncfusion_Blazor_Diagram_DiagramFlipMode_Text).
Expand Down Expand Up @@ -331,7 +333,7 @@ The following code example shows how to flip the group.
ID = "node3",
Width = 100,
Height = 60,
OffsetX = 500,
OffsetX = 200,
OffsetY = 300,
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
Expand Down Expand Up @@ -367,7 +369,7 @@ The following code example shows how to flip the group.
ID = "node4",
Width = 100,
Height = 60,
OffsetX = 700,
OffsetX = 400,
OffsetY = 400,
Style = new ShapeStyle()
{
Expand Down Expand Up @@ -463,8 +465,10 @@ The following code example shows how to flip the group.
}
}
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBeiZDvgaptrZdb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

For more information about node interaction, refer to [Node Interaction](./nodes/interaction).
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Flip/FlipGroup)
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Flip/FlipGroup)

| FlipDirection | DiagramFlipMode | Output|
| -------- | -------- |-------- |
Expand All @@ -481,9 +485,9 @@ You can download a complete working sample from [GitHub](https://github.com/Sync

## How to Flip the Connector

The [Flip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_Flip) command is used to mirror selected objects across horizontal, vertical, or both directions on the diagram page. This feature allows for quick and easy creation of symmetrical designs or reversed orientations of diagram elements.
The [Flip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_Flip) command mirrors selected objects across horizontal, vertical, or both directions on the diagram page. This feature allows for quick and easy creation of symmetrical designs or reversed orientations of diagram elements.

**Note:** The [FlipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html) property is applicable only to Nodes and does not affect Connectors. This limitation ensures that connection logic remains intact while allowing individual node elements to be flipped as needed.
**Note:** The [FlipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html) property applies only to nodes and does not affect connectors. This limitation ensures that connection logic remains intact while allowing individual node elements to be flipped as needed.

The following code example shows how to flip the connector.

Expand Down Expand Up @@ -552,6 +556,7 @@ The following code example shows how to flip the connector.
}
}
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhoiDXPgupyReCL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

| FlipDirection | Output|
| -------- | -------- |
Expand Down
Loading