# Quick Start

## Content

## Prerequisites

* .NET 8 SDK
* <span data-testid="definition-highlighter" class="_5pioz8co _189e1dm9 _1il9buyh _19lc184f _d0altlke" style="border-image: linear-gradient(90deg, rgb(0, 101, 255), rgb(191, 99, 243), rgb(245, 230, 168)) 0 0 100% / 1 / 0 stretch; border-width: 1.6px; border-bottom-style: solid; --_11qfq0e: solid;">WPF</span> Application project
* NuGet package:
    * `C1.``<span data-highlighted="true" data-vc="highlighted-text">WPF</span>``.FlexDiagram`
    * `C1.Diagram.Parser`(for MermaidJS support)

### **Installation and Setup**

1\. Open Visual Studio and Create a new <span data-highlighted="true" data-vc="highlighted-text">WPF</span> Application
2\. Open the NuGet Package Manager\.
3\. Install the C1\.<span data-highlighted="true" data-vc="highlighted-text">WPF</span>.FlexDiagram and C1.Diagram.Parser (for MermaidJS)
4\. Open `MainWindow.xaml` and add:

```auto
xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
```

5\. Add the control inside your layout:

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

## Basic Usage

```auto
using C1.WPF.Diagram;
using System.Windows;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        Loaded += (s, e) => 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>