Giao diện
@digiforce-nc/plugin-graph-collection-manager
Plugin ER diagram trực quan — hiển thị sơ đồ quan hệ thực thể (Entity-Relationship) giữa các collection dưới dạng đồ thị tương tác.
Plugin này làm gì?
Khi hệ thống có hàng chục collection với quan hệ phức tạp (hasOne, hasMany, belongsTo, belongsToMany), rất khó hình dung tổng thể. Plugin tạo sơ đồ ER diagram trực quan, cho phép admin nhìn thấy tất cả collection và mối quan hệ trên một bản đồ, kéo-thả để sắp xếp, click vào để xem chi tiết.
Cơ chế hoạt động
Tính năng chính
| # | Tính năng | Mô tả |
|---|---|---|
| 1 | ER diagram | Sơ đồ quan hệ thực thể trực quan |
| 2 | Auto layout | Tự sắp xếp vị trí node tối ưu |
| 3 | Drag & drop | Kéo-thả node để tùy chỉnh layout |
| 4 | Zoom & pan | Phóng to/thu nhỏ và di chuyển canvas |
| 5 | Relation types | Hiển thị loại quan hệ (1:1, 1:N, N:M) |
| 6 | Filter | Lọc hiển thị theo nhóm collection |
| 7 | Collection CRUD | Tạo/sửa collection trực tiếp từ diagram |
Thành phần client
| Thành phần | Mô tả |
|---|---|
GraphCanvas | Canvas chính hiển thị ER diagram |
CollectionNode | Node đại diện collection (hiển thị fields) |
RelationEdge | Đường nối thể hiện quan hệ |
DetailPanel | Panel chi tiết khi click vào node |
FilterToolbar | Toolbar lọc và tìm kiếm collection |
MiniMap | Bản đồ thu nhỏ cho điều hướng |
Dependencies
| Package | Vai trò |
|---|---|
@digiforce-nc/client | Client UI framework |
@digiforce-nc/server | Server framework |
@digiforce-nc/collection-manager | Nguồn dữ liệu collection + relations |
@antv/g6 | Thư viện graph visualization |
Lưu ý triển khai
- Với hệ thống nhiều collection (100+), nên dùng filter để giảm bớt hiển thị
- Layout được lưu localStorage để nhớ vị trí kéo-thả
- Plugin chỉ có phần client — không có server-side logic riêng