Create a Diagram Component in a Blazor Server Application

Learn how easily you can create and configure the Blazor Diagram component provided by Syncfusion.
This video explains how to create a Blazor application and add the Syncfusion Blazor package. Then you’ll see how to add the Syncfusion Blazor Diagram component to the Blazor server application. Finally, it shows you how to create a simple flowchart using nodes and connectors.
[00:26] Set up Blazor environment
[01:27] Install Syncfusion Blazor assemblies
[03:05] Add Syncfusion Blazor Diagram
[03:42] Create default nodes and connectors
[05:57] Create nodes
[08:52] Create connectors
[10:42] Add segments
Example Project: bit.ly/3eF4o37
BLAZOR DIAGRAM
----------------------------
Product overview: bit.ly/3bCgat2
Examples: bit.ly/3cKEAkq
Documentation: bit.ly/2xW58jN
Download free trial: bit.ly/2xSy4co
NuGet package: bit.ly/2V08Znu
SUBSCRIBE
---------------
Syncfusion on RUclips: bit.ly/syncfusi...
Sign up to receive email updates: bit.ly/syncfusi...
SOCIAL COMMUNITY
-----------------------------
Facebook: / syncfusion
Twitter: / syncfusion
LinkedIn: / syncfusion
#blazordiagram #diagram #blazorcomponent

[@SyncfusionInc]

If you are working with 20.1 or later versions of the Syncfusion Blazor NuGet packages - blazor.syncfusion.com/documentation/release-notes/20.1.47?type=all#breaking-changes, we request you to ensure the following 3 steps in your projects-
1. Manually add the script reference under the section of ~/index.html or ~/Pages/_Host.cshtml files. Read More: blazor.syncfusion.com/documentation/common/adding-script-references
2. Syncfusion.Blazor.Themes is removed from dependencies of Syncfusion.Blazor.Core. So, if you are looking to refer themes from static web assets, ensure to install Syncfusion.Blazor.Themes NuGet package explicitly into your project. Check out how to manually add the style reference, blazor.syncfusion.com/documentation/appearance/themes#static-web-assets
3. While registering Syncfusion Blazor Service in the ~/Program.cs file, you would have set IgnoreScriptIsolation property as true to load the scripts externally. From 2022 Vol-1 (20.1.*) versions, the default value of IgnoreScriptIsolation is changed to true and marked as obsolete, so it is not necessary to set this property explicitly in your projects. Read More: blazor.syncfusion.com/documentation/common/adding-script-references#disable-javascript-isolation

[@chrisnurse6430]

This is great! Thank you for the community license too!

[@SyncfusionInc]

Hello Chris, we're happy to hear it's helpful to you!

[@artdove5556]

Thank you! A quick question. Can these elements be made clickable? For example, can user choose/click a node or branch and submit it the server?

[@SyncfusionInc]

Please refer to this sample link to know how to save the diagram using SaveDiagram API, it will return a JSON and we can send it to the server and loadDiagram API is a user to render the saved diagram. The diagram nods and connectors are clickable and draggable by default.
Sample link: www.syncfusion.com/downloads/support/directtrac/general/ze/Index-2084583973.zip
Documentation Link: blazor.syncfusion.com/documentation/diagram/methods/#save-and-load-the-diagram

[@mayankmakwana786]

Hello, just a quick question, can I create the diagram only read-only, so user can only see the diagram but can't interact with it.

[@SyncfusionInc]

Hello Mayank,
Thank you for reaching out to us. You need to set DiagramConstraints as None to disable interaction in the diagram. Please find the help documentation below.
blazor.syncfusion.com/documentation/diagram/constraints#diagram-constraints