TL;DR: Tired of manually sketching mind maps from raw ideas? This guide helps you build an AI-powered tool that transforms structured text into interactive diagrams using OpenAI and Vue.js. You’ll learn how to extract semantic meaning from user input, convert it into Mermaid syntax, and render it visually with a Vue diagramming component, automating the entire workflow. Ideal for developers looking to streamline brainstorming, visualize architecture, or supercharge planning with intelligent automation.
AI-powered mind mapping: Create interactive diagrams with OpenAI and Vue
Mind maps are powerful tools for organizing ideas, planning projects, and visualizing complex relationships, but creating them manually can be slow and repetitive. What if you could describe your thoughts in plain text and let AI do the rest?
In this blog, you’ll learn how to build an AI-powered mind mapping tool using OpenAI and Vue.js. By combining natural language processing with Mermaid syntax and a Vue Diagram library, we’ll automate the transformation of structured text into dynamic, interactive diagrams.
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.
Step 1: Set up the Vue project
First, create a Vue project using the following commands.
npm create vue@latest smart-mindmap-vue
cd smart-mindmap-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 AI capabilities, configure the Azure OpenAI service by setting up your resource name, API key, and AI model. The following code snippet 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: Replace the RESOURCE_NAME, API_KEY, and MODEL_NAME with your Azure AI service details.
Step 3: Configure the Vue diagram library
To render the AI-generated mind map visually, we’ll use a Vue-based diagramming tool that supports interactive editing and customization. This component offers a comprehensive API for creating, styling, and managing diagrams, making it an ideal tool for building dynamic mind maps.
In your App.vue file, define and configure the diagram component. It will serve as the visual canvas where structured data from OpenAI is transformed into interactive mind maps using Mermaid syntax.
<ejs-diagram ref="diagram"
width='100%'
height='900px'
:selectionChange='selectionChange'
:historyChange='historyChange'
onUserHandleMouseDown='onUserHandleMouseDown'
:tool='diagramTool'
:snapSettings='{ horizontalGridlines: gridlines, verticalGridlines: gridlines }'
:scrollSettings="{ scrollLimit: 'Infinity' }"
:layout="diagramLayout"
:selectedItems='selectedItems'
:dataSourceSettings="{ id: 'id', parentId: 'parentId', dataSource: items, root: String(1) }"
:rulerSettings="{ showRulers: true }"
:scrollChange="scrollChange"
:getNodeDefaults="getNodeDefaults"
:getConnectorDefaults="getConnectorDefaults"
:dragEnter="dragEnter">
</ejs-diagram>
Step 4: Create an AI-assist dialog for user input
We create a dialog that lets users input structured text, choose from suggested prompts, and trigger OpenAI to generate mind map data.
<ejs-dialog ref='dialog'
header='header'
:showCloseIcon='true'
:isModal='true'
content='content'
target='.control-section'
width='540px'
:visible='false'
height='310px'>
<template #header>
<span class="e-icons e-aiassist-chat"
style="color: black;width:20px; font-size: 16px;"></span>
AI Assist
</template>
<template #content>
<p style="margin-bottom: 10px;font-weight:bold;">Suggested Prompts</p>
<ejs-button id="btn1"
@click="btnClick"
style="flex: 1; overflow: visible; border-radius: 8px;margin-bottom: 10px;">
Mindmap for top tourist places in the world
</ejs-button>
<ejs-button id="btn2"
@click="btnClick"
style="flex: 1; overflow: visible; border-radius: 8px;margin-bottom: 10px;">
Mindmap for categories of topics in science
</ejs-button>
<ejs-button id="btn3"
@click="btnClick"
style="flex: 1; overflow: visible; border-radius: 8px;margin-bottom: 10px;">
Mindmap for different components in syncfusion
</ejs-button>
<div style="display: flex; align-items: center; margin-top: 20px;"&g
<ejs-textbox type="text"
ref="textBox"
id="textBox"
class="db-openai-textbox"
style="flex: 1;"
:input='onTextBoxChange' />
<ejs-button ref="sendButton"
iconCss='e-icons e-send'
:isPrimary='true'
:disabled='true'
id="db-send"
style="margin-left: 5px; height: 32px; width: 32px;"
@click='dbSend'>
</ejs-button>
</div>
</template>
</ejs-dialog>
In the app.vue 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 a flowchart
dbSend: function () {
this.$refs.dialog.ej2Instances.hide();
this.convertTextToFlowChart(this.$refs.textBox.ej2Instances.value);
},
// Send the user-selected suggested prompt to OpenAI to generate a flowchart
btnClick: function (e: Event) {
let element = e.target as HTMLButtonElement;
this.$refs.dialog.ej2Instances.hide();
this.convertTextToFlowChart(element.innerText);
}
// Handle textbox input change
onTextBoxChange: function (args: InputEventArgs) {
if (args.value !== '') {
this.$refs.sendButton.ej2Instances.disabled = false;
} else {
this.$refs.sendButton.ej2Instances.disabled = true;
}
},
Step 5: Integrating OpenAI for text-to-mind map conversion
We implement the convertTextToMindMap function that acts as the main driver to transform AI-generated text into a mind map using our Vue Diagram’s API.
convertTextToFlowChart: aync function (inputText: string) {
const diagram = this.$refs.diagram.ej2Instances;
const toolbarObj = this.$refs.toolbar.ej2Instances;
this.showLoading();
const options = {
messages: [
{
role: 'system',
content: 'You are an assistant tasked with generating a mermaid mindmap diagram data source based on user queries with space indentation'
},
{
role: 'user',
content: `Generate only the Mermaid mindmap code for the subject titled "${inputText}". Use the format provided in the example below, but adjust the steps, shapes, and indentation according to the new title:
**Example Title:** Organizational Research
**Example Steps and Mermaid Code:**
mindmap
root(Mobile Banking Registration)
User(User)
PersonalInfo(Personal Information)
Name(Name)
DOB(Date of Birth)
Address(Address)
ContactInfo))Contact Information((
Email(Email)
Phone(Phone Number)
Account[Account]
AccountType[Account Type]
Savings[Savings]
Checking[Checking]
AccountDetails(Account Details)
AccountNumber(Account Number)
SortCode(Sort Code)
Security{{Security}}
Authentication(Authentication)
Password(Password)
Biometrics(Biometrics)
Fingerprint(Fingerprint)
FaceID(Face ID)
Verification)Verification(
OTP)OTP(
SecurityQuestions)Security Questions(
Terms(Terms & Conditions)
AcceptTerms(Accept Terms)
PrivacyPolicy(Privacy Policy)`
}
],
}
try {
let jsonResponse = await getAzureChatAIRequest(options);
jsonResponse = jsonResponse.replace('```
mermaid', '').replace('
```', '');
diagram.loadDiagramFromMermaid(jsonResponse);
diagram.clearHistory();
this.pushWorkingData();
toolbarObj.items[0].disabled = true;
this.hideLoading();
} catch (error) {
console.error('Error:', error);
this.convertTextToFlowChart(inputText);
}
},
Note: Please ensure the generated code matches the title ${inputText} and adheres to the format provided above. Provide only the Mermaid mindmap code, without any additional explanations, comments, or text.
The core function convertTextToMindMap sends a request to the OpenAI API, which returns Mermaid-structured data. Then this data is passed to the Vue Diagram’s loadDiagramFromMermaid method to render the mind map.
Once executed, the diagram resembles the mind map below.
GitHub reference
For more details, refer to the GitHub demo.
Conclusion
Thank you for reading! AI-powered mind mapping bridges the gap between raw ideas and structured visuals. By integrating OpenAI with the Vue Diagram library, developers can automate diagram creation and streamline workflows. Try building your own version and explore how AI can enhance your development toolkit.
If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day trial.
You can also contact us through our support forum, support portal, or feedback portal for queries. We are always happy to assist you!
Related Blogs
- Create Interactive UML Activity Diagrams in Vue with Ease
- How to Build an AI Text-to-Flowchart Converter Using OpenAI and Vue Diagram
- Easily Create Interactive Floor Planner Diagrams in Vue
- Build Smart Diagrams with an AI Flowchart Generator Using WPF and OpenAI
This article was originally published at Syncfusion.com.
Top comments (0)