Trong quản trị hệ thống và thiết kế hạ tầng, việc xây dựng một sơ đồ mạng (Topology) trực quan là bước cực kỳ quan trọng. easy-topo là một giải pháp mã nguồn mở được xây dựng trên nền tảng Vue.js, SVG và Element-UI, cho phép các kỹ sư nhanh chóng tạo ra các sơ đồ kiến trúc chuyên nghiệp mà không cần kỹ năng đồ họa chuyên sâu.

Ưu điểm kỹ thuật của easy-topo

• Render bằng SVG: Đảm bảo độ sắc nét tuyệt đối khi phóng to hoặc thu nhỏ (vô hạn độ phân giải), phù hợp để tích hợp vào các tài liệu kỹ thuật hoặc báo cáo dashboard.
• Tương tác kéo thả: Giao diện trực quan giúp rút ngắn thời gian từ ý tưởng đến bản vẽ thực tế.
• Kiến trúc dễ mở rộng: Dễ dàng tùy biến thêm các loại thiết bị mới hoặc thay đổi logic kết nối thông qua mã nguồn Vue.

Hướng dẫn triển khai nhanh

Để bắt đầu sử dụng dự án này trong môi trường phát triển cục bộ, bạn thực hiện các bước sau:

# Sao chép kho lưu trữ từ Git
git clone https://gitcode.com/gh_mirrors/ea/easy-topo
cd easy-topo

# Cài đặt các gói phụ thuộc
npm install

# Khởi chạy ứng dụng ở chế độ phát triển
npm run serve

Sau khi khởi chạy, ứng dụng thường sẽ khả dụng tại địa chỉ http://localhost:8080.

Các tính năng vận hành chính

1. Thư viện thiết bị đa dạng

Thanh công cụ bên trái cung cấp sẵn các biểu tượng tiêu chuẩn như Router, Switch, Server và Firewall. Người dùng chỉ cần chọn biểu tượng cần thiết và kéo trực tiếp vào vùng làm việc (Canvas) để khởi tạo một node mạng mới.

2. Cơ chế kết nối thông minh

Việc thiết lập mối quan hệ giữa các thiết bị được thực hiện thông qua menu ngữ cảnh. Khi bạn nhấp chuột phải vào một thiết bị và chọn chức năng kết nối, hệ thống sẽ tự động tính toán đường đi của dây dẫn (SVG Path) để tránh chồng chéo và đảm bảo tính thẩm mỹ cho sơ đồ.

3. Quản lý định danh Node

Để sơ đồ mang tính thực tiễn cao, mỗi node đều có thể được đặt tên lại (Rename) theo chức năng thực tế như "Core-Switch-01" hay "Load-Balancer-Primary". Điều này giúp tài liệu hóa hạ tầng một cách chính xác nhất.

Cấu trúc dự án và Tùy biến sâu

Với các lập trình viên muốn tích hợp easy-topo vào hệ thống quản trị mạng riêng, việc nắm vững cấu trúc thư mục là rất cần thiết:

src/
├── components/           # Chứa các thành phần giao diện
│   ├── ContextMenu.vue   # Xử lý sự kiện chuột phải
│   └── Topo.vue          # Thành phần chính điều khiển SVG và logic kết nối
├── data/                 # Cấu hình dữ liệu
│   ├── img/              # Kho chứa icon thiết bị (SVG/PNG)
│   └── nodeData.js       # Định nghĩa các loại thiết bị hỗ trợ

Cách thêm loại thiết bị mới

Nếu bạn muốn bổ sung một thiết bị chuyên dụng (ví dụ: IoT Gateway), bạn có thể chỉnh sửa tệp nodeData.js bằng cách định nghĩa thêm một đối tượng cấu hình mới:

// Ví dụ cấu hình node mới trong nodeData.js
export const deviceTypes = [
  {
    category: 'Network',
    nodes: [
      {
        name: 'IoT Gateway',
        icon: 'iot-gate.svg',
        type: 'iot_device'
      }
      // Thêm các thiết bị khác tại đây
    ]
  }
];

Kỹ thuật tối ưu hóa sơ đồ mạng

Để có một sơ đồ mạng chuyên nghiệp và dễ hiểu, bạn nên áp dụng các quy tắc sau:

• Phân lớp kiến trúc (Hierarchical Design): Sắp xếp các thiết bị theo tầng (Core, Aggregation, Access). Đặt các thiết bị định tuyến và tường lửa ở lớp trên cùng, các máy chủ và thiết bị đầu cuối ở lớp dưới.
• Định dạng xuất bản: Luôn ưu tiên xuất sơ đồ dưới dạng vector (SVG) khi chèn vào tài liệu web để đảm bảo khả năng tương thích hiển thị trên mọi thiết bị.
• Mã hóa màu sắc: Tùy chỉnh màu sắc của các đường nối (Stroke) trong Topo.vue để phân biệt giữa các loại kết nối như Fiber, Ethernet hoặc liên kết ảo (VLAN).

Việc sử dụng easy-topo không chỉ giúp tự động hóa quá trình vẽ sơ đồ mà còn giúp chuẩn hóa dữ liệu hạ tầng mạng trong doanh nghiệp, tạo tiền đề cho các hệ thống giám sát mạng tự động hóa sau này.