# Quick Start

## Content

# 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

1. Open Visual Studio and create a new Blazor Application.
2. Open **NuGet Package Manager**.
3. 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.

```auto
@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.

<br>
<br>