クイックスタート

Prerequisites

.NET 8 SDK
WinUI Application project
NuGet packages:
- C1.WinUI.Diagram
- C1.Diagram.Parser (for MermaidJS support)

Installation and Setup

Open Visual Studio and create a new WinUI Application.

Open the NuGet Package Manager.

Install the C1.WinUI.Diagram and C1.Diagram.Parser packages.

Open MainWindow.xaml and add:

XAML	コードのコピー
xmlns:c1="using:C1.WinUI.Diagram"

Add the control inside the layout:

XAML	コードのコピー
<c1:FlexDiagram x:Name="diagram"/>

Basic Usage

XAML	コードのコピー
using C1.Diagram; using C1.WinUI.Diagram; using Microsoft.UI.Xaml; namespace FlexDiagramWinUI { public sealed partial class MainWindow : Window { public MainWindow() { 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 }); } } }

XAML

コードのコピー

using C1.Diagram;
using C1.WinUI.Diagram;
using Microsoft.UI.Xaml;
namespace FlexDiagramWinUI
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            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
            });
        }
    }
}