TL;DR: Turn text into flowcharts with an AI flowchart generator using WPF and OpenAI. Learn to automate diagrams in C#.
Manually crafting flowcharts can be a time-consuming and labor-intensive task. But with the power of an AI flowchart generator, you can effortlessly transform AI Text to flowchart converting simple text into stunning, structured diagrams using intelligent automation. By leveraging OpenAI and the sleek Syncfusion® WPF Diagram Library, this AI flowchart generator converts natural language input into professional visual flowcharts in real time.
In this exciting blog, we’ll guide you step-by-step through building a dynamic AI flowchart generator that brings your textual descriptions to life as polished diagrams. Buckle up and let’s get started!
Let’s dive in!
Prerequisites
Before you begin, ensure your environment is ready with the following:
- Visual Studio with the .NET desktop development workload enabled, which includes everything needed to create WPF applications.
- .NET Framework or SDK installed for your WPF project with the appropriate version.
- Syncfusion® WPF Diagram Library and AI SDKs are included in your project.
- A valid API key from OpenAI or an alternative AI provider such as Azure OpenAI.
Workflow overview:
The workflow for creating an AI-assisted mind map with involves several key steps.
- User input: The user provides a textual description or keywords related to the concepts they wish to visualize.
- AI processing: The input text is sent to OpenAI, which processes it to generate Mermaid structured data representing the flowchart’s nodes and connections.
- Diagram rendering: The generated data is then used by Syncfusion® Diagram component to render the interactive flowchart within the WPF application.
This seamless integration allows users to transform their ideas into visually appealing flowcharts effortlessly.
Step-by-step implementation
Step 1: Set up the WPF project
Create a New WPF Project:
Navigate to File -> New -> Project in Visual Studio. In the Create a new project dialog, search for WPF App and select WPF App (.NET Core). Click Next, provide a name for your project, and then click Create.
Install Syncfusion® WPF Diagram and OpenAI Libraries by running the commands below in the package manager console
Install-Package Syncfusion.SfDiagram.WPF
Install-Package OpenAI-DotNet // Or relevant package
Step 2: Configuring the AI service
To integrate AI capabilities, configure the Azure OpenAI service by specifying the ModelName, Key, and the EndPoint. The following code initializes the AI service and defines a utility function to handle requests.
internal static async Task<bool> ValidateCredentials()
{
ErrorMessage = string.Empty;
try
{
Uri uriResult;
bool isValidUri = Uri.TryCreate(DemoBrowserViewModel.EndPoint, UriKind.Absolute, out uriResult)
&& (uriResult.Scheme == Uri.UriSchemeHttp || uriResult.Scheme == Uri.UriSchemeHttps);
if (!isValidUri || !DemoBrowserViewModel.EndPoint.Contains("http"))
{
ErrorMessage = "Please enter valid EndPoint.";
}
else
{
clientAI = new AzureOpenAIClient(new Uri(DemoBrowserViewModel.EndPoint), new AzureKeyCredential(DemoBrowserViewModel.Key)).AsChatClient(modelId: DemoBrowserViewModel.ModelName);
if (ClientAI != null)
{
await ClientAI.CompleteAsync("Hello, Test Check");
}
}
}
catch (Exception ex)
{
//Check the error message and display the appropriate message
if (ex.Message.Contains("API deployment"))
{
ErrorMessage = "Please enter valid ModelName.";
}
else if (ex.Message.Contains("Access denied"))
{
ErrorMessage = "Please enter valid Key.";
}
else
{
ErrorMessage = "Please enter valid EndPoint.";
}
}
IsCredentialValid = string.IsNullOrEmpty(ErrorMessage) ? true : false;
return IsCredentialValid;
}
Note: Replace the EndPoint, Key, and ModelName with your Azure AI service details.
Step 3: Configure Syncfusion® WPF Diagram
The Syncfusion® WPF Diagram is a feature-rich architecture diagram library for visualizing, creating, and editing interactive diagrams. Its intuitive API and rich feature set make it easy to create, style, and manage flowcharts.
<syncfusion:SfDiagram x:Name="sfdiagram" Grid.Column="1"
Tool="{Binding Tool}" Menu="{Binding Menu}"
ItemAddedCommand="{Binding ItemAddedCommand}"
DefaultConnectorType="{Binding DefaultConnectorType}"
Nodes="{Binding Nodes, Mode=TwoWay}"
Connectors="{Binding Connectors, Mode=TwoWay}"
ExportSettings="{Binding ExportSettings}"
ViewPortChangedCommand="{Binding ViewPortChangedCommand}"
DataSourceSettings="{Binding DataSourceSettings}"
LayoutManager="{Binding LayoutManager}">
<syncfusion:SfDiagram.SnapSettings>
<syncfusion:SnapSettings SnapToObject="All" SnapConstraints="All"/>
</syncfusion:SfDiagram.SnapSettings>
<syncfusion:SfDiagram.HorizontalRuler>
<syncfusion:Ruler Orientation="Horizontal"/>
</syncfusion:SfDiagram.HorizontalRuler>
<syncfusion:SfDiagram.VerticalRuler>
<syncfusion:Ruler Orientation="Vertical"/>
</syncfusion:SfDiagram.VerticalRuler>
</syncfusion:SfDiagram>
This configuration creates a responsive diagram with a flowchart layout, ruler settings, snap settings, and some event bindings.
Step 4: Create an AI assist dialog for user input
Create a dialog for AI-assisted flowchart generation with suggested prompts. The interface will offer suggested prompts, a textbox for user input, and a button to send input to OpenAI for processing.
<Popup x:Name="AIAssistPopup" StaysOpen="False" Placement="Center" AllowsTransparency="True" IsOpen="False">
<Border BorderBrush="#0E000000" BorderThickness="2" Background="#FFFFFFFF" CornerRadius="8" Width="576" Height="262" Padding="24">
<Border.Effect>
<DropShadowEffect BlurRadius="6" ShadowDepth="1" Direction="270" Color="#CC000000" Opacity="0.42" RenderingBias="Performance"/>
</Border.Effect>
<Grid>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Path Width="16" Height="16" Fill="{Binding Foreground, ElementName=aiAssistText}" Stretch="Uniform">
<Path.Data>
<GeometryGroup>
<PathGeometry Figures="M12.7393 1.39699C12.6915 1.17019 12.4942 1.00593 12.2625 1.00016C12.0307 0.994384 11.8255 1.14861 11.7665 1.37276L11.6317 1.88471C11.4712 2.49477 10.9948 2.97121 10.3847 3.13174L9.87276 3.26646C9.66167 3.32201 9.51101 3.50807 9.50058 3.72609C9.49014 3.94412 9.62234 4.14371 9.82715 4.21917L10.5469 4.48434C11.0663 4.67572 11.4646 5.10158 11.6208 5.63266L11.7703 6.14108C11.8343 6.35877 12.0369 6.50605 12.2637 6.49981C12.4906 6.49358 12.6847 6.3354 12.7367 6.11453L12.8292 5.72158C12.9661 5.1398 13.3904 4.66811 13.9545 4.47067L14.6652 4.22193C14.8737 4.14895 15.0096 3.94777 14.9995 3.72708C14.9894 3.50639 14.8356 3.31851 14.6213 3.26493L14.1122 3.13768C13.4624 2.97521 12.9622 2.45598 12.8242 1.80045L12.7393 1.39699ZM11.3796 3.78214C11.7234 3.57072 12.0165 3.28608 12.2378 2.94927C12.458 3.28452 12.7496 3.56851 13.0919 3.77995C12.7482 3.99135 12.4564 4.27526 12.2359 4.60988C12.015 4.2757 11.7229 3.99268 11.3796 3.78214ZM5.33236 2.83331C5.54136 2.83282 5.72974 2.96284 5.80255 3.16046L6.27396 4.43999C6.65671 5.47887 7.50843 6.2754 8.57059 6.58779L9.47446 6.85363C9.68277 6.9149 9.82773 7.1036 9.83322 7.32066C9.83872 7.53772 9.7035 7.73351 9.49856 7.80524L8.23517 8.24744C7.10694 8.64233 6.25826 9.58571 5.98447 10.7493L5.82009 11.4478C5.76812 11.6687 5.57394 11.8269 5.34712 11.8331C5.34708 11.8331 5.34703 11.8331 5.34699 11.8331C5.33282 11.8335 5.31873 11.8333 5.30478 11.8325C5.09539 11.8207 4.91359 11.6785 4.85357 11.4744L4.58773 10.5705C4.27534 9.50837 3.47881 8.65665 2.43993 8.2739L1.1604 7.80249C0.955587 7.72703 0.82339 7.52743 0.833828 7.3094C0.844266 7.09138 0.994926 6.90532 1.20601 6.84978L2.11615 6.61027C3.33626 6.2892 4.28914 5.33632 4.61022 4.11621L4.84972 3.20607C4.90757 2.98624 5.10615 2.83366 5.33236 2.83331ZM5.31175 5.11073C4.83592 6.14233 3.98451 6.95939 2.92852 7.39092C3.98501 7.82144 4.83249 8.63465 5.309 9.65736C5.78274 8.636 6.62744 7.82043 7.68415 7.38731C6.63136 6.95377 5.78499 6.13721 5.31175 5.11073ZM11.9893 8.39699C11.9415 8.17019 11.7442 8.00593 11.5125 8.00016C11.2807 7.99438 11.0755 8.14861 11.0165 8.37276L10.8368 9.05536C10.8082 9.1643 10.7725 9.27025 10.7302 9.37272C10.4344 10.09 9.81793 10.6362 9.05536 10.8368L8.37276 11.0165C8.16167 11.072 8.01101 11.2581 8.00058 11.4761C7.99992 11.4897 7.99983 11.5033 8.00027 11.5167C8.00695 11.7186 8.13514 11.8984 8.32715 11.9692L9.2868 12.3227C9.37955 12.3569 9.46961 12.3963 9.55662 12.4406C10.1657 12.7506 10.6257 13.2993 10.8209 13.9632L11.0203 14.6411C11.0283 14.6683 11.0385 14.6944 11.0506 14.7193C11.1354 14.8932 11.3153 15.0053 11.5137 14.9998C11.5279 14.9994 11.542 14.9984 11.5559 14.9969C11.7643 14.9736 11.938 14.8216 11.9867 14.6145L12.11 14.0906C12.3056 13.2595 12.9118 12.5856 13.7176 12.3036L14.6652 11.9719C14.6912 11.9628 14.7162 11.9517 14.7398 11.9388C14.9054 11.8483 15.0083 11.6702 14.9995 11.4771C14.9894 11.2564 14.8356 11.0685 14.6213 11.0149L13.9426 10.8453C13.0141 10.6132 12.2997 9.87141 12.1025 8.93494L11.9893 8.39699ZM10.1143 11.4814C10.6905 11.1624 11.1656 10.6865 11.4838 10.1099C11.526 10.1864 11.571 10.2612 11.6186 10.3341C11.952 10.8443 12.415 11.2617 12.9632 11.5402C12.3344 11.8584 11.8194 12.3576 11.4815 12.9678C11.3119 12.6627 11.098 12.3857 10.8481 12.1453C10.5981 11.905 10.3119 11.7014 9.99771 11.543C10.037 11.5232 10.0759 11.5026 10.1143 11.4814Z" />
</GeometryGroup>
</Path.Data>
</Path>
<TextBlock x:Name="aiAssistText" Text="AI Assist" Margin="6,0,0,0" FontWeight="DemiBold" FontSize="20"/>
</StackPanel>
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,36,0,0">
<TextBlock Text="Suggested Prompts" Margin="0 0 0 8"/>
<Button Content="Mind Map Diagram for Syncfusion Components" x:Name="firstButton" HorizontalAlignment="Left" Padding="8 6" Margin="0 0 0 8" Click="GenerateDiagram_Clicked"/>
<Button Content="Mind Map Diagram for Organizational Research" x:Name="secondButton" HorizontalAlignment="Left" Padding="8 6" Margin="0 0 0 8" Click="GenerateDiagram_Clicked"/>
<Button Content="Mind Map Diagram for Meeting Agenda" x:Name="thirdButton" HorizontalAlignment="Left" Padding="8 6" Margin="0 0 0 8" Click="GenerateDiagram_Clicked"/>
</StackPanel>
<StackPanel VerticalAlignment="Bottom">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<TextBox Name="popupTextBox" Grid.Column="0" Grid.Row="0" KeyDown="popupTextBox_KeyDown" Height="32" HorizontalAlignment="Stretch" VerticalAlignment="Center" TextChanged="popupTextBox_TextChanged"/>
<Button x:Name="generateDiagramButton" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="48" Height="28" IsEnabled="False" BorderThickness="0" Style="{StaticResource WPFPrimaryButtonStyle}" Click="GenerateDiagram_Clicked" Margin="0 0 0 3">
<Button.Content>
<Viewbox Width="18" Height="18" Stretch="Uniform">
<Path Stroke="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}" StrokeThickness="1" Data="M2.5 7.5L0.5 14.5L15.5 7.5L0.5 0.5L2.5 7.5ZM2.5 7.5H9.5" />
</Viewbox>
</Button.Content>
</Button>
</Grid>
</StackPanel>
</Grid>
</Border>
</Popup>
private async void GenerateDiagram_Clicked(object sender, RoutedEventArgs e)
{
AIAssistPopup.IsOpen = false;
Button button = e.Source as Button;
TextBox textBox = e.Source as TextBox;
sfBusyIndicator.Visibility = Visibility.Visible;
try
{
if (button != null && (button.Content is Viewbox) && !string.IsNullOrEmpty(popupTextBox.Text))
{
await LoadDiagram(popupTextBox.Text);
}
if (button != null && !(button.Content is Viewbox) && !string.IsNullOrEmpty(button.Content.ToString()))
{
await LoadDiagram(button.Content.ToString());
}
else if (textBox != null && !string.IsNullOrEmpty(textBox.Text))
{
await LoadDiagram(textBox.Text);
}
}
catch (Exception)
{
}
finally
{
sfBusyIndicator.Visibility = Visibility.Hidden;
popupTextBox.Text = string.Empty;
}
}
Step 5: Integrating OpenAI
Implement a function to transform AI-generated text into a flowchart using Syncfusion® Diagram API.
private string BuildCompletePromptWithSystem(string systemPrompt, AIDiagramLayout layoutType)
{
string flowChartGuidelines = @"
You are an expert assistant specializing in generating precise Mermaid flowchart diagrams. For this task, generate a Mermaid flowchart titled '{0}'.
Instructions:
- Title: The flowchart should represent the '{0}' process, with clear steps and decision points, and keep the layout simple, avoiding complex layouts.
- Format: Use 'Yes' or 'No' branches for any conditional steps.
- Structure: Adapt each step and condition logically based on the '{0}' process.
- Colors: Use distinct colors to enhance visual appeal, with unique colors for each node type (e.g., start, process, decision, end). Ensure each node has contrasting, visually pleasing colors.
Example of the expected output structure:
graph TD
A([Start]) --> B[Choose Destination]
B --> C{{Already Registered?}}
C -->|No| D[Sign Up]
D --> E[Enter Details]
E --> F[Search Buses]
C --> |Yes| F
F --> G{{Buses Available?}}
G -->|Yes| H[Select Bus]
H --> I[Enter Passenger Details]
I --> J[Make Payment]
J --> K[Booking Confirmed]
G -->|No| L[Set Reminder]
K --> M([End])
L --> M
style A fill:#90EE90,stroke:#333,stroke-width:2px;
style B fill:#4682B4,stroke:#333,stroke-width:2px;
style C fill:#32CD32,stroke:#333,stroke-width:2px;
style D fill:#FFD700,stroke:#333,stroke-width:2px;
style E fill:#4682B4,stroke:#333,stroke-width:2px;
style F fill:#4682B4,stroke:#333,stroke-width:2px;
style G fill:#32CD32,stroke:#333,stroke-width:2px;
style H fill:#4682B4,stroke:#333,stroke-width:2px;
style I fill:#4682B4,stroke:#333,stroke-width:2px;
style J fill:#4682B4,stroke:#333,stroke-width:2px;
style K fill:#FF6347,stroke:#333,stroke-width:2px;
style L fill:#FFD700,stroke:#333,stroke-width:2px;
style M fill:#FF6347,stroke:#333,stroke-width:2px;
Please return only the formatted Mermaid flowchart code, following the example structure above, with no extra comments or symbols and always provide colors which is visible properly when foreground text is black.
";
return string.Format(flowChartGuidelines, systemPrompt);
}
}
private async Task LoadDiagram(string input)
{
if (!string.IsNullOrWhiteSpace(input))
{
string result = await semanticKernelOpenAI.GetResponseFromAI(input, AIDiagramLayout.FlowChart);
if (!string.IsNullOrEmpty(result))
{
sfdiagram.LoadDiagramFromMermaid(result);
}
var layout = this.sfdiagram.LayoutManager.Layout as FlowchartLayout;
if (layout != null)
{
layout.UpdateLayout();
layout.InvalidateLayout();
}
}
}
The above core function sends a request to the OpenAI API with a user-entered prompt to generate Mermaid-structured flowchart data from text descriptions. It then uses the Syncfusion® Diagram’s loadDiagramFromMermaid method to render the flowchart.
After executing the code examples above, the following flowchart will be generated.
GitHub reference
For more details, refer to the GitHub demo.
Conclusion
Thanks for reading! In this blog, we’ve explored how to build an AI-powered smart text-to-flowchart convertor using the Syncfusion® WPF Diagram component. This approach eliminates manual design, allowing users to generate structured, professional flowcharts in seconds. Whether you’re mapping business processes, software logic, or decision trees, this solution enhances efficiency and clarity.
Existing customers can download the latest version of Essential Studio from the license and downloads page. If you are not yet a customer, you can try our 30-day free trial to check out these new features.
If you have questions, you can contact us through our support forum, feedback portal, or support portal. We are always happy to assist you!
Related Blogs
- Easily Create Dynamic Charts in Excel Using C#
- How to Add Comments to Excel Documents Using C#
- Create Excel Table in Just 3 Steps Using C#
- 3 Easy Steps to Add Watermarks to Your Excel Document Using C#
This article was originally published at Syncfusion.com.
Top comments (0)