blazor development smartaicomponents web

Tạo Sơ Đồ Tư Duy AI-Powered "Cực Chất" Với OpenAI và Blazor Diagram!

Lê Lân

23/06/2025

Tạo Sơ Đồ Tư Duy AI Với OpenAI và Thư Viện Blazor Diagram: Hướng Dẫn Chi Tiết

Mở Đầu

Trong thời đại số, việc tổ chức và trình bày ý tưởng một cách trực quan là một trong những yếu tố then chốt để nâng cao hiệu quả làm việc và sáng tạo. Sơ đồ tư duy (mind map) là công cụ tuyệt vời giúp người dùng xây dựng và liên kết các ý tưởng phức tạp một cách dễ hiểu và sinh động.

Việc tự động tạo ra các sơ đồ tư duy từ nội dung văn bản không chỉ tiết kiệm thời gian mà còn nâng cao khả năng phản biện và truyền tải thông tin. Bài viết này sẽ hướng dẫn bạn cách kết hợp sức mạnh của OpenAI với thư viện Blazor Diagram của Syncfusion để xây dựng ứng dụng tạo sơ đồ tư duy thông minh, từ đó chuyển đổi các mô tả bằng văn bản thành các sơ đồ tương tác sinh động.

Bạn sẽ được tìm hiểu từ khởi tạo dự án Blazor, tích hợp dịch vụ AI, đến cách hiển thị và tương tác với sơ đồ tư duy ngay trên trình duyệt. Hãy bắt đầu khám phá cùng chúng tôi!

1. Các Yếu Tố Cần Chuẩn Bị

1.1 Cài Đặt Môi Trường Phát Triển

Để bắt đầu, bạn cần:

Cài đặt .NET 8 hoặc .NET 9 SDK, tải tại dotnet.microsoft.com hoặc .NET 9 .

Tạo một dự án Blazor Web App với server interactivity hoặc Blazor Server App.

Đăng ký tài khoản OpenAI hoặc Azure OpenAI để lấy API key. Hướng dẫn tạo API key tại OpenAI Help hoặc Azure OpenAI .

<b>Lưu ý: </b>Chọn phiên bản API và mô hình AI (GPT-3.5, GPT-4,...) phù hợp tùy theo mục đích sử dụng.

2. Tổng Quan Quy Trình Hoạt Động

2.1 Luồng Xử Lý Cơ Bản

Đầu vào người dùng: Người dùng nhập mô tả hoặc từ khóa muốn hình dung dưới dạng sơ đồ tư duy.

Xử lý AI: Dữ liệu đầu vào được gửi đến OpenAI để xử lý và trả về dữ liệu sơ đồ có cấu trúc dạng văn bản được định dạng theo chuẩn Mermaid.

Hiển thị sơ đồ: Thư viện Blazor Diagram nhận dữ liệu Mermaid và render sơ đồ tư duy tương tác trực quan trong ứng dụng.

2.2 Tích Hợp OpenAI và Blazor Diagram

Việc kết hợp này giúp tự động hoá quy trình chuyển ý tưởng từ dạng text thành sơ đồ, nâng cao trải nghiệm người dùng trong quản lý dự án, học tập hay brainstorming.

3. Hướng Dẫn Xây Dựng Ứng Dụng Mind Map AI

3.1 Bước 1: Tạo Dự Án Blazor Mới

Bạn có thể tạo nhanh Blazor Server App thông qua Visual Studio bằng các template chính thức hoặc sử dụng tiện ích mở rộng Syncfusion Blazor Extension.

3.2 Bước 2: Cài Đặt NuGet Packages

Mở NuGet Package Manager, tìm và cài đặt hai gói sau với phiên bản mới nhất:

Package	Mục đích
Syncfusion.Blazor.Diagram	Thư viện tạo sơ đồ tương tác
Syncfusion.Blazor.Themes	Giao diện theme cho component

Hoặc sử dụng dòng lệnh:

Install-Package Syncfusion.Blazor.Diagram -Version 27.1.48
Install-Package Syncfusion.Blazor.Themes -Version 27.1.48

Bạn nên giữ các gói này cập nhật để tận dụng tính năng mới và sửa lỗi.

3.3 Bước 3: Đăng Ký Dịch Vụ Syncfusion Blazor

Trong file Program.cs , thêm đoạn cấu hình sau để đăng ký Syncfusion Blazor Service:

builder.Services.AddSyncfusionBlazor();

Đồng thời, đã có sẵn dịch vụ cho Razor Pages và Blazor Server như:

builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

3.4 Bước 4: Cấu Hình Dịch Vụ AI

Tạo một class quản lý tương tác với OpenAI có cấu trúc cơ bản như sau:

public class DiagramOpenAIService
{
    private readonly HttpClient _httpClient;
    private readonly string _apiKey;
    private readonly string _deploymentName;

    public DiagramOpenAIService(HttpClient httpClient, string apiKey, string deploymentName)
    {
        _httpClient = httpClient;
        _apiKey = apiKey;
        _deploymentName = deploymentName;
    }

    // Các phương thức xử lý API sẽ ở bước sau.
}

Trong Program.cs , đăng ký dịch vụ này cùng với các cấu hình cho API key, endpoint và deployment:

string apiKey = "your-api-key";
string deploymentName = "your-deployment-name";
string endpoint = "your-endpoint-url";

builder.Services.AddTransient<DiagramOpenAIService>(service =>
{
    var httpClient = new HttpClient { BaseAddress = new Uri(endpoint) };
    return new DiagramOpenAIService(httpClient, apiKey, deploymentName);
});

Lưu ý:

3.5 Bước 5: Thêm Style và Script Cho Giao Diện

Chèn các tham chiếu stylesheet và script trong file App.razor hoặc trang chính:

<head>
  <link href="_content/Syncfusion.Blazor.Themes/tailwind.css" rel="stylesheet" />
</head>
<body>
  <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</body>

3.6 Bước 6: Cấu Hình Thư Viện Blazor Diagram

Trong trang Index.razor , khai báo và cấu hình component diagram:

@using Syncfusion.Blazor.Diagram

<SfDiagramComponent @ref="Diagram" Width="100%" Height="700px"
  @bind-Nodes="nodes"
  @bind-Connectors="connectors"
  ScrollChanged="ScrollChanged"
  CollectionChanging="CollectionChanging"
>
    <Layout Type="LayoutType.MindMap" HorizontalSpacing="@HorizontalSpacing" VerticalSpacing="@VerticalSpacing"></Layout>
    <ScrollSettings ScrollLimit="@scrollLimit" CurrentZoom="@CurrentZoom" MaxZoom="@maxZoom" MinZoom="@minZoom"/>
    <SnapSettings Constraints="@SnapConstraint"></SnapSettings>
    <PageSettings MultiplePage="true"></PageSettings>
    <CommandManager Commands="@commands" Execute="@ExecuteCommand" CanExecute="@CanExecute"></CommandManager>
</SfDiagramComponent>

Chú ý: Thư viện hỗ trợ nhiều sự kiện và tính năng như kéo thả, undo/redo, phóng to thu nhỏ,… giúp sơ đồ linh hoạt và thân thiện người dùng.

3.7 Bước 7: Tạo Dialog Giao Diện AI Assist Để Nhận Nhập Liệu

Sử dụng các component từ Syncfusion như SfDialog , SfButton và SfTextBox tạo hộp thoại nhập prompt và gợi ý có sẵn:

<SfFab IconCss="e-icons e-ai-chat" Content="AI Assist" OnClick="OnFabClicked"></SfFab>

<SfDialog Width="570px" IsModal="true" ShowCloseIcon="true" CssClass="custom-dialog" Visible="@ShowAIAssistDialog">
    <DialogTemplates>
        <Header><span class="e-icons e-ai-chat"></span> AI Assist</Header>
        <Content>
            <p>Suggested Prompts</p>
            <SfButton @onclick="() => GenerateMindMap(MobileBankingPrompt)">Mindmap diagram for Mobile banking registration</SfButton>
            <SfButton @onclick="() => GenerateMindMap(OrganizationalResearchPrompt)">Mindmap diagram for Organizational research</SfButton>
            <SfButton @onclick="() => GenerateMindMap(MeetingAgendaPrompt)">Mindmap diagram for Meeting agenda</SfButton>

            <div style="display: flex; margin-top:20px;">
                <SfTextBox @bind-Value="OpenAIPrompt" Placeholder="Enter your prompt..."></SfTextBox>
                <SfButton @onclick="GenerateTextToMindmap" IsPrimary="true" CssClass="e-icons e-send"></SfButton>
            </div>
        </Content>
    </DialogTemplates>
    <DialogEvents Closed="DialogClose"></DialogEvents>
</SfDialog>

Kèm theo logic tương tác trong code-behind hoặc phần @code :

public bool ShowAIAssistDialog { get; set; } = false;
public string OpenAIPrompt { get; set; }

public void OnFabClicked()
{
    ShowAIAssistDialog = !ShowAIAssistDialog;
}

public void DialogClose(object args)
{
    ShowAIAssistDialog = false;
}

public async void GenerateMindMap(string value)
{
    OpenAIPrompt = value;
    await GenerateTextToMindmap();
}

public async Task GenerateTextToMindmap()
{
    ShowAIAssistDialog = false;
    await ChatGptService.ConvertTextToMindMap(OpenAIPrompt, Diagram);
}

3.8 Bước 8: Kết Nối OpenAI Cho Chức Năng Chuyển Text Thành Mind Map

Các logic chính của dịch vụ DiagramOpenAIService bao gồm:

public async Task ConvertTextToMindMap(string prompt, SfDiagramComponent Diagram)
{
    var requestContent = new
    {
        messages = new[]
        {
            new { role = "system", content = "You are an expert in creating mind map diagram data sources. Generate a structured data source for a mind map based on the user's query, using tab indentation to indicate hierarchy. The root parent should have no indentation, while each subsequent child level should be indented by one tab space. Avoid using any symbols such as '+' or '-' before any level of data." },
            new { role = "user", content = $"Generate the mindmap diagram data source for the following prompt: {prompt}." }
        },
        max_tokens = 500,
        temperature = 0.9
    };

    var requestBody = new StringContent(JsonSerializer.Serialize(requestContent), Encoding.UTF8, "application/json");

    var requestMessage = new HttpRequestMessage(HttpMethod.Post, $"openai/deployments/{_deploymentName}/chat/completions?api-version=2023-05-15")
    {
        Content = requestBody
    };

    requestMessage.Headers.Add("api-key", _apiKey);

    var response = await _httpClient.SendAsync(requestMessage);
    response.EnsureSuccessStatusCode();

    var responseContent = await response.Content.ReadAsStringAsync();
    var jsonResponse = JsonDocument.Parse(responseContent);
    var mermaidData = jsonResponse.RootElement.GetProperty("choices")[0].GetProperty("message").GetProperty("content").GetString();

    await Diagram.LoadDiagramFromMermaidAsync(mermaidData);
}

Giải thích: Mã sẽ gửi yêu cầu chat completion đến OpenAI, nhận về dữ liệu Mermaid thể hiện sơ đồ tư duy có cấu trúc phân cấp theo định dạng tab, sau đó dùng thư viện Blazor Diagram để load và hiển thị.

4. Tham Khảo Mã Nguồn GitHub

Bạn có thể xem chi tiết demo nguồn mở tại: AI-powered mind map creation trên GitHub

Kết Luận

Trong bài viết này, chúng ta đã cùng nhau khám phá cách xây dựng một ứng dụng tạo sơ đồ tư duy thông minh tích hợp AI, sử dụng OpenAI và thư viện Blazor Diagram của Syncfusion. Việc này giúp các nhà phát triển ứng dụng nhanh chóng nâng cao trải nghiệm người dùng, hỗ trợ trong việc tổ chức và triển khai ý tưởng một cách trực quan và hiệu quả hơn.

Bạn đọc hãy thử áp dụng và chia sẻ trải nghiệm cũng như ý kiến đóng góp để hoàn thiện giải pháp này hơn nữa!

Tham Khảo

Syncfusion Blazor Diagram Documentation

Azure OpenAI Documentation

OpenAI API Key Help

Mermaid Mindmap Syntax

Syncfusion Blazor Themes

GitHub Source Code