Next AI Draw.io: Công cụ tạo sơ đồ draw.io bằng AI
DayuanJiang/next-ai-draw-ioNext AI Draw.io là một công cụ tạo sơ đồ draw.io bằng AI mã nguồn mở, dựng trên Next.js. Bạn mô tả sơ đồ bằng lời trong một khung chat, và nó viết XML draw.io ở phía sau — nên kết quả mở ra như một sơ đồ draw.io bình thường, có thể chỉnh sửa, chứ không phải một ảnh phẳng bạn không đụng vào được.
Hãy chọn Next AI Draw.io nếu bạn muốn đi từ một câu như 'kiến trúc RAG cho app chat' tới một sơ đồ draw.io chỉnh sửa được, và bạn không ngại tự nối LLM của mình (OpenAI, Anthropic, Bedrock, Ollama, v.v.). Bỏ qua nếu bạn muốn một sản phẩm host sẵn không cần API key, hoặc cần một canvas vẽ tự do thay vì kiểu hộp-và-đường-nối của draw.io — đây là một front-end Next.js quanh XML draw.io, nên bạn thừa hưởng cả điểm mạnh lẫn giới hạn của draw.io.
Vấn đề nó giải quyết
Biến một ý tưởng thành sơ đồ thường có nghĩa là kéo thả hộp và đường nối bằng tay trong một công cụ như draw.io. Các trình sinh ảnh AI chung chung có thể vẽ ra thứ trông giống sơ đồ, nhưng bạn không mở ra và di chuyển một node được — đó là một bức ảnh, không phải một đồ thị. Cái còn thiếu là AI xuất ra đúng định dạng sơ đồ để bạn tiếp tục chỉnh sau đó.
Đây là gì?
Next AI Draw.io là một công cụ tạo sơ đồ draw.io bằng AI mã nguồn mở (giấy phép Apache-2.0) viết bằng TypeScript. Nó là một web app Next.js ghép một giao diện chat với trình chỉnh sửa draw.io nhúng qua component react-drawio. Bạn gõ lệnh bằng ngôn ngữ tự nhiên, AI sinh hoặc sửa XML draw.io nền tảng bằng Vercel AI SDK, và sơ đồ cập nhật trực tiếp trên canvas. Vì đầu ra là XML draw.io thật, bạn có thể chỉnh bằng tay hoặc nhờ AI thay đổi tiếp. Nó theo kiểu tự-mang-model và hỗ trợ nhiều nhà cung cấp, với AWS Bedrock là mặc định.
Vì sao đang được chú ý
Lời chào chạm đúng vì nó lấp một khoảng trống cụ thể: AI viết XML draw.io chỉnh sửa được thay vì một ảnh tĩnh. Repo báo hơn 33.000 sao GitHub và mang huy hiệu Trendshift trong README, và nó nghiêng về những thứ lập trình viên hay hỏi — một MCP server để Claude, Cursor hay VS Code tạo sơ đồ, hỗ trợ đa nhà cung cấp rộng gồm cả model Ollama chạy cục bộ, và một bản demo trực tiếp bạn thử được mà không cần cài gì.
Tính năng chính
- ✓Sinh và sửa sơ đồ draw.io từ lệnh ngôn ngữ tự nhiên, xuất ra XML draw.io thật mà bạn có thể tiếp tục chỉnh
- ✓Tái tạo dựa trên ảnh: tải lên một sơ đồ hoặc ảnh có sẵn và để AI dựng lại, theo README
- ✓Tải lên PDF và file văn bản để rút nội dung từ tài liệu và biến thành sơ đồ
- ✓Lịch sử sơ đồ với quản lý phiên bản, nên bạn khôi phục được phiên bản trước một lần AI sửa
- ✓Hỗ trợ chuyên biệt cho sơ đồ kiến trúc đám mây (AWS, GCP, Azure), cùng các đường nối động
- ✓Một MCP server để agent AI như Claude Desktop, Cursor và VS Code điều khiển việc tạo sơ đồ
- ✓Tự-mang-model xuyên nhiều nhà cung cấp (Bedrock mặc định, OpenAI, Anthropic, Google, Azure, Ollama, OpenRouter, DeepSeek, và hơn nữa)
Trường hợp dùng tốt nhất
- •Phác thảo sơ đồ kiến trúc phần mềm và đám mây (AWS/GCP/Azure) từ một mô tả bằng chữ, rồi dọn lại bằng tay
- •Biến một bản spec PDF hay ghi chú thành sơ đồ bản nháp đầu tiên thay vì bắt đầu từ canvas trắng
- •Dựng lại một sơ đồ bạn chỉ có dưới dạng ảnh để nhận lại một bản chỉnh sửa được
- •Để một agent AI trong Cursor, VS Code hay Claude Desktop tạo sơ đồ qua MCP trong lúc bạn làm việc
- •Tự host một trợ lý sơ đồ nói chuyện với model Ollama cục bộ khi dữ liệu không được rời mạng của bạn
Cách cài đặt / dùng thử
Thử trước trên bản demo host sẵn tại next-ai-drawio.jiang.jp mà không cần cài. Để tự chạy, clone repo và dùng Node: `git clone https://github.com/DayuanJiang/next-ai-draw-io`, `cd next-ai-draw-io`, `npm install`, rồi `cp env.example .env.local` và thêm key nhà cung cấp của bạn (xem Provider Configuration Guide trong README). Khởi động bằng `npm run dev` và mở http://localhost:6002. Cũng có app desktop dựng sẵn cho Windows, macOS và Linux ở trang Releases, một hướng dẫn Docker, và các nút deploy một-cú-nhấp lên Vercel, Tencent EdgeOne Pages và Cloudflare Workers.
Cách sử dụng
Mở app, chọn một nhà cung cấp và dán API key trong Settings (hoặc đặt model phía server qua biến môi trường để người dùng không cần key riêng). Gõ một lệnh trong khung chat — các ví dụ trong README gồm 'Generate a RAG architecture diagram for a chat application' và 'Generate authentication using React with AWS, use serverless architecture.' AI viết XML draw.io và sơ đồ hiện ra trên canvas, nơi bạn chỉnh node trực tiếp hoặc nhờ sửa thêm. Để nối MCP server vào Claude Code, README chỉ: `claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest`.
Điểm mạnh
- ✓Đầu ra là XML draw.io chỉnh sửa được, không phải một ảnh phẳng — bạn tinh chỉnh bằng tay hoặc lặp cùng AI
- ✓Thực sự không phụ thuộc nhà cung cấp: nhiều model host sẵn cộng Ollama cục bộ, key lưu trong trình duyệt trên bản demo
- ✓MCP server cho phép các công cụ agent sẵn có (Claude, Cursor, VS Code) tạo sơ đồ mà không rời trình chỉnh sửa
- ✓Những phần tiện dụng ngoài lệnh chữ — tái tạo từ ảnh, nạp PDF/văn bản, và lịch sử phiên bản sơ đồ
- ✓Nhiều lối triển khai (tự host, Docker, app desktop, Vercel/EdgeOne/Cloudflare) dưới giấy phép Apache-2.0 dễ chịu
Hạn chế & rủi ro
- △Bạn tự mang và trả tiền cho LLM — không có model đóng gói sẵn, và bản demo host sẵn có giới hạn dùng trừ khi bạn thêm key của mình
- △Chất lượng sơ đồ thay đổi theo model: README khuyên dùng model mạnh (Claude Sonnet 4.5, GPT-5.1, Gemini 3 Pro, DeepSeek V3.2/R1) cho định dạng XML nghiêm ngặt, và ghi chú Claude tốt nhất cho logo kiến trúc đám mây
- △Bạn bị buộc vào stack XML draw.io và Next.js — tuyệt cho sơ đồ hộp-và-đường-nối, kém hơn cho hình vẽ tự do hay tùy biến cao
- △Đây là dự án của một người bảo trì (demo chạy bằng tài trợ), nên site host sẵn và lộ trình phụ thuộc vào việc hỗ trợ đó tiếp tục
- △Những phần như admin panel và cấu hình multi-model phía server thêm khá nhiều thiết lập một khi bạn vượt quá bước khởi đầu một-key
Lựa chọn thay thế
Ai nên thử — và ai nên bỏ qua
Lập trình viên và kiến trúc sư sống trong draw.io và muốn một lối tắt AI cho bản nháp sơ đồ đầu tiên, nhất là sơ đồ kiến trúc đám mây, trong khi vẫn giữ kết quả chỉnh sửa được đầy đủ. Nó hợp các đội đã có sẵn nhà cung cấp LLM (hoặc muốn chạy Ollama cục bộ) và thoải mái tự host một app Next.js. Nếu bạn muốn một sản phẩm host sẵn bóng bẩy không phải quản key, hoặc một canvas vẽ tự do, hãy xem một công cụ thương mại như Eraser hay một bảng trắng như Excalidraw.
Câu hỏi thường gặp
Next AI Draw.io là một công cụ tạo sơ đồ draw.io bằng AI mã nguồn mở — một web app Next.js biến lệnh ngôn ngữ tự nhiên thành sơ đồ draw.io chỉnh sửa được bằng cách để một LLM viết XML draw.io nền tảng, rồi hiển thị trực tiếp trong trình chỉnh sửa nhúng.
Nó theo kiểu tự-mang-model. README liệt kê AWS Bedrock (mặc định), OpenAI, Anthropic, Google AI/Vertex, Azure OpenAI, Ollama, OpenRouter, DeepSeek và hơn nữa, và khuyên dùng model mạnh như Claude Sonnet 4.5 hay GPT-5.1 cho định dạng XML nghiêm ngặt.
Được. Nó đi kèm một MCP server, nên các agent như Claude Desktop, Cursor và VS Code tạo sơ đồ được. Với Claude Code, README chỉ: claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest.
Mã nguồn mở dưới Apache-2.0 và bạn tự host được (clone và npm run dev, Docker, hoặc deploy lên Vercel/EdgeOne/Cloudflare). Bạn vẫn trả tiền nhà cung cấp LLM của mình, và bản demo công khai có giới hạn dùng trừ khi bạn thêm API key riêng.
Các trình sinh ảnh chung chung tạo ra một bức ảnh tĩnh bạn không sửa được. Next AI Draw.io sinh XML draw.io thật, nên đầu ra mở ra như một sơ đồ chỉnh sửa được, nơi bạn di chuyển node, chỉnh tay, hoặc nhờ AI sửa lại.