Gõ mũi tên như User -> API -> Database và nhận sơ đồ kiến trúc hoặc luồng đã được bố cục. Thu gọn nhóm để xem tổng thể, đánh số bước cho luồng chi tiết.
100%
Gõ một dòng như User -> App -> Database ở bên trái, hoặc nhấp đúp vào đây để thêm hộp.
Kéo hộp để di chuyển. Nhấp đúp để đổi tên hoặc thêm hộp. Kéo chấm trên hộp để nối. Ctrl+Z để hoàn tác.
Không tải lên gì cả: sơ đồ nằm trong trình duyệt và trong các liên kết bạn chọn chia sẻ.
Giới thiệu Trình tạo sơ đồ hệ thống
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
1Gõ các dòng như User -> Web App -> Orders DB hoặc bắt đầu từ mẫu.
2Thê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ộ.
3Chuyể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.