[]
        
(Showing Draft Content)

Quick Start

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