drawgent: Biến Claude thành trợ lý vẽ sơ đồ ngay trên bảng trắng Excalidraw

drawgent là một công cụ mã nguồn mở mới cho phép kết nối agent lập trình của bạn — Claude Code, Codex hoặc opencode — trực tiếp với bảng trắng Excalidraw. Thay vì phải mô tả sơ đồ bằng văn bản rồi tự tay vẽ lại, bạn có thể để AI đọc canvas, chỉnh sửa hình vẽ theo thời gian thực và tự xác nhận khi hoàn tất.

Công cụ này đặc biệt hữu ích cho lập trình viên và kỹ sư hệ thống, những người thường xuyên phải phác thảo kiến trúc phần mềm, luồng dữ liệu hoặc sơ đồ mạng trong quá trình làm việc.

Cách hoạt động

drawgent hoạt động dựa trên giao thức ACP (Agent Client Protocol) — kết nối agent của bạn với một canvas Excalidraw đang chạy. Agent sẽ:

• Quan sát canvas thông qua ảnh chụp màn hình và dữ liệu scene
• Chỉnh sửa trực tiếp các phần tử trên bản vẽ
• Kiểm tra kết quả sau khi thao tác
• Đánh dấu DONE trên ghi chú yêu cầu

Bạn có thể tương tác theo hai cách: gõ yêu cầu vào khung chat bên phải, hoặc viết một đoạn text bắt đầu bằng AGENT: ngay cạnh (hoặc bên trong) hình dạng muốn thay đổi. Sau khoảng 2,5 giây kể từ khi bạn ngừng gõ, agent sẽ nhận được ghi chú kèm vị trí, đối tượng nó trỏ tới và các chi tiết xung quanh.

Khi agent xử lý xong, ghi chú sẽ chuyển thành màu xanh với nội dung DONE: .... Muốn gửi lại yêu cầu, bạn chỉ cần sửa lại thành AGENT:.

Các yêu cầu được xếp hàng đợi và thực thi lần lượt — ghi chú đã xử lý sẽ tự động bị bỏ qua.

Bắt đầu nhanh

Điều kiện tiên quyết là bạn cần cài đặt và đăng nhập sẵn một trong ba agent: claude, codex hoặc opencode. Riêng bridge cho Claude và Codex cần Node.js ≥ 18.

drawgent setup claude        # chạy một lần cho mỗi agent
cd ~/my-repo
drawgent up                  # tạo phiên agent mới + mở canvas trên trình duyệt
drawgent up --attach         # hoặc kết nối canvas vào một phiên đang chạy

Lệnh setup sẽ kiểm tra toàn bộ môi trường một lần, báo lỗi kèm cách khắc phục cụ thể khi thiếu thứ gì đó, và ghi cấu hình vào ~/.config/drawgent/config.toml. Công cụ cũng tự phát hiện Chrome/Chromium có sẵn trên máy; nếu không, nó đề xuất tải Chrome Headless Shell (khoảng 120 MB, không cần quyền sudo) hoặc cài Chromium qua trình quản lý gói của hệ điều hành.

Kết nối với phòng excalidraw.com

Một điểm đáng chú ý là drawgent có thể tham gia vào các phòng cộng tác trực tuyến trên excalidraw.com:

drawgent up --room 'https://excalidraw.com/#room=,'

Lúc này agent xuất hiện như một cộng tác viên bình thường (🤖 Agent), với con trỏ di chuyển theo từng thao tác chỉnh sửa. Người dùng vẫn có thể ở lại trên excalidraw.com — ghi chú AGENT: của họ sẽ đến được agent, và các chỉnh sửa của agent hiện lên trực tiếp trên màn hình của họ.

Toàn bộ dữ liệu truyền tải được mã hóa đầu cuối (end-to-end) bằng khóa phòng, trong khi các phòng trống được đọc và lưu vào Firestore của Excalidraw.

Bộ công cụ dành cho agent

drawgent cung cấp một MCP server (Model Context Protocol) với các công cụ canvas chuyên dụng:

• get_scene, get_screenshot — đọc dữ liệu và chụp ảnh canvas kèm khả năng zoom theo element_ids
• add_elements — thêm phần tử Excalidraw, hỗ trợ mũi tên liên kết theo id và định tuyến cạnh-với-cạnh
• add_mermaid — chèn sơ đồ Mermaid với bố cục tự động
• update_elements, delete_elements, clear_canvas — chỉnh sửa, xóa và dọn canvas
• resolve_instruction, set_status — xử lý ghi chú và cập nhật trạng thái

Bên cạnh đó là một REST API và kênh WebSocket (/ws) để đồng bộ trình duyệt và các sự kiện chat.

Một vài hạn chế cần lưu ý

• Renderer hiện yêu cầu Chrome (bản renderer gốc đang được phát triển)
• Cơ chế "attach" của Claude thực chất là tạo một phiên fork, vì Claude Code chưa có cách công khai để can thiệp vào phiên terminal đang chạy
• Attach trực tiếp với Codex đã được triển khai nhưng chưa được kiểm thử với tài khoản Codex đã đăng nhập
• Mỗi workspace chỉ dùng được một scene, và hình ảnh/tệp đính kèm không được đồng bộ

Đánh giá nhanh

drawgent là một ví dụ thú vị cho xu hướng "agent sống trong công cụ" — thay vì chỉ trả lời trong terminal, AI giờ đây có thể thao tác trực tiếp trên các bề mặt trực quan như bảng trắng. Với các nhóm phát triển phần mềm ở Việt Nam đang dần đưa AI vào quy trình thiết kế và tài liệu hóa kiến trúc, những công cụ như thế này có thể giúp tiết kiệm đáng kể thời gian vẽ và chỉnh sửa sơ đồ thủ công.

Dự án viết bằng Rust ở phần lõi, với giao diện web dùng React/JSX, và có thể chạy thử nhanh thông qua Docker Compose hoặc build trực tiếp từ mã nguồn.