TL;DR: The 2024 volume 4 release brings AI-driven enhancements, including automated text-to-flowchart and text-to-mind map conversions in the WPF Diagram library. This update aids in visualizing complex information, supports Mermaid syntax for importing/exporting diagrams, and improves navigation and annotation selection.
TheEssential Studio® 2024 Volume 4 release brings a host of exciting new AI-powered smart features and other enhancements to the Syncfusion WPFDiagram component. These features are designed to simplify the creation and management of diagrams. With a focus on intuitive usability and flexibility, this update enables both technical and non-technical users to visualize their ideas more effectively.
Let’s explore the standout updates that make this release a game-changer for diagramming!
AI-powered smart features
Text-to-flowchart conversion
The WPF Diagram component now includes a Text-to-Flowchart converter that leverages AI to seamlessly convert textual descriptions into well-structured flowcharts. This innovative tool automatically arranges nodes and connectors, creating a flowchart layout representing processes and workflows. It’s an excellent solution for visualizing step-by-step procedures, decision-making paths, and complex workflows interactively.
This AI-driven flowchart creation tool allows users to quickly transform complex processes into visual diagrams, enhancing understanding and analysis. Without manual intervention, it can represent algorithms, business workflows, and process maps. This feature speeds up the diagramming process and ensures precise and accurate representations of workflows, making it an invaluable asset for professionals aiming to convey complex ideas visually.
Refer to the following image.
Text-to-mind map conversion
In addition to flowcharts, the WPF Diagram Library now supports a text-to-mind map converter powered by AI. This feature automatically creates dynamic mindmap diagrams, in which nodes and connectors are arranged to organize and represent ideas in a mind map layout. It’s perfect for brainstorming sessions, organizing thoughts, and visually mapping complex information.
The AI-powered mind map diagram includes a context menu that facilitates quick actions such as adding, editing, or deleting nodes, making it an interactive tool for efficiently managing and expanding mind maps. This enhances productivity by providing a flexible environment for dynamically exploring ideas and visualizing relationships between concepts.
Refer to the following image.
These AI-powered enhancements to the WPF Diagram component make it an indispensable tool for both technical and non-technical users, enabling the swift translation of text into visual formats for better communication and analysis.
Note: For more details, refer to the AI-powered features in the WPF Diagram GitHub demos.
Import and export diagrams using Mermaid syntax
In this 2024 volume 4 release, the WPF Diagram component introduces support for importing and exporting Mermaid syntax , a Markdown-inspired language that defines diagrams through simple and readable commands. This new feature allows you to seamlessly import and export mind maps and flowcharts.
Key features
- Create diagrams from Mermaid syntax: Easily visualize complex ideas and workflows directly from the text, eliminating the need to draw each element manually.
- Export diagrams to Mermaid syntax: You can share, edit, and reuse your diagrams across various platforms by exporting them to Mermaid format.
How to use Mermaid syntax in the WPF Diagram?
You can access this functionality through the following methods in the WPF Diagram:
1. SaveDiagramAsMermaid
The SaveDiagramAsMermaid() method converts the current diagram into Mermaid’s text format for easy sharing. Refer to the following code example.
SfDiagram Diagram = new SfDiagram();
String mermaidText = Diagram.SaveDiagramAsMermaid();
2. LoadDiagramFromMermaid
The LoadDiagramFromMermaid method generates a diagram from Mermaid’s text data, automatically creating the necessary nodes and connectors.
The following code example demonstrates how to load a diagram using Mermaid’s text data.
SfDiagram Diagram = new SfDiagram();
Diagram.LayoutManager = new LayoutManager()
{
Layout = new FlowchartLayout()
{
Orientation = FlowchartOrientation.TopToBottom,
YesBranchValues = new List<string> { "Yes", "True", "Y", "s" },
YesBranchDirection = BranchDirection.LeftInFlow,
NoBranchValues = new List<string> { "No", "N", "False", "no" },
NoBranchDirection = BranchDirection.RightInFlow,
HorizontalSpacing = 60,
VerticalSpacing = 40,
},
};
Diagram.LoadDiagramFromMermaid(mermaidText);
This functionality not only streamlines diagram creation but also enhances collaboration by using a widely recognized syntax format.
Note: For more details, refer to the example of importing and exporting Mermaid syntax in WPF Diagram.
Import and export stencil symbol group
Easily manage stencil symbol groups with the new ExportGroup and ImportGroup APIs, designed to enhance organization, sharing, and collaboration. A stencil symbol group is a collection of related symbols grouped for better categorization and reuse. With these APIs, you can serialize and deserialize stencil symbol groups in XML format, streamlining workflows for design projects.
ExportGroup
The ExportGroup API allows you to serialize and export specific stencil symbol groups to a writable stream. This makes it easy to share, back up, or reuse designs across different projects. The following code example shows how to export a symbol group to an external file.
XAML
<syncfusion:Stencil x:Name="stencil" GroupMappingName="Name" ShowSearchTextBox="True" SymbolGroupDisplayMode="List" ShowDisplayModeToggleButton="True" DisplayMode="Expanded">
<syncfusion:Stencil.SymbolGroups>
<syncfusion:SymbolGroups>
<syncfusion:SymbolGroupViewModel Name="Basic Shapes" CategorySource="{StaticResource BasicShapes}"/>
</syncfusion:SymbolGroups>
</syncfusion:Stencil.SymbolGroups>
</syncfusion:Stencil>
C#
using (FileStream stream = new FileStream("path/to/exportedgroups.xml", FileMode.Create))
{
stencil.ExportGroup(stream, "BasicShapes");
}
ImportGroup
The ImportGroup API enables you to deserialize XML-based symbol group data from a readable stream and integrate it into your stencils. This simplifies collaboration, updates, and the reuse of symbol groups. The following code example shows how to import a symbol group from an external file.
XAML
<syncfusion:Stencil x:Name="stencil" GroupMappingName="Name" ShowSearchTextBox="True" SymbolGroupDisplayMode="List" ShowDisplayModeToggleButton="True" DisplayMode="Expanded"/>
C#
using (FileStream stream = new FileStream("path/to/symbolgroup.xml", FileMode.Open))
{
stencil.ImportGroup(stream);
}
Note: For more details, refer to the example of importing and exporting the stencil symbol group in the WPF Diagram.
Event support for annotation selection
The WPF Diagram Library has enhanced the annotation selection experience with the new event support! While annotations on nodes and connectors could already be selected by clicking, you can now track these actions using the following events.
- The ItemSelectingEvent and ItemSelectedEvent notify you when an annotation is being selected or has been selected. The event arguments (args), derived from the DiagramPreviewEventArgs and DiagramEventArgs classes, provide details about the selected annotation as either an AnnotationEditorViewModel or a TextAnnotationViewModel.
- The ItemUnSelectingEvent and ItemUnSelectedEvent notify you when an annotation is being deselected or has been deselected. These events also provide args containing the corresponding annotation model.
To enable selection, ensure the Constraints property of the AnnotationEditorViewModel class is set to AnnotationConstraints.Selectable.
Here’s a code example demonstrating how to handle the ItemSelectingEvent , ItemSelectedEvent , ItemUnSelectingEvent , and ItemUnSelectedEvent for annotations in the WPF Diagram control.
C#
using Syncfusion.UI.Xaml.Diagram;
using Syncfusion.UI.Xaml.Diagram.Controls;
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
IGraphInfo diagramInfo = diagram.Info as IGraphInfo;
// Subscribe to events.
diagramInfo.ItemSelectingEvent += Diagram_ItemSelectingEvent;
diagramInfo.ItemSelectedEvent += Diagram_ItemSelectedEvent;
diagramInfo.ItemUnSelectingEvent += Diagram_ItemUnSelectingEvent;
diagramInfo.ItemUnSelectedEvent += Diagram_ItemUnSelectedEvent;
}
// Triggered when an annotation is being selected.
private void Diagram_ItemSelectingEvent(object sender, DiagramPreviewEventArgs args)
{
if (args.Item is AnnotationEditorViewModel annotation)
{
Console.WriteLine($"Annotation is being selected: {annotation.Content}");
}
}
// Triggered when an annotation has been selected.
private void Diagram_ItemSelectedEvent(object sender, DiagramEventArgs args)
{
if (args.Item is AnnotationEditorViewModel annotation)
{
Console.WriteLine($"Annotation selected: {annotation.Content}");
}
}
// Triggered when an annotation is being unselected.
private void Diagram_ItemUnSelectingEvent(object sender, DiagramPreviewEventArgs args)
{
if (args.Item is AnnotationEditorViewModel annotation)
{
Console.WriteLine($"Annotation is being unselected: {annotation.Content}");
}
}
// Triggered when an annotation has been unselected.
private void Diagram_ItemUnSelectedEvent(object sender, DiagramEventArgs args)
{
if (args.Item is AnnotationEditorViewModel annotation)
{
Console.WriteLine($"Annotation unselected: {annotation.Content}");
}
}
}
XAML
<syncfusion:SfDiagram x:Name="diagram">
<syncfusion:SfDiagram.Theme>
<syncfusion:OfficeTheme/>
</syncfusion:SfDiagram.Theme>
<syncfusion:SfDiagram.Nodes>
<syncfusion:NodeCollection>
<syncfusion:NodeViewModel UnitHeight="100" UnitWidth="100" OffsetX="100" OffsetY="100">
<syncfusion:NodeViewModel.Shape>
<RectangleGeometry Rect="10,10,10,10"/>
</syncfusion:NodeViewModel.Shape>
<syncfusion:NodeViewModel.Annotations>
<syncfusion:AnnotationCollection>
<syncfusion:AnnotationEditorViewModel Content="Syncfusion" Constraints="Selectable" Offset="0.5,0.5"/>
</syncfusion:AnnotationCollection>
</syncfusion:NodeViewModel.Annotations>
</syncfusion:NodeViewModel>
</syncfusion:NodeCollection>
</syncfusion:SfDiagram.Nodes>
</syncfusion:SfDiagram>
Note: For more details, refer to the example of node/connector annotation event in the WPF Diagram.
Enhanced diagram scrolling with arrow and navigation keys
The WPF Diagram control now offers enhanced scrolling support through key gestures. Users can effortlessly navigate the diagram page using the arrow keys (Left, Right, Up, Down) and navigation keys (Home, End, Page Up, Page Down). The behavior of these keys adapts according to the configuration of the ScrollLimit property, providing a customized navigation experience.
The following table lists key gestures and their actions.
|
Shortcut key |
Action |
|
Left arrow |
Scrolls the diagram page to the left. |
|
Right arrow |
Scrolls the diagram page to the right. |
|
Up arrow |
Scrolls the diagram page upward. |
|
Down arrow |
Scrolls the diagram page downward. |
|
Home |
Moves the diagram page to the leftmost position. |
|
End |
Moves the diagram page to the rightmost position. |
|
Page Up |
Moves the diagram page to the topmost position. |
|
Page Down |
Moves the diagram page to the bottommost position. |
Refer to the following image.
Note: For more details, refer to the example of scrolling a diagram using the arrow and navigation keys in WPF Diagram.
Conclusion
Thank you for reading! In this blog, we’ve explored the latest updates to the WPF Diagram component in the 2024 Volume 4 release, including AI-powered features that streamline diagram creation and management. For a complete overview of all the new features in this release, check out our Release Notes and What’s New pages. Try these features, and don’t forget to share your thoughts in the comments!
If you’re an existing Syncfusion user, you can download the latest version of Essential Studio® from the License and Downloads page. For those new to Syncfusion, we offer a 30-day free trial so you can experience these exciting features firsthand.
Need help? Feel free to reach out via our support forum, support portal, or feedback portal. We’re always here to assist you!
Top comments (0)