New Product LaunchBoldDesk: Help desk ticketing software starts at $10 for 3 agents.
Try it for free.
@*create diagram*@
<EjsDiagram Width="100%" Height="800px">
@*create nodes collection*@
<DiagramNodes>
@*create node*@
<DiagramNode Id="nodeA" Height="100" Width="400" OffsetX="500" OffsetY="300">
@*set node style*@
<NodeShapeStyle StrokeWidth="5"></NodeShapeStyle>
@*create node annotations*@
<DiagramNodeAnnotations>
@*set annotation content*@
<DiagramNodeAnnotation Content="Cluster Node B">
@*change annotation style*@
<NodeAnnotationStyle Bold="true"></NodeAnnotationStyle>
@*change annotation offset*@
<NodeAnnotationOffset X="0.5" Y="0.5"></NodeAnnotationOffset>
</DiagramNodeAnnotation>
</DiagramNodeAnnotations>
</DiagramNode>
<DiagramNode Id="nodeB" Height="100" Width="100" OffsetX="350" OffsetY="200">
. . .
. . .
</DiagramNode>
<DiagramNode Id="nodeC" Height="100" Width="300" OffsetX="550" OffsetY="200">
. . .
. . .
</DiagramNode>
@*create group node*@
<DiagramNode Id="firstGroup" Children="@firstGroupChildren">
</DiagramNode>
</DiagramNodes>
</EjsDiagram>
@functions{
@*set children for group node*@
private string[] firstGroupChildren { get; set; } = new string[] { "nodeA", "nodeB", "nodeC" };
} |
In blazor, we can render static diagram with basic interaction such as zooming and panning. We have planned to provide interaction support in the diagram for our volume 4, release which is scheduled to release by the month of December, 2019.
|