AI-Assisted Mind Mapping: Create Interactive Diagrams with OpenAI and Angular | Syncfusion Blogs
Detailed Blog page Skeleton loader
Download PDF
AI-Assisted Mind Mapping: Create Interactive Diagrams with OpenAI and Angular

TL;DR: Learn to create an AI-assisted mind map using OpenAI and the Angular Diagram Library. This guide covers setting up the Angular project, integrating OpenAI for text-to-mind map conversion, and rendering dynamic diagrams. You’ll learn to configure AI services, structure mind map data, and display interactive visualizations.

In today’s fast-paced world, organizing ideas and concepts efficiently is crucial for effective brainstorming and project planning. Mind maps offer a visual representation of information, making comprehending complex relationships and hierarchies easier.

Integrating OpenAI’s powerful language capabilities with the Syncfusion Angular Diagram library allows developers to automate the creation of dynamic, interactive mind maps from simple textual descriptions.

Let’s see how to create an AI-assisted mind map using the OpenAI and our Angular Diagram library.

Prerequisites

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

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

Creating an AI-assisted mind map involves the following key steps:

  1. User input: The user provides a textual description or keywords related to the concepts they wish to visualize.
  2. AI processing: The input text is sent to OpenAI, which processes it to generate a Mermaid structured data representing the mind map’s nodes and connections.
  3. Diagram rendering: The generated data is then used by the Angular Diagram component to render the interactive mind map within the Angular app.

This seamless integration allows users to effortlessly transform their ideas into visually appealing mind maps.

Creating an AI-assisted mind map using OpenAI and Angular Diagram Library

Step 1: Set up the Angular project

Start by creating a new Angular project and installing the required dependencies using the following commands.

  1. Install Angular CLI
    npm install -g @angular/cli
  1. Create the Angular project
    ng new smart-mindmap
    cd smart-mindmap
  1. Install Syncfusion 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;
    }
}

Note: Ensure you replace the RESOURCE_NAME, API_KEY, and MODEL_NAME with your 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 mind maps easy.

In the app.components.html file, define and configure the Angular Diagram component, which will be the core of our mind map 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 mind map layout, ruler settings, snap settings, scroll settings, and some event bindings.

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

Now, create a dialog for AI-assisted mind map generation, including suggested prompts, a text box to get the user input, and a button to send the 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, set up event listeners and handlers to manage user interactions, such as entering a prompt and triggering text conversion to a mind map.

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

// Send the user selected suggested prompt to OpenAI to generate 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-mind map conversion

Then, implement the convertTextToMindMap function that acts as the main driver to transform AI-generated text into a mind map using our Angular Diagram’s 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 convertTextToMindMap sends a request to the OpenAI API with a user-initiated prompt to generate Mermaid structured mind map data from text descriptions. It then uses the Angular Diagram’s loadDiagramFromMermaid method to render the mind map.

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

Creating an AI-assisted mind map using OpenAI and Angular Diagram Library
Creating an AI-assisted mind map using OpenAI and Angular Diagram Library

GitHub reference

For more details, refer to the AI-assisted smart mind map creation using the Angular Diagram Library GitHub demo.

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

Conclusion

Thank you for reading! Integrating OpenAI with the Syncfusion Angular Diagram Library unlocks the potential of AI-assisted mind mapping, making idea visualization seamless and efficient. By following the steps outlined, you can transform textual descriptions into structured, interactive mind maps with minimal effort. This combination enhances productivity, streamlines brainstorming sessions, and brings clarity to complex concepts. Try it out today and elevate your diagramming experience with AI-powered automation!

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 new features.

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

Be the first to get updates

Sarathkumar V

Meet the Author

Sarathkumar V

Sarathkumar is a Product Manager for Diagram and HeatMap products at Syncfusion. He has been a .NET developer since 2013. He is specialized in WPF, UWP, Xamarin and other .Net frameworks.