AI-Powered Text-to-Flowchart Converter Using OpenAI and Angular Diagram Library

Flowcharts play a crucial role in visualizing processes, mapping workflows, and representing systems in both business and development settings. However, manually designing them can be tedious and time-consuming. AI simplifies this process by intelligently transforming text-based descriptions into structured visual flowcharts with ease.

Let’s see how to create a smart flowchart app using the OpenAI and Syncfusion Angular Diagram Library for seamless text-to-flowchart conversion.

Prerequisites

Before you begin, ensure your environment is ready with the following:

• Angular CLI, Node.js, and npm are installed on your machine.
• Syncfusion’s Angular 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

1. The user will input a textual description of a process.
2. Then, the input will be sent to the OpenAI’s API for processing.
3. Now, the OpenAI will generate a Mermaid structured data representation of the flowchart.
4. The structured data will be parsed and converted into the Angular Diagram Library’s nodes and connectors.
5. Finally, the Angular Diagram Library will render the flowchart visually.

Build an AI-powered text-to-flowchart converter using OpenAI and Angular Diagram Library

Step 1: Set up the Angular project

Start creating an Angular project and installing the required dependencies using the following commands.

Create the Angular project

ng new smart-flowchart
cd smart-flowchart

Install the Syncfusion Angular Diagram and OpenAI Libraries

npm install @syncfusion/ej2-angular-diagrams --save
npm install openai --save

Step 2: Configuring the AI service

To integrate AI capabilities, configure the Azure OpenAI service by specifying the resource name, API key, and the AI model.

The following code initializes the AI service and defines a utility function to handle requests.

import { generateText } from "ai";
import { createAzure } from '@ai-sdk/azure';

const azure = createAzure({
    resourceName: 'RESOURCE_NAME',
    apiKey: 'API_KEY',
});

const aiModel = azure('MODEL_NAME'); // Update the model here

export async function getAzureChatAIRequest(options: any) {
    try {
        const result = await generateText({
            model: aiModel,
            messages: options.messages,
            topP: options.topP,
            temperature: options.temperature,
            maxTokens: options.maxTokens,
            frequencyPenalty: options.frequencyPenalty,
            presencePenalty: options.presencePenalty,
            stopSequences: options.stopSequences
        });
        return result.text;
    } catch (err) {
        console.error("Error occurred:", err);
        return null;
    }
}

Ensure you replace the RESOURCE_NAME, API_KEY, and MODEL_NAME with your actual Azure AI service details.

Step 3: Configure the Angular Diagram Library for visualization

The Angular Diagram is a feature-rich architecture diagram library for visualizing, creating, and editing interactive diagrams. Its intuitive API and rich feature set make creating, styling, and managing flowcharts easy.

In the app.components.html file, define and configure the Angular Diagram component, which will be the core of our flowchart generator.

<ejs-diagram 
    #diagram 
    id="diagram" 
    width="100%" 
    height="900px" 
    [rulerSettings]="{ showRulers: true }"
    [tool]="diagramTools" 
    [snapSettings]="{ horizontalGridlines: gridlines, verticalGridlines: gridlines }"
    [scrollSettings]="{ scrollLimit: 'Infinity' }" 
    [layout]="{
        type: 'Flowchart',
        orientation: 'TopToBottom',
        flowchartLayoutSettings: {
            yesBranchDirection: 'LeftInFlow',
            noBranchDirection: 'RightInFlow',
            yesBranchValues: ['Yes', 'True'],
            noBranchValues: ['No', 'False']
        },
        verticalSpacing: 50,
        horizontalSpacing: 50
    }" 
    [dataSourceSettings]="{
        id: 'id',
        parentId: 'parentId',
        dataManager: dataManager
    }" 
    (scrollChange)="onScrollChange($event)" 
    [getNodeDefaults]="getNodeDefaults"
    [getConnectorDefaults]="getConnectorDefaults" 
    (dragEnter)="dragEnter($event)">
</ejs-diagram>

This configuration creates a responsive diagram with a flowchart layout, ruler settings, snap settings, scroll settings, and some event bindings.

Step 4: Create an AI-assist dialog for user input

Let’s create a dialog for AI-assisted flowchart generation with suggested prompts, a textbox for user input, and a button to send the user input to OpenAI.

<ejs-dialog 
    #dialog 
    id='dialog' 
    target='#container'
    header='< span class="e-icons e-assistview-icon" style="color: black;width:20px; font-size: 16px;"> </span>  AI Assist'
    showCloseIcon='true' 
    isModal='true' 
    [visible]='false' 
    [width]="'540px'" 
    [height]="'310px'"> 
    <p style="margin-bottom: 10px; font-weight: bold;"> Suggested Prompts</p> 

    <button ejs-button 
            id="btn2" 
            cssClass="e-primary" 
            (click)="onBtnClick('Flowchart for online shopping')" 
            style="flex: 1; overflow: visible; border-radius: 8px; margin-bottom: 10px"> 
        Flowchart for online shopping
    </button> 

    <button ejs-button 
            id="btn1" 
            cssClass="e-primary" 
            (click)="onBtnClick('Flowchart for Mobile banking registration')" 
            style="flex: 1; overflow: visible; border-radius: 8px; margin-bottom: 10px"> 
        Flowchart for Mobile banking registration
    </button> 

    <button ejs-button 
            id="btn3" 
            cssClass="e-primary" 
            (click)="onBtnClick('Flowchart for Bus ticket booking')" 
            style="flex: 1; overflow: visible; border-radius: 8px; margin-bottom: 10px"> 
        Flowchart for Bus ticket booking
    </button> 

    <div style="display: flex; align-items: center; margin-top: 20px;"> 
        <ejs-textbox 
            #textBox 
            id="textBox" 
            placeholder="Please enter your prompt here..." 
            style="flex: 1;" 
            (input)="onTextBoxChange($event)"> 
        </ejs-textbox> 

        <button ejs-button 
                id="db-send" 
                (click)="onSendClick()" 
                iconCss='e-icons e-send' 
                cssClass="e-primary" 
                style="margin-left: 5px; height: 32px; width: 32px;"> 
        </button> 
    </div> 
</ejs-dialog>

In the app.components.ts file, we need to set up event listeners and handlers to manage user interactions, such as entering a prompt and triggering the conversion of text to flowchart.

// Send the user-entered prompt to OpenAI to generate a flowchart
onSendClick() {
    convertTextToFlowchart((this.textBox as any).value, this.diagram);
}

// Send the user-selected suggested prompt to OpenAI to generate a flowchart 
onBtnClick(msg: any) {
    convertTextToFlowchart(msg, this.diagram);
}

// Handle textbox input change
public onTextBoxChange(args: InputEventArgs) {
    if (args.value !== '') {
        this.sendButton.disabled = false;
    } else {
        this.sendButton.disabled = true;
    }
}

Step 5: Integrating OpenAI for text-to-flowchart conversion

Finally, implement the convertTextToFlowchart function to convert the AI-generated text into a flowchart using the Angular Diagram API.

export async function convertTextToFlowchart(inputText: string, diagram: DiagramComponent) {
    const options = {
        messages: [
            {
                role: 'system',
                content: 'You are an assistant tasked with generating mermaid flow chart diagram data sources based on user queries'
            },
            {
                role: 'user',
                content: `Generate only the Mermaid flowchart code for the process titled "${inputText}".                                                                                      
                Use the format provided in the example below, but adjust the steps, conditions, and styles according to the new title:
              
                **Example Title:** Bus Ticket Booking
              
                **Example Steps and Mermaid Code:**
              
                  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;
              
              
              Note: Please ensure the generated code matches the title "${inputText}" and follows the format given above. Provide only the Mermaid flowchart code, without any additional explanations, comments, or text.
              `
            }
        ],
    }

    try {
        const jsonResponse = await getAzureChatAIRequest(options);
        diagram.loadDiagramFromMermaid(jsonResponse as string);

    } catch (error) {
        console.error('Error:', error);
        convertTextToFlowchart(inputText, diagram);
    }
};

The core function convertTextToFlowchart sends a request to the OpenAI API with a user-initiated prompt to generate Mermaid structured flowchart data from text descriptions. It then uses the Angular Diagram’s loadDiagramFromMermaid method to render the flowchart.

After executing the above code examples, we’ll get the output that resembles the following image.

GitHub reference

For more details, refer to the AI-powered smart text-to-flowchart converter using the Angular Diagram Library GitHub demo.

Harness the power of Syncfusion’s feature-rich and powerful Angular UI components.

Try It Free

Conclusion

Thanks for reading! In this blog, we’ve explored how to build an AI-powered smart text-to-flowchart creation app using the Syncfusion Angular Diagram component. Try it out and experience the benefits of AI-driven flowchart generation!

Existing customers can download the latest version of Essential Studio from the License and Downloads page. If you are not yet a customer, try our 30-day free trial to check out these new features.

You can also contact us through our support forum, feedback portal, or support portal. We are always happy to assist you!