Prerequisites

• .NET 8 SDK
• WPF Application project
• NuGet package:
  • C1.WPF.FlexDiagram
  • C1.Diagram.Parser (for MermaidJS support)

Installation and Setup

1. Open Visual Studio and Create a new WPF Application
2. Open the NuGet Package Manager.
3. Install the C1.WPF.FlexDiagram and C1.Diagram.Parser (for MermaidJS)
4. Open MainWindow.xaml and add:

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

5. Add the control inside your layout:

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

Basic Usage

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 });
  }
}