# Quick Start

## Content

## Prerequisites

* .NET 8 SDK
* .NET MAUI Application project
* NuGet packages:
    * `C1.Maui.Diagram`
    * `C1.Diagram.Parser` *(for MermaidJS support)*

## Installation and Setup

Open Visual Studio and create a new .NET MAUI Application.
Open the NuGet Package Manager.
Install the `C1.Maui.Diagram` and `C1.Diagram.Parser` packages.
Open `MainPage.xaml` and add:

```auto
xmlns:c1="clr-namespace:C1.Maui.Diagram;assembly=C1.Maui.Diagram"
```

Add the control inside the layout:

```auto
<c1:FlexDiagram x:Name="diagram"/>
```

**Basic Usage**

```auto
using C1.Diagram;
using C1.Maui.Diagram;

namespace FlexDiagramMaui
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            InitDiagram();
        }

        private void InitDiagram()
        {
            var n1 = new Node() { Text = "Start" };
            var n2 = new Node() { Text = "End" };

            diagram.Nodes.Add(n1);
            diagram.Nodes.Add(n2);

            diagram.Edges.Add(new Edge()
            {
                Source = n1,
                Target = n2
            });
        }
    }
}
```


<br>
<br>