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:
- 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 a Mermaid structured data representing the mind map’s nodes and connections.
- 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.
- Install Angular CLI
npm install -g @angular/cli
- Create the Angular project
ng new smart-mindmap cd smart-mindmap
- 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.
GitHub reference
For more details, refer to the AI-assisted smart mind map creation using the Angular Diagram Library GitHub demo.
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 forum, feedback portal, or support portal. We are always happy to assist you!
