AI Text-to-Flowchart with OpenAI and Vue Diagram

TL;DR: Developers often spend hours manually creating flowcharts. This guide shows how to automate that process using OpenAI and Syncfusion^® Vue Diagram to convert text into structured, professional flowcharts instantly.

Flowcharts are essential for visualizing processes, defining workflows, and illustrating systems across development and business contexts. While they are vital for developers, manually constructing them is tedious. What if you could describe a process in plain text and instantly generate a visual diagram? This is where AI comes into play, providing intelligent automation to effortlessly convert textual descriptions into visual flowcharts.

In this blog, we’ll see how to build an AI-powered text-to-flowchart converter using OpenAI and Syncfusion^® Vue Diagram library.

Let’s get started!

Prerequisites

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

Node.js and NPM packages.
Syncfusion^® Vue Diagram Library and AI SDKs.
A valid API key from OpenAI or an alternative AI provider, such as Azure OpenAI.

Workflow overview

User input: Provide a text description of a process.
AI processing: Sent the input text to OpenAI’s API for analysis.
Data generation: OpenAI generates a structured Mermaid representation of the flowchart.
Data transformation: The structured data is then converted into the Vue Diagram component’s nodes and connectors.
Visualization: The Vue Diagram component renders a visual flowchart.

Follow along as we delve into the steps to bring this intelligent solution to life!

Implement an AI-powered text-to-flowchart converter

Step 1: Set up the Vue project

First, create a Vue project using the following commands.

npm create vue@latest smart-flowchart-vue
cd smart-flowchart-vue
npm install

Then, install the Vue Diagram component and OpenAI libraries.

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

Step 2: Configure the AI service

To integrate the 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;
    }
}

Replace the RESOURCE_NAME, API_KEY, and MODEL_NAME with your Azure AI service details.

Step 3: Configure the Vue Diagram Library for visualization

The Vue 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.

In the app.vue file, define and configure the Vue Diagram component to construct our flowchart generator, as shown below.

<ejs-diagram ref="diagram"
             width='100%' 
             height='900px' 
             :drawingObject='{}'
             :selectionChange='selectionChange' 
             :historyChange='historyChange' 
             :tool='diagramTool'
             :snapSettings='{ horizontalGridlines: gridlines, verticalGridlines: gridlines }'
             :scrollSettings="{ scrollLimit: 'Infinity' }" 
             :layout="diagramLayout"
             :dataSourceSettings="dataSourceSettings" 
             :scrollChange="diagramScrollChange"
             :getNodeDefaults='getNodeDefaults' 
             :getConnectorDefaults='getConnectorDefaults'
             :dragEnter='dragEnter'>
</ejs-diagram>

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

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

Create a dialog interface that facilitates AI-assisted flowchart generation. The interface will offer suggested prompts, a textbox for user input, and a button to send input the OpenAI for processing.

Refer to the following code example.

<ejs-dialog ref="dialog" header='headerTemplate' :showCloseIcon='true' :isModal='true' content='contentTemplate' target='.control-section' width='540px' :visible='false' height='310px'>
    <template #headerTemplate>
        <span class="e-icons e-assistview-icon" style="color: black;width:20px; font-size: 16px;"></span> AI Assist
    </template>
    <template #contentTemplate>
        <p style="margin-bottom: 10px;font-weight:bold;">Suggested Prompts</p>
        <ejs-button id="btn2"
                    style="flex: 1; overflow: visible; border-radius: 8px;margin-bottom: 10px;"
                    @click='(e) => { $refs.dialog.hide(); convertTextToFlowChart(e.target.value); }'>
                    Flowchart for online shopping
        </ejs-button>
        <ejs-button id="btn1"
                    style="flex: 1; overflow: visible; border-radius: 8px;margin-bottom: 10px;"
                    @click='(e) => { $refs.dialog.hide(); convertTextToFlowChart(e.target.value); }'>
                    Flowchart for Mobile banking registration
        </ejs-button>
        <ejs-button id="btn3"
                    style="flex: 1; overflow: visible; border-radius: 8px;margin-bottom: 10px;"
                    @click='(e) => { $refs.dialog.hide(); convertTextToFlowChart(e.target.value); }'>
                    Flowchart for Bus ticket booking
        </ejs-button>
        <div style="display: flex; align-items: center; margin-top: 20px;">
            <ejs-textbox ref='textBox' id="textBox" class="db-openai-textbox" style="flex: 1;" placeholder='Please enter your prompt here...' width='450' :input='onTextBoxChange' />
            <ejs-button ref="sendButton" id="db-send" iconCss='e-icons e-send' :isPrimary='true' :disabled='true' style="margin-left: 2px; height: 32px; width: 32px;" @click='dbSend'></ejs-button>
        </div>
    </template>
</ejs-dialog>

This configuration in the app.vue file sets up event listeners and handlers to manage user interactions, such as entering a prompt and triggering the conversion of text to a flowchart.

Step 5: Integrating OpenAI

Finally, implement the convertTextToFlowchart function, which is the main driver for transforming AI-generated text into a flowchart using the Vue Diagram API.

convertTextToFlowChart: async function (inputText: string) {
    const diagram = this.$refs.diagram.ej2Instances;
    this.showLoading();
    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 {
        let jsonResponse = await getAzureChatAIRequest(options);
        jsonResponse = jsonResponse.replace('```mermaid', '').replace('```', '');
        diagram.loadDiagramFromMermaid(jsonResponse);
        this.hideLoading();
    } catch (error) {
        console.error('Error:', error);
        this.convertTextToFlowChart(inputText);
    }
},

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 Vue Diagram’s loadDiagramFromMermaid method to render the flowchart.

After executing the above code examples, we’ll get the following flowchart.

Vue Diagram Library with AI-powered text-to-flowchart converter

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 converter using the Syncfusion^® Vue 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 a customer, try our 30-day free trial to check out these features.

If you have questions, contact us through our support forum, feedback portal, or support portal. We are always happy to assist you!

How to Build an AI Text-to-Flowchart Converter Using OpenAI and Vue Diagram

Prerequisites

Workflow overview

Implement an AI-powered text-to-flowchart converter

Step 1: Set up the Vue project

Step 2: Configure the AI service

Step 3: Configure the Vue Diagram Library for visualization

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

Step 5: Integrating OpenAI

GitHub reference

Conclusion

Subscribe to my newsletter

syncfusion

syncfusion

How to Build an AI Text-to-Flowchart Converter Using OpenAI and Vue Diagram

Prerequisites

Workflow overview

Implement an AI-powered text-to-flowchart converter

Step 1: Set up the Vue project

Step 2: Configure the AI service

Step 3: Configure the Vue Diagram Library for visualization

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

Step 5: Integrating OpenAI

GitHub reference

Conclusion

Related Blogs

Subscribe to my newsletter

syncfusion

syncfusion