Quick Start

This quick start adds the FlexDiagram control to a Blazor application and creates a basic diagram with nodes and edges.

Prerequisites

Before creating the diagram, verify the following project requirements:

Blazor Application project
C1.Blazor.Diagram NuGet package (the C1.Diagram package installs automatically as a dependency)

Install the Required Package

Open Visual Studio and create a new Blazor Application.
Open NuGet Package Manager.
Install the C1.Blazor.Diagram package.

Create a FlexDiagram

Add the required namespaces and configure the FlexDiagram control.

The following example creates a decision diagram with a Start node, a Decision node, and three option nodes. The diagram applies a top-to-bottom layout, rectilinear edge routing, the standard palette, and pan interaction.

@using C1.Chart
@using C1.Diagram
@using C1.Blazor.Diagram

<FlexDiagram @ref="diagram"
             Direction="direction"
             EdgeRouting="edgeRouting"
             Palette="palette"
             InteractionMode="InteractionMode.Pan" />

@code {
    DiagramDirection direction = DiagramDirection.TopBottom;
    EdgeRouting edgeRouting = EdgeRouting.Rectilinear;
    Palette palette = Palette.Standard;
    FlexDiagram diagram;

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);

        if (firstRender)
        {
            ((C1.Diagram.IDiagram)diagram).Clear();

            diagram.Nodes.Add(new Node
            {
                Text = "Start",
                Shape = Shape.Circle,
                LegendItem = "Start",
                Tooltip = "Start"
            });

            diagram.Nodes.Add(new Node
            {
                Text = "Decision",
                Shape = Shape.Diamond,
                LegendItem = "Decision",
                Tooltip = "Decision"
            });

            diagram.Nodes.Add(new Node
            {
                Text = "Option A",
                Shape = Shape.RoundedRectangle,
                LegendItem = "Option",
                Tooltip = "Option A"
            });

            diagram.Nodes.Add(new Node
            {
                Text = "Option B",
                Shape = Shape.RoundedRectangle,
                LegendItem = "Option",
                Tooltip = "Option B"
            });

            diagram.Nodes.Add(new Node
            {
                Text = "Option C",
                Shape = Shape.RoundedRectangle,
                LegendItem = "Option",
                Tooltip = "Option C"
            });

            diagram.Edges.Add(new Edge
            {
                Source = diagram.Nodes[0],
                Target = diagram.Nodes[1],
                TargetArrow = ArrowStyle.Normal
            });

            diagram.Edges.Add(new Edge
            {
                Source = diagram.Nodes[1],
                Target = diagram.Nodes[2],
                TargetArrow = ArrowStyle.Normal
            });

            diagram.Edges.Add(new Edge
            {
                Source = diagram.Nodes[1],
                Target = diagram.Nodes[3],
                TargetArrow = ArrowStyle.Normal
            });

            diagram.Edges.Add(new Edge
            {
                Source = diagram.Nodes[1],
                Target = diagram.Nodes[4],
                TargetArrow = ArrowStyle.Normal
            });
        }
    }
}

The example adds individual nodes to the Nodes collection and connects them through the Edges collection. Each edge defines its relationship through the Source and Target properties.

The resulting diagram displays the Start node at the top, followed by the Decision node and the three option nodes connected below it.