Chúng tôi rất hào hứng công bố một bản cập nhật lớn cho VPasCode: hỗ trợ đầy đủ cho D2ngôn ngữ biểu đồ mã hóa! Với bản cập nhật này, các kiến trúc sư, nhà phát triển và biên tập viên kỹ thuật có thể ngay lập tức chuyển đổi các đoạn mã D2 mô tả thành các sơ đồ trực quan sạch sẽ, chuyên nghiệp mà không gặp bất kỳ trở ngại nào.
Dù bạn đang lập bản đồ kiến trúc đám mây phức tạp, cấu trúc microservices hay quy trình làm việc tổ chức, VPasCode đều hoạt động như trình chỉnh sửa D2 miễn phí và công cụ D2 trực tuyến đầy tính năng mà bạn luôn muốn sử dụng.trình chỉnh sửa D2 miễn phí và công cụ D2 trực tuyến. Trải nghiệm trực quan liền mạch, thời gian thực ngay bên trong trình duyệt của bạn.
Để tìm hiểu thêm về khả năng và bản cập nhật của nền tảng chúng tôi, hãy truy cập trang chính thức Trang VPasCode.
Cách tích hợp D2 hoạt động trong VPasCode
Sử dụng D2 trong VPasCode nhanh chóng, trực quan và được thiết kế để tối đa hóa năng suất của bạn. Không gian làm việc có bố cục thuận tiện theo kiểu song song:
- Pane bên trái (Trình soạn thảo mã):Chỉ cần dán, gõ hoặc chỉnh sửa đoạn mã D2 của bạn. Phát hiện định dạng tự động của VPasCode ngay lập tức nhận diện mã của bạn mà không cần chuyển đổi ngôn ngữ thủ công.
- Pane bên phải (Bộ hiển thị trực tiếp):Theo dõi sơ đồ của bạn được hiển thị động theo thời gian thực khi bạn gõ hoặc chỉnh sửa các khối mã.
Video bên dưới sẽ hướng dẫn bạn cách tạo sơ đồ D2 trong trình chỉnh sửa sơ đồ mã hóa của Visual Paradigm VPasCode.
Sẵn sàng thử tự mình? Bắt đầu ngay lập tức với trình chỉnh sửa của chúng tôi Trình chỉnh sửa VPasCode.
Tính năng chính đi kèm với Hỗ trợ D2
Ngoài khả năng hiển thị trực tiếp, tích hợp D2 mới của chúng tôi đi kèm với các tùy chọn hợp tác và xuất bản đa dạng để phù hợp với quy trình làm việc của bạn:
- Các tùy chọn xuất linh hoạt:Tải xuống sơ đồ đã hoàn thành ngay lập tức dưới dạng đồ họa vector SVG có thể mở rộng hoặc ảnh PNG độ phân giải cao để sử dụng trong báo cáo, bài thuyết trình và tài liệu.
- Tích hợp bảng tạm:Sao chép nhanh hình ảnh sơ đồ đã được tạo ra thẳng vào bảng tạm chỉ bằng một cú nhấp chuột để dán trực tiếp vào Slack, email hoặc trình xử lý văn bản.
- Chia sẻ URL tức thì:Chia sẻ công việc của bạn một cách dễ dàng với đồng nghiệp hoặc khách hàng thông qua các liên kết trực tiếp. Tuyệt vời nhất là người xem không cần đăng nhập để kiểm tra sơ đồ được chia sẻ của bạn.
Minh họa: Xây dựng sơ đồ mạng cơ bản trong D2
Để thấy việc mô hình hóa hệ thống bằng công cụ này dễ dàng đến mức nàotrình soạn thảo D2 miễn phí, hãy xem ví dụ sau về kiến trúc mạng đa tầng cơ bản.
Mã nguồn D2
direction: right
client -> load_balancer: HTTPS
load_balancer -> app1: HTTP
load_balancer -> app2: HTTP
app1 -> redis: GET
app2 -> redis: GET
app1 -> postgres: SQL
app2 -> postgres: SQL
client.shape: person
load_balancer.shape: rectangle
app1.shape: hexagon
app2.shape: hexagon
redis.shape: cylinder
postgres.shape: cylinder
redis.style.fill: "#fee2e2"
postgres.style.fill: "#dcfce7"Cách hiển thị điều này trong công cụ D2 trực tuyến của chúng tôi
Khi bạn dán đoạn mã trên vào VPasCode, bộ xử lý sẽ tự động xử lý các mối quan hệ, hướng đi và định dạng hình dạng tùy chỉnh:
- Người dùng clientđược định dạng như biểu tượng người riêng biệt khởi tạo các yêu cầu HTTPS đến một hình chữ nhật load_balancer.
- Lưu lượng được chia tách rõ ràng qua hai nút ứng dụng hình lục giác (app1 và app2).
- Cả hai nút ứng dụng đều truy vấn lớp lưu trữ đệm phía sau một cách an toàn (redis, được định dạng màu đỏ nhạt) và các kho dữ liệu quan hệ (postgres, được định dạng màu xanh lá nhạt).
Các ví dụ biểu đồ D2 khác
Hình dạng cơ bản
server -> client: HTTP
server -> db: truy vấn
client: {
shape: person
style.fill: "#cfe2ff"
}
db: {
shape: cylinder
style.fill: "#d1e7dd"
}
server.style.fill: "#fff3cd"
Thùng chứa
network: {
web: {
shape: hexagon
style.fill: "#e7f1ff"
}
api: {
shape: rectangle
style.fill: "#fff3cd"
}
db.primary: {
shape: cylinder
style.fill: "#d1e7dd"
}
db.cache: {
shape: cylinder
style.fill: "#f8d7da"
}
web -> api: REST
api -> db.primary: SQL
api -> db.cache: tra cứu
}Được định dạng
vars: {
d2-config: {
sketch: true
layout-engine: elk
}
}
aws: {
vpc: {
web: {
shape: rectangle
style: {
fill: "#fef3c7"
stroke: "#d97706"
stroke-width: 2
font: mono
}
}
api: {
shape: rectangle
style.fill: "#dbeafe"
}
db: {
shape: cylinder
style.fill: "#dcfce7"
}
}
}
user -> aws.vpc.web: HTTPS {
style.animated: true
}
aws.vpc.web -> aws.vpc.api: HTTP
aws.vpc.api -> aws.vpc.db: SQL {
style.stroke-dash: 5
}Chuỗi
shape: sequence_diagram
user -> api: GET /users
api -> db: SELECT *
db -> api: hàng
api -> user: 200 OK
user -> api: POST /users
api -> db: INSERT
db -> api: hàng
api -> user: 201 Tạo thành côngGhi chú: Bạn có thể muốn tạo biểu đồ chuỗi với PlantUML. Xem cách làm điều này tại:
Hướng dẫn toàn diện về biểu đồ chuỗi PlantUML: Ngữ pháp, Ví dụ và Thực hành tốt nhất
VPasCode là gì?
Nếu bạn mới sử dụng nền tảng của chúng tôi, Visual Paradigm VPasCode là một giải pháp biểu đồ mã hóa tích hợp, dựa trên trình duyệt, được xây dựng dành cho các nhóm kỹ thuật hiện đại. Nó loại bỏ sự phiền toái của các công cụ vẽ kéo thả thủ công bằng cách cho phép bạn định nghĩa kiến trúc và mô hình dữ liệu hoàn toàn thông qua mã.
Ngoài D2, VPasCode hỗ trợ một loạt các định dạng biểu đồ phổ biến và ngôn ngữ có cấu trúc, bao gồm PlantUML, Mermaid, Graphviz, ECharts, SQL, YAML, JSON, và các ngôn ngữ lập trình chính như Java, Python, Rust, và TypeScript. Chỉnh sửa mã nguồn chính, xem trước trực tiếp và xuất hình ảnh hoàn toàn miễn phí.
Bắt đầu sáng tạo ngay hôm nay
Nâng cao tài liệu kỹ thuật và mô hình hóa kiến trúc của bạn ngay hôm nay. Trải nghiệm tốc độ và tiện lợi của các tính năng D2 mới bằng cách khởi chạy ứng dụng ngay bây giờ tại Trình soạn thảo VPasCode.