Các khái niệm cơ bản về cú pháp D2

D2 là một công cụ hiện đại dựa trên văn bản để tạo ra các sơ đồ rõ ràng, dễ đọc. D2 là viết tắt của “Sơ đồ khai báo”. Trong VPasCode, D2 cho phép các nhà phát triển phần mềm và kiến trúc sư giải pháp chuyển đổi văn bản mã đơn giản thành các mô hình trực quan sạch sẽ mà không cần vẽ các hình dạng thủ công.

1. Hình dạng cơ bản và kết nối

Để tạo hình dạng, chỉ cần gõ tên của chúng. Để kết nối các hình dạng, sử dụng mũi tên (-> để một chiều hoặc <-> để hai chiều).

# Kết nối đơn giản
Người dùng -> Máy chủ Web: Yêu cầu HTTP
Máy chủ Web -> Cơ sở dữ liệu: Lấy dữ liệu
Cơ sở dữ liệu -> Máy chủ Web: Trả về kết quả
Máy chủ Web <-> Bộ nhớ đệm: Đồng bộ đọc/ghi

2. Kiểu hình dạng và nhãn tùy chỉnh

Mặc định, các hình dạng xuất hiện dưới dạng hộp tiêu chuẩn. Bạn có thể dễ dàng thay đổi kiểu biểu tượng của hình dạng hoặc đặt nhãn tùy chỉnh bằng cách sử dụng thuộc tính hình dạng thuộc tính.

# Xác định kiểu hình dạng
Khách hàng: {
  hình dạng: người
}

Dịch vụ đám mây: {
  hình dạng: đám mây
}

Cơ sở dữ liệu chính: {
  hình dạng: hình trụ
  nhãn: "Cơ sở dữ liệu chính (PostgreSQL)"
}

Khách hàng -> Dịch vụ đám mây -> Cơ sở dữ liệu chính

3. Định nghĩa lớp

D2 hỗ trợ tích hợp thiết kế cấu trúc hướng đối tượng bằng cách sử dụng lớp hình dạng.

Tài khoảnKhách hàng: {
  hình dạng: lớp

  accountId: Chuỗi
  emailAddress: Chuỗi

  isActive(): Boolean
}

4. Các container lồng ghép (nhóm)

D2 giúp việc nhóm các mục lại với nhau bên trong các container trở nên dễ dàng bằng cách sử dụng dấu ngoặc nhọn chuẩn (“{}). Bạn cũng có thể kết nối các phần tử giữa các nhóm khác nhau bằng cách sử dụng ký hiệu dấu chấm.

# Nhóm với các container
Ứng dụng Frontend: {
  Giao diện React -> Quản lý trạng thái
}

Cơ sở hạ tầng Backend: {
  Cổng API -> Dịch vụ vi mô Xác thực
  Cổng API -> Dịch vụ vi mô Đơn hàng
}

# Kết nối giữa các nhóm
Ứng dụng Frontend.Quản lý trạng thái -> Cơ sở hạ tầng Backend.Cổng API: Gọi REST

5. Định dạng & Màu sắc

Các màu nền tùy chỉnh, màu viền và kiểu chữ có thể được tùy chỉnh trực tiếp trong khối bằng cách sử dụng từ khóastyletừ khóa.

Dịch vụ A: {
  style: {
    fill: "#e0e7ff"
    stroke: "#4338ca"
    border-radius: 8
  }
}

Dịch vụ B: {
  style: {
    fill: "#fef3c7"
    stroke: "#d97706"
  }
}

Dịch vụ A -> Dịch vụ B: Gửi tin nhắn

6. Bảng ghi nhớ cú pháp nhanh