Vẽ sơ đồ kiến trúc bằng Claude Code và Draw.io MCP server

Bạn cần một sơ đồ kiến trúc cho tài liệu bàn giao, và Visio thì không có license. Bạn mở PowerPoint, vẽ hộp với mũi tên, export PNG, dán vào Word — file đó sẽ không ai cập nhật nữa.

Draw.io MCP server giải quyết đúng đoạn đó: bạn mô tả hệ thống bằng chữ, Claude Code sinh ra XML Draw.io hợp lệ, và file .drawio nằm trong repo cùng code.

Setup mất bao lâu

Theo bài hướng dẫn của Alex Pechenizkiy trên Dev.to, luồng làm việc gồm bốn bước:

1. Cài Draw.io MCP server và thêm vào file .mcp.json. Server chạy local trên port 3000 và mở một editor dạng browser.
2. Mô tả sơ đồ bạn muốn — ví dụ tác giả dùng: "Create a swimlane diagram showing the performance review process with 4 lanes: Employee, Manager, HR, System." Claude sinh XML.
3. Xem lại sơ đồ ở localhost:3000, chỉnh vị trí hoặc yêu cầu Claude sửa từng element.
4. Copy file .drawio vào thư mục /docs và commit. Từ giờ nó được version cùng code.

Tác giả cho biết toàn bộ quá trình mất dưới một phút cho phần lớn sơ đồ, so với hơn 30 phút làm tay trong Visio hay Lucidchart. Con số cụ thể hơn trong bài: Claude sinh 80% sơ đồ trong 30 giây, bạn mất thêm 5 phút cho 20% còn lại — tổng 6 phút. Đây là số đo của tác giả trên workload của chính anh ta, không phải benchmark.

Loại sơ đồ nào ăn, loại nào không

Bảng đánh giá trong bài chia rõ theo loại sơ đồ:

Loại sơ đồ	Chất lượng	Dùng tốt cho
Swimlane / process flow	Excellent	Quy trình nghiệp vụ, luồng phê duyệt
State machine	Excellent	Luồng trạng thái record, lifecycle
Entity Relationship Diagram	Good	Mô hình dữ liệu, schema
Integration map	Good	System context, kết nối API
Data flow	Good	Mapping source-to-target, pipeline ETL
Sequence diagram	OK	Chuỗi gọi API — bài viết nói Mermaid tốt hơn cho loại này

Nếu bạn chỉ cần sequence diagram, đừng dựng thêm MCP server: theo chính tác giả, Mermaid là lựa chọn tốt hơn và Claude viết Mermaid trực tiếp được.

Ba giới hạn cần biết trước

• Sơ đồ trên 20 element hay bị đè nhau. Bài viết nói bạn phải tự kéo lại bằng tay.
• Vị trí chỉ ở mức gần đúng. Đủ dùng cho sơ đồ làm việc, không đủ cho slide thuyết trình.
• Claude không biết codebase của bạn. Tác giả nhấn mạnh: nó không biết tên bảng hay endpoint API thật của bạn trừ khi bạn dán schema hoặc API spec vào prompt.

Điểm cuối là điều quyết định chất lượng đầu ra. Lời khuyên trong bài: đừng viết "draw an architecture diagram" — hãy liệt kê từng kết nối, giao thức, màu theo nhóm hệ thống, vị trí legend và hướng layout. Càng nhiều context, output càng đúng.

Vì sao đáng thử ở môi trường VN

Bảng so sánh chi phí trong bài: Draw.io + Claude miễn phí, Visio $15/tháng, Lucidchart và Miro $8/tháng, Mermaid miễn phí. Draw.io + Claude thắng ở giá và ở khả năng diff XML trong git; nó thua ở collaboration real-time — bạn cộng tác qua pull request, không phải sửa đồng thời.

Với team VN vốn đã làm tài liệu kiến trúc theo kiểu để trong repo, đánh đổi đó thường có lợi: sơ đồ nằm cùng code, review trong PR, và không phát sinh license theo đầu người. Việc cần làm tiếp: thử với một sơ đồ dưới 20 element trong sprint này, dán schema thật vào prompt, và xem file .drawio diff ra sao ở PR đầu tiên.