Build and troubleshoot Syncfusion Blazor diagrams using SfDiagramComponent. Trigger for flowcharts, org charts, mind maps, BPMN, UML sequence, swimlanes, symbol palettes, nodes/connectors/ports/annotations, layouts, data binding, serialization (load/save), export/print, and collaborative editing questions. Provide Blazor + Syncfusion setup steps, configuration patterns, and sample snippets.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
The command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
File Explorer
22 files
Showing SKILL.md
SKILL.md
Source instructions · Read-only preview
name
syncfusion-blazor-diagram
description
Build and troubleshoot Syncfusion Blazor diagrams using SfDiagramComponent. Trigger for flowcharts, org charts, mind maps, BPMN, UML sequence, swimlanes, symbol palettes, nodes/connectors/ports/annotations, layouts, data binding, serialization (load/save), export/print, and collaborative editing questions. Provide Blazor + Syncfusion setup steps, configuration patterns, and sample snippets.
A comprehensive skill for building interactive diagrams with the Syncfusion Blazor Diagram component — flowcharts, organizational charts, mind maps, BPMN process diagrams, UML sequence diagrams, network diagrams, and more.
When to Use This Skill
Use this skill when you need to:
Create flowcharts, org charts, mind maps, or network diagrams in Blazor
Work with SfDiagramComponent, nodes, connectors, or shapes
Configure automatic layouts (hierarchical, radial, mind map, org chart, flowchart)
Implement BPMN process diagrams with BPMN shapes
Build swimlane diagrams for process modeling
Add symbol palettes for drag-and-drop diagram building
Bind diagram data from a collection or remote source
API Verification Required: Always verify API class names, properties, and signatures by reading reference files () BEFORE generating code examples. Do not assume or infer class names.
⚠️ Before writing ANY code, review the section directly below to avoid known invalid APIs and properties.
references/*.md
Common Mistakes
Quick Start
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Width="100%" Height="600px" Nodes="@nodes" Connectors="@connectors" />
@code {
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>
{
new Node
{
ID = "node1", OffsetX = 150, OffsetY = 150,
Width = 100, Height = 50,
Style = new ShapeStyle { Fill = "#6BA5D7", StrokeColor = "white" },
Annotations = new DiagramObjectCollection<ShapeAnnotation>
{
new ShapeAnnotation { Content = "Start" }
}
}
};
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>
{
new Connector { ID = "conn1", SourceID = "node1", TargetID = "node2" }
};
}
⚠️ AllowEditing does NOT exist on ShapeAnnotation or PathAnnotation.
Inline editing is on by default — no property is needed to enable it.
To disable editing, set Constraints = AnnotationConstraints.ReadOnly:
// ❌ Wrong — CS0117: AllowEditing does not existnew ShapeAnnotation { Content = "Label", AllowEditing = false }
// ✅ Correct — use AnnotationConstraints.ReadOnly to disable editingnew ShapeAnnotation { Content = "Label", Constraints = AnnotationConstraints.ReadOnly }
EndUpdateAsync Method
⚠️ Always use EndUpdateAsync() (async) — EndUpdate() (sync, non-async) does NOT exist and will cause a compile error.
Use BeginUpdate()/EndUpdateAsync() when changing multiple properties at once — await is required:
// ❌ Wrong — EndUpdate() does not exist
diagram.BeginUpdate();
// ... changes ...
diagram.EndUpdate();
// ✅ Correct — EndUpdateAsync is async
diagram.BeginUpdate();
// ... changes ...await diagram.EndUpdateAsync();
Click Event
⚠️ ClickEventArgs name collision: If your page also uses @using Syncfusion.Blazor.Navigations (or Buttons), ClickEventArgs becomes ambiguous. Always qualify it:
// ✅ Use the fully qualified type in the handler signatureprivatevoidOnClick(Syncfusion.Blazor.Diagram.ClickEventArgs args) { }
⚠️ args.Count is NOT an int field — it is a method that returns an int.
Do NOT compare it directly with == inline without storing the result first:
// ❌ Wrong — CS0019: Operator '==' cannot be applied to operands of type 'method group' and 'int'if (args.Count == 2)
// ✅ Correct — store result then compareint clickCount = args.Count;
if (clickCount == 2) { /* double-click */ }
SizeChanged Event
⚠️ SizeChangedEventArgs.Element is typed as DiagramSelectionSettings, not Node.
Pattern-matching args.Element is Node n always fails with CS8121.
Cast to DiagramSelectionSettings and read .Nodes[0] to get the resized node:
// ❌ Wrong — CS8121: DiagramSelectionSettings cannot match Nodeif (args.Element is Node n) { }
// ✅ Correct — Element is DiagramSelectionSettingsif (args.Element is DiagramSelectionSettings sel && sel.Nodes.Count > 0)
{
var node = sel.Nodes[0];
double w = args.NewValue.Width;
double h = args.NewValue.Height;
}
⚠️ args.NewValue.Width and args.NewValue.Height are plain double, not double?.
Using ?? on them causes CS0019. Assign them directly:
// ❌ Wrong — CS0019double w = args.NewValue.Width ?? 0;
// ✅ Correctdouble w = args.NewValue.Width;
Selection Changed Event
⚠️ SelectionChangedEventArgs name collision: If your page also uses @using Syncfusion.Blazor.Buttons
(or other Syncfusion packages), SelectionChangedEventArgs becomes ambiguous. Always qualify it:
⚠️ DragStartEventArgs is ambiguous when Syncfusion.Blazor.Popups (or other packages that expose DragStartEventArgs) is also referenced.
Always qualify it as Syncfusion.Blazor.Diagram.DragStartEventArgs:
⚠️ DragEnterEventArgs does NOT exist in Syncfusion.Blazor.Diagram.
There is no DragEnter event on SfDiagramComponent that receives a DragEnterEventArgs.
The available drag events on SfDiagramComponent are: DragStart, Dragging, DragLeave, DragDrop — all for SymbolPalette drag-and-drop only.
For tracking when a node is being moved (internal drag), use PositionChanged:
// ❌ Wrong — DragEnterEventArgs does not existprivatevoidOnDragEnter(DragEnterEventArgs args) { }
// ❌ Wrong — OnPositionChange does not exist on SfDiagramComponent
<SfDiagramComponent OnPositionChange="OnPositionChange" />
// ✅ Correct — use PositionChanged
<SfDiagramComponent PositionChanged="OnPositionChanged" />
privatevoidOnPositionChanged(PositionChangedEventArgs args)
{
if (args.Element is Node n)
Console.WriteLine($"Node {n.ID} moved to ({n.OffsetX}, {n.OffsetY})");
}
Snap Distance
⚠️ SnapObjectDistance does NOT exist on SnapSettings — using it causes InvalidOperationException: does not have a property matching the name 'SnapObjectDistance'.
The correct property name is SnapDistance:
@* ❌ Wrong — SnapObjectDistance does not exist *@
<SnapSettings SnapObjectDistance="5" />
@* ✅ Correct *@
<SnapSettings Constraints="SnapConstraints.SnapToObject" SnapDistance="5" />
Styling
⚠️ CssClass does NOT exist on SfDiagramComponent — using it causes InvalidOperationException: Object of type 'SfDiagramComponent' does not have a property matching the name 'CssClass'.
Wrap the component in a <div> with a scoping class instead:
@* ❌ Wrong — CssClass does not exist on SfDiagramComponent *@
<SfDiagramComponent CssClass="my-diagram" />
@* ✅ Correct — use a wrapper div *@
<div class="my-diagram">
<SfDiagramComponent ... />
</div>
Phase Offset Property
⚠️ Phase.Offset does NOT exist — using it causes a compile error.
Use Phase.Width to set the size of a phase in a swimlane:
// ❌ Wrong — Offset does not exist on Phasenew Phase { ID = "ph1", Offset = 220 }
// ✅ Correct — use Widthnew Phase { ID = "ph1", Width = 220 }
Lane Constraints Property
⚠️ Lane.Constraints does NOT exist and LaneConstraints enum does NOT exist.
Individual lanes cannot have constraints set via a Constraints property.
To restrict swimlane-level interactions, use SwimlaneConstraints on the Swimlane object itself:
// ❌ Wrong — Lane.Constraints and LaneConstraints do not exist
lane.Constraints = LaneConstraints.Default & ~LaneConstraints.ResizeEntries;
// ✅ Correct — set constraints on the Swimlane object
swimlane.Constraints = SwimlaneConstraints.Default & ~SwimlaneConstraints.Interaction;
FitMode.Page Value
⚠️ FitMode.Page does NOT exist — using it causes CS0117.
The correct values for FitMode are FitMode.Width and FitMode.Height:
// ❌ Wrong — FitMode.Page does not existnew FitOptions { Mode = FitMode.Page }
// ✅ Correct — use FitMode.Width or FitMode.Heightnew FitOptions { Mode = FitMode.Width, Region = DiagramRegion.Content }
LoadDiagram Method
⚠️ SfDiagramComponent.LoadDiagram() does NOT exist — using it causes a compile error.
Use the async version LoadDiagramAsync() instead:
// ❌ Wrong — LoadDiagram() does not exist
diagram.LoadDiagram(savedJson);
// ✅ Correct — use LoadDiagramAsyncawait diagram.LoadDiagramAsync(savedJson);
FitToPageAsync Method
⚠️ SfDiagramComponent.FitToPageAsync() does NOT exist — using it causes a compile error.
Use the non-async overload FitToPage() instead:
// ❌ Wrong — FitToPageAsync does not existawait diagram.FitToPageAsync(new FitOptions { Mode = FitMode.Width });
// ✅ Correct — use FitToPage (synchronous)
diagram.FitToPage(new FitOptions { Mode = FitMode.Width, Region = DiagramRegion.Content });
BasicShapes Enum
⚠️ BasicShapes does NOT exist — use NodeBasicShapes instead:
⚠️ DiagramThickness does NOT have a 4-argument constructor — using it causes CS1729: does not contain a constructor that takes 4 arguments.
Use the object initializer syntax with named properties instead:
// ❌ Wrong — CS1729: no 4-argument constructornew DiagramThickness(20, 50, 20, 20)
// ✅ Correct — use object initializer with named propertiesnew DiagramThickness { Left = 20, Top = 50, Right = 20, Bottom = 20 }
// ✅ Correct — set only the sides you neednew DiagramThickness { Top = 50 }
PathAnnotation DragLimit Type
⚠️ PathAnnotation.DragLimit type is DiagramThickness — NOT Margin.
Using new Margin { ... } causes a type mismatch compile error (CS0029).
Always use new DiagramThickness { ... } for DragLimit:
// ❌ Wrong — CS0029: Margin cannot be assigned to DiagramThicknessnew PathAnnotation
{
Constraints = AnnotationConstraints.Interaction,
DragLimit = new Margin { Left = 40, Right = 40, Top = 20, Bottom = 20 }
}
// ✅ Correct — DiagramThickness with object initializernew PathAnnotation
{
Constraints = AnnotationConstraints.Interaction,
DragLimit = new DiagramThickness { Left = 40, Right = 40, Top = 20, Bottom = 20 }
}
ScrollSettings EnableAutoScroll Property
⚠️ CanAutoScroll does NOT exist on ScrollSettings — using it causes InvalidOperationException: does not have a property matching the name 'CanAutoScroll'.
The correct property name is EnableAutoScroll:
@* ❌ Wrong — CanAutoScroll does not exist *@
<ScrollSettings CanAutoScroll="true" />
@* ✅ Correct *@
<ScrollSettings EnableAutoScroll="true" />
Zoom, Undo, and Redo Methods
⚠️ ZoomAsync(), UndoAsync(), and RedoAsync() do NOT exist — using them causes a compile error.
Use the non-async overloads Zoom(), Undo(), and Redo() instead:
// ❌ Wrong — ZoomAsync, UndoAsync, RedoAsync do not existawait _diagram.ZoomAsync(1.2, new DiagramPoint { X = 300, Y = 300 });
await _diagram.UndoAsync();
await _diagram.RedoAsync();
// ✅ Correct — use non-async overloads
_diagram.Zoom(1.2, new DiagramPoint { X = 300, Y = 300 });
_diagram.Undo();
_diagram.Redo();
Overview Component Namespace
⚠️ SfDiagramOverviewComponent requires an additional @using — it lives in Syncfusion.Blazor.Diagram.Overview, NOT in Syncfusion.Blazor.Diagram. Forgetting it causes CS0246:
@* ❌ Wrong — SfDiagramOverviewComponent not found without the Overview namespace *@
@using Syncfusion.Blazor.Diagram
@* ✅ Correct — both namespaces required *@
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Diagram.Overview
⚠️ SourceID must exactly match the ID set on SfDiagramComponent — the ID is NOT auto-generated; you must set it explicitly. A mismatch (including case) renders the overview empty:
@* ❌ Wrong — ID not set on the diagram; SourceID has nothing to link to *@
<SfDiagramComponent Width="100%" Height="500px" Nodes="@_nodes" />
<SfDiagramOverviewComponent SourceID="myDiagram" Height="150px" />
@* ✅ Correct — ID set on diagram, SourceID matches exactly *@
<SfDiagramComponent ID="myDiagram" Width="100%" Height="500px" Nodes="@_nodes" />
<SfDiagramOverviewComponent SourceID="myDiagram" Height="150px" />
⚠️ Do NOT nest SfDiagramOverviewComponent inside SfDiagramComponent — the overview is a sibling component rendered outside the diagram markup.
