How to create a WPF Diagram (SfDiagram)?

WPF Diagram (SfDiagram) is a UI-control used to visualize, create, and edit the interactive diagrams. It supports creating flowcharts, organizational charts, mind maps, and floor plan using code or a visual interface.

Steps to create a diagram in WPF.

1. Create a new WPF application project.

2. Install the Syncfusion.SfDiagram.WPF NuGet package as a reference to your WPF application from NuGet.org.

3. Include the following namespaces in the MainWindow.xaml file.

   xmlns:diagram="clr-namespace:Syncfusion.UI.Xaml.Diagram;assembly=Syncfusion.SfDiagram.WPF"
   

4. Create a diagram instance and initialize its basic properties (nodes and connectors) in XAML.

   <!--Create SfDiagram Instance-->
   <diagram:SfDiagram>            
        <!--Initialize Nodes - Node is an entity to visualize the data-->
        <diagram:SfDiagram.Nodes>
             <diagram:NodeCollection></diagram:NodeCollection>
        </diagram:SfDiagram.Nodes>
              
        <!--Initialize Connectors - Connector is an entity to visualize the relationship-->
        <diagram:SfDiagram.Connectors>
             <diagram:ConnectorCollection></diagram:ConnectorCollection>
        </diagram:SfDiagram.Connectors>           
   </diagram:SfDiagram>
   

5. Create the NodeViewModel with position and size in XAML.

   <diagram:NodeCollection>
   <!--OffsetX and OffsetY - helps to position the Node in Diagram-->
       <!--NodeViewModel is business class and DataContext of Node(Control or View)-->
        <diagram:NodeViewModel ID="node1" OffsetX="200" OffsetY="200" 
           UnitHeight="50"  UnitWidth="75"/>
        <diagram:NodeViewModel ID="node2" OffsetX="350" OffsetY="300"
           UnitHeight="50"  UnitWidth="75"/>
   </diagram:NodeCollection>
   

6. Create the ConnectorViewModel with relationship of created NodeViewModels.

   <diagram:ConnectorCollection>
    <!--ConnectorViewModel is business class and DataContext of Connector(Control or View)-->
       <diagram:ConnectorViewModel SourceNodeID="node1" TargetNodeID="node2"/>
   </diagram:ConnectorCollection>
   

7. Set the Shape and ShapeStyle for NodeViewModel in common node style.

   <Window.Resources>
           
           <!--View for the NodeViewModel-->
        <Style TargetType="{x:Type diagram:Node}">
    
          <!--Any Geomtry can be assigned for Shape-->
               <Setter Property="Shape">
                   <Setter.Value>
                       <RectangleGeometry Rect="10,10,10,10"></RectangleGeometry>
                   </Setter.Value>
               </Setter>
    
          <!--Style to customize Shape and it is based on Path-->
               <Setter Property="ShapeStyle">
                   <Setter.Value>
                       <Style TargetType="Path">
                           <Setter Property="Fill" Value="CornflowerBlue"></Setter>
                           <Setter Property="Stroke" Value="LightGray"></Setter>
                           <Setter Property="Stretch" Value="Fill"></Setter>
                       </Style>
                   </Setter.Value>
               </Setter>
      </Style>
    
   </Window.Resources>
   

Set or customize the Shape and ShapeStyle for the NodeViewModel individually since these properties are available in View Models also. And the diagram provides some Built-in Shapes.

Take a moment to peruse the documentation, where you can find the basic diagram features like Annotation for node and connector, Port for making point to point connection, Print the diagram, and Stencil for drag and drop reusable objects with code examples.