Yes, it is possible to create a design similar to the examples in your links using the Syncfusion Blazor Diagram component. Our diagram allows you to fully customize node designs using HTML templates.
Key Features:
- Custom Node Templates: Create detailed nodes with headers, lists, and interactive buttons using HTML.
- Dynamic Content: Add or remove items dynamically within a node, with automatic resizing.
- Port Alignment: Align ports with list items for proper connections.
- Symbol Palette: Drag-and-drop nodes from a palette into the diagram workspace.
Example:
Here’s how we designed an "Incoming Route" node:
<div id="@id" class="card">
<div class="header">Incoming Route</div>
<div id="items" class="items">
@foreach (var item in node.AdditionalInfo)
{
<div class="item">
<button @onclick="@(() => DeleteItem(node, item.Key))">-</button>
<span>@item.Key: [email protected], [email protected]</span>
</div>
}
<div class="item">
<button @onclick="@(() => AddItem(node))">+</button>
</div>
</div>
</div>
This lets you display lists inside nodes, dynamically manage content, and align ports with items. we have shared a simple sample demonstrating the implementation and video out put
Feel free to let us know if you need more guidance!
Attachment:
SF195831_7a7f0383.zip
