# Trình tạo sơ đồ hệ thống

URL: https://discuvr.org/system-diagram/?hl=vi
Last updated: 2026-11-08
MCP tool: `draw_system_diagram`

Vẽ sơ đồ kiến trúc và luồng bằng cách gõ A -> B. Tự động bố cục, nhóm thu gọn được, đánh số bước, xuất PNG và SVG.

Trên công cụ bảng trắng, bạn tự vẽ từng hộp, từng mũi tên rồi căn chỉnh bằng tay. Ở đây bạn gõ cái gì nói chuyện với cái gì, mỗi mũi tên một dòng, và bố cục tự hình thành. Gom các dịch vụ liên quan vào một nhóm rồi thu gọn thành một hộp khi cần nhìn tổng thể; mở lại để xem chi tiết.

## Chức năng

- Bố cục tự động, trái sang phải hoặc trên xuống dưới, cập nhật ngay khi bạn gõ.
- Hình dạng chọn theo tên: DB là cơ sở dữ liệu, Kafka là hàng đợi, User là người, tên kết thúc bằng ? là điểm quyết định.
- Nhóm thu gọn thành một hộp, để một sơ đồ dùng được cho cả cái nhìn tổng quan lẫn chi tiết.
- Kéo, nối, đổi tên và thêm hộp ngay trên khung vẽ; mọi thay đổi được ghi lại vào văn bản.
- Đánh số bước, kiểu vẽ tay, xuất PNG và SVG, liên kết chia sẻ. Không tải lên gì cả.

## Cách thức hoạt động

1. Gõ các dòng như User -> Web App -> Orders DB hoặc bắt đầu từ mẫu.
2. Thêm nhóm bằng Tên { ... }, nhãn sau dấu hai chấm và --> cho lời gọi bất đồng bộ.
3. Chuyển giữa Tổng quan và Chi tiết, kéo để sắp hộp, rồi xuất hoặc sao chép liên kết.

## Câu hỏi

**Khác gì so với Excalidraw?**

Excalidraw là bảng trắng tự do: bạn tự đặt từng hình và mũi tên. Ở đây văn bản chính là sơ đồ và bố cục tự động, nên thêm một dịch vụ chỉ là một dòng thay vì vẽ và căn lại hộp. Với bản phác thảo tự do, Excalidraw vẫn phù hợp hơn.

**Làm sao hiển thị cả tổng quan lẫn chi tiết?**

Đặt các hộp liên quan vào một nhóm bằng Tên { ... }. Tổng quan thu gọn mỗi nhóm thành một hộp và gộp các mũi tên; Chi tiết mở lại. Bạn cũng có thể thu gọn từng nhóm từ tiêu đề của nó.

**Sơ đồ của tôi có được lưu ở đâu không?**

Không. Sơ đồ được vẽ trong trình duyệt và lưu trong bộ nhớ cục bộ của nó. Liên kết chia sẻ mang sơ đồ ngay trong liên kết, sau dấu #, phần mà trình duyệt không bao giờ gửi lên máy chủ.

**Tôi có dán được lưu đồ Mermaid không?**

Không trực tiếp; không có chức năng nhập Mermaid. Các dòng đơn giản như A -> B vẫn dùng được, nhưng có ba điểm khác. Xóa dòng tiêu đề graph TD, nếu không nó sẽ thành một hộp, và viết direction: down thay vào đó. Bỏ các nhãn Mermaid trong ngoặc vuông, vì ở đây chữ trong [ ] được đọc là thẻ hình dạng và màu. Ngoài ra --> ở đây vẽ mũi tên nét đứt cho lời gọi bất đồng bộ, còn trong Mermaid đó là mũi tên thường; dùng -> cho mũi tên liền.

**Ngoài A -> B tôi còn viết được gì?**

A -> B: chữ đặt nhãn lên mũi tên, A --> B vẽ mũi tên nét đứt, A <-> B mũi tên hai chiều và A <- B chỉ ngược lại. Tên [db, blue] đặt hình dạng và màu; các hình dạng gồm service, db, cache, queue, actor, client, storage, external, decision, terminal và note. title: đặt tên sơ đồ, direction: down xếp từ trên xuống dưới, và dòng bắt đầu bằng # hoặc // là chú thích. Một sơ đồ chứa tối đa 300 hộp, 600 mũi tên và 20.000 ký tự văn bản.

**Các mũi tên thay đổi thế nào khi tôi thu gọn một nhóm?**

Mũi tên giữa các hộp bên trong nhóm đã thu gọn bị ẩn, còn mũi tên đi qua đường viền của nhóm giờ bắt đầu hoặc kết thúc ở hộp nhóm. Nhiều mũi tên giữa cùng hai hộp được gộp thành một mũi tên đậm hơn, giữ nhãn đầu tiên và thêm số lượng. Ví dụ: với Payments API và Ledger nằm trong Payments { ... }, hai dòng Checkout -> Payments API và Checkout -> Ledger trở thành một mũi tên Checkout -> Payments x2 ở chế độ Tổng quan. Nhóm nằm trong một nhóm đã thu gọn cũng được thu gọn theo, và khi bật Các bước, số thứ tự đi theo những mũi tên còn hiển thị, đúng thứ tự đã viết.

## Thêm trong Công cụ lập trình

- [Trình định dạng JSON](https://discuvr.org/json-formatter/?hl=vi)
- [Công cụ định dạng Python](https://discuvr.org/python-formatter/?hl=vi)
- [Trình xem HTML](https://discuvr.org/html-viewer/?hl=vi)
- [Máy tính Subnet IP](https://discuvr.org/ip-subnet-calculator/?hl=vi)

## Thường dùng cùng

- [So sánh văn bản](https://discuvr.org/text-diff/?hl=vi)

---

Part of Discuvr (https://discuvr.org/): Discuvr is a collection of free, focused tools for day-to-day professional work - office and data utilities, legal and compliance helpers, privacy and security checks, and developer formatters. Every tool has its own page, and most can also be called from ChatGPT or Claude over MCP.