We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Create Project Network Diagram in Blazor Server Application using Blazor.Syncfusion.Diagram



I have a question. Is it possible to create a Project Network Diagram in Blazor Server Application  with data that is taken from Database, using Blazor.Syncfusion.Diagram package? 

Something similar to this example: https://blazor.syncfusion.com/demos/diagram/pert-chart?theme=fluent 

Can you provide an example if such functionality exists.  


Тhank you in advance.

3 Replies 1 reply marked as answer

SU Sumathi Uthayakumar Syncfusion Team January 23, 2023 07:20 AM UTC

Hi Ana-li,

We have prepared a network diagram sample without utilizing the database. In this example, we used an SVG shape to create a diagram. We have shared a sample for your reference, as well as our online demo link: https://blazor.syncfusion.com/demos/diagramcomponent/networkdiagram?theme=fluent

Could you please share what kind of object model is used in data source settings, and what kind of data is getting from the database?

If it is possible to create the diagram based on the information you have provided, we will prepare and share a sample.


Sumathi. U

Attachment: Forum180085_34c66c10.zip

AN Ana-li replied to Sumathi Uthayakumar January 30, 2023 03:03 PM UTC


Thank you for your answer. We want to create network plan, but for project management , something like the network plan on the photo below.

The numbers in the nodes are numbers of positions, these are taken from Position Table from Database, using Foreign Key. Also in the nodes we want to add more attributes like Start Position Date, End Position Date, Position Name, Previous Position, Next Position these are taken from table Network Plan, connected with Position Table using Foreign Key (Guid).

The Network Plan has this attributes :

We want to create network plan using these attributes, taken from database . First we choose Project (using Guid ProjectId), then we create Network Plan  with the attributes above for the Projects with that Id. The nodes are connected with Previous Position and Next Position also Start Position Date and End Position Date.

When the network plan is created ( with nodes connected with connectors ordered by positions), we need to find the critical path (https://asana.com/resources/critical-path-method) .

We are waiting for your response.

Thank you in advance.

SU Sumathi Uthayakumar Syncfusion Team January 31, 2023 03:00 PM UTC

Based on the screenshot you provided, we created a simple sample. In that sample, we obtain information from the database such as the PositionID, PreviousPosition, and NextPosition values. We created a node and connector collection in the diagram based on PositionID, PreviousPosition and NextPosition values and positioned the nodes manually. In your query, you stated, "When the network plan is created (with nodes connected with connectors ordered by positions)," implying that you want to place the nodes and connectors based on the position values automatically. But you are not mentioned more details about the position value and how the nodes should be arranged based on the position values so, we arranged the nodes manually in the previously shared sample by setting OffsetX and OffsetY values to nodes. We have shared the sample what we tried at our end. 

We have built-in automatic layout algorithm which arranges the nodes in a tree-like structure based on the parent-child relationship. If your requirement is also to arrange the nodes similar to our layout algorithm then you can use our built-in layout algorithm to position the nodes. Please refer our UG documentation for more details about our automatic layout algorithms,

UG link:

Attachment: Sample_be5cd5d6.zip

Marked as answer
Live Chat Icon For mobile
Up arrow icon