Trình xem và biên tập sơ đồ C4

Tác giả
  • Trình xem và biên tập sơ đồ C4
Loạt: UML and Software Architecture
Tập: (2/7)

Trình Xem và Chỉnh Sửa Sơ Đồ C4: MassiveDiag Playground

Giới Thiệu Mô Hình C4 trong MassiveDiag

MassiveDiag Playground cung cấp một trình xem và chỉnh sửa sơ đồ C4 mạnh mẽ, giúp chuyển đổi mã sơ đồ dựa trên văn bản thành các hình ảnh minh họa kiến trúc hệ thống chuyên nghiệp trong thời gian thực. Công cụ này xuất sắc như một trình chỉnh sửa mã C4 trực tiếp, cho phép bạn ngay lập tức thấy và tinh chỉnh các sơ đồ kiến trúc phần mềm khi bạn phát triển chúng.

Dù bạn cần:

  • Chuyển đổi mã sơ đồ C4 thành SVG cho tài liệu web,
  • Xuất mã sơ đồ C4 thành tài liệu Word cho các thông số kỹ thuật,
  • Chuyển mã mô hình C4 thành PNG cho bài thuyết trình,
  • Mô hình C4 thành PDF cho tài liệu chính thức,

MassiveDiag Playground mang đến một quy trình làm việc đơn giản.

my Image

Thử Trình Chỉnh Sửa Sơ Đồ C4 của MassiveDiag Ngay →

Mô Hình C4 Là Gì?

Mô hình C4 là một phương pháp phân lớp để trực quan hóa kiến trúc phần mềm do Simon Brown tạo ra. Nó cung cấp một cách tiêu chuẩn để tài liệu hóa các hệ thống phần mềm thông qua bốn cấp độ sơ đồ:

  1. Sơ đồ ngữ cảnh - Tổng thể, thể hiện các tương tác hệ thống
  2. Sơ đồ chứa - Các lựa chọn công nghệ cấp cao
  3. Sơ đồ thành phần - Các thành phần logic trong các chứa
  4. Sơ đồ mã nguồn - Chi tiết triển khai (tùy chọn)

MassiveDiag là một công cụ tạo mã sơ đồ C4 mạnh mẽ, giúp các nhà phát triển và kiến trúc sư kỹ thuật dễ dàng truy cập các sơ đồ kiến trúc.

Bắt Đầu Với Mã Sơ Đồ C4

Ví Dụ Sơ Đồ Ngữ Cảnh

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

title Hệ Thống Ngữ Cảnh cho Hệ Thống Ngân Hàng Trực Tuyến

Person(customer, "Khách Hàng Ngân Hàng", "Khách hàng của ngân hàng với tài khoản cá nhân.")
System(banking_system, "Hệ Thống Ngân Hàng Trực Tuyến", "Cho phép khách hàng xem thông tin tài khoản và thực hiện thanh toán.")
System_Ext(mail_system, "Hệ Thống E-mail", "Hệ thống email Microsoft Exchange nội bộ.")
System_Ext(mainframe, "Hệ Thống Ngân Hàng Mainframe", "Lưu trữ tất cả thông tin cơ bản về khách hàng, tài khoản, giao dịch, v.v.")

Rel(customer, banking_system, "Sử dụng")
Rel(banking_system, mail_system, "Gửi e-mail sử dụng")
Rel(banking_system, mainframe, "Sử dụng")
@enduml

my Image

Ví Dụ Sơ Đồ Chứa

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

title Sơ Đồ Chứa cho Hệ Thống Ngân Hàng Trực Tuyến

Person(customer, "Khách Hàng Ngân Hàng", "Khách hàng của ngân hàng với tài khoản cá nhân.")

System_Boundary(c1, "Hệ Thống Ngân Hàng Trực Tuyến") {
    Container(web_app, "Ứng Dụng Web", "Java và Spring MVC", "Cung cấp nội dung tĩnh và SPA ngân hàng trực tuyến.")
    Container(spa, "Ứng Dụng Một Trang", "JavaScript và Angular", "Cung cấp tất cả các chức năng ngân hàng trực tuyến cho khách hàng.")
    Container(mobile_app, "Ứng Dụng Di Động", "Xamarin", "Cung cấp một phần chức năng ngân hàng trực tuyến cho khách hàng.")
    Container(api, "Ứng Dụng API", "Java và Spring MVC", "Cung cấp chức năng ngân hàng trực tuyến qua API JSON/HTTPS.")
    Container(database, "Cơ Sở Dữ Liệu", "Oracle Database Schema", "Lưu trữ thông tin đăng ký người dùng, thông tin xác thực đã mã hóa, nhật ký truy cập, v.v.")
}

System_Ext(mainframe, "Hệ Thống Ngân Hàng Mainframe", "Lưu trữ tất cả thông tin cơ bản về khách hàng, tài khoản, giao dịch, v.v.")
System_Ext(email, "Hệ Thống E-mail", "Hệ thống email Microsoft Exchange nội bộ.")

Rel(customer, web_app, "Sử dụng", "HTTPS")
Rel(customer, spa, "Sử dụng", "HTTPS")
Rel(customer, mobile_app, "Sử dụng")
Rel(web_app, spa, "Cung cấp cho trình duyệt của khách hàng")
Rel(spa, api, "Gọi API đến", "JSON/HTTPS")
Rel(mobile_app, api, "Gọi API đến", "JSON/HTTPS")
Rel(api, database, "Đọc và ghi vào", "JDBC")
Rel(api, mainframe, "Gọi API đến", "XML/HTTPS")
Rel(api, email, "Gửi e-mail sử dụng")
@enduml

my Image

Cách Sử Dụng MassiveDiag Như Trình Xem Sơ Đồ C4

1. Tạo Hoặc Chuẩn Bị Mã Sơ Đồ C4 Của Bạn

Bạn có thể viết mã C4 model của riêng mình hoặc sử dụng các công cụ AI như ChatGPT để tạo các cấu trúc sơ đồ C4 cơ bản.


@startuml Basic Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

Person(admin, "Quản Trị Viên", $sprite="person2", $link="https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LayoutOptions.md#hide_person_sprite-or-show_person_spritesprite")
System_Boundary(c1, "Hệ Thống Mẫu", $link="https://github.com/plantuml-stdlib/C4-PlantUML") {
    Container(web_app, "Ứng Dụng Web", "C#, ASP.NET Core 2.1 MVC", $descr="Cho phép người dùng so sánh nhiều dòng thời gian Twitter", $link="https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LayoutOptions.md")
}
System(twitter, "Twitter", $link="https://github.com/plantuml-stdlib/C4-PlantUML")

Rel(admin, web_app, "Sử dụng", "HTTPS", $link="https://plantuml.com/link")
Rel(web_app, twitter, "Lấy tweet từ", "HTTPS", $link="https://plantuml.com/link")
@enduml

2. Dán Mã Vào MassiveDiag Playground

Đi đến MassiveDiag Playground - không cần cài đặt hay đăng ký. Chèn hoặc tải lên mã của bạn.

my Image

3. Chọn C4 Là Loại Sơ Đồ

Playground sẽ tự động phát hiện loại sơ đồ của bạn, nhưng bạn cũng có thể chọn thủ công "C4 PlantUML" nếu cần.

my Image

4. Tạo Sơ Đồ

Nhấn "Tạo Sơ Đồ" để chuyển đổi mã của bạn thành sơ đồ C4 trực quan.

my Image

5. Chỉnh Sửa và Tinh Chỉnh

Sử dụng giao diện hai cửa sổ để:

  • Chỉnh sửa mã và xem cập nhật thời gian thực
  • Thực hiện chỉnh sửa hình ảnh trong trình chỉnh sửa SVG trực tiếp

6. Xuất Ra Định Dạng Bạn Thích

Chọn từ nhiều tùy chọn xuất:

  • SVG cho sử dụng trên web
  • PNG cho bài thuyết trình
  • PDF cho tài liệu
  • Tài liệu Word cho thông số kỹ thuật
  • React JSX cho các thành phần web tương tác

my Image

Tạo Sơ Đồ C4 Đầu Tiên Của Bạn Ngay →

Các Trường Hợp Sử Dụng Thực Tế Cho Sơ Đồ C4

Tài Liệu Kiến Trúc Phần Mềm

Sử dụng sơ đồ C4 để tài liệu hóa thiết kế hệ thống ở các cấp độ khác nhau:

  • Sơ đồ ngữ cảnh cho các bên liên quan
  • Sơ đồ chứa cho các nhóm phát triển
  • Sơ đồ thành phần cho kế hoạch triển khai

Thông Số Kỹ Thuật

Tạo sơ đồ kiến trúc cho:

  • Tài liệu đề xuất hệ thống
  • Các ghi chép Quyết Định Kiến Trúc (ADR)
  • Thông số kỹ thuật yêu cầu

Đào Tạo và Chuyển Giao Kiến Thức

Tạo tổng quan hệ thống hình ảnh để giúp các thành viên mới trong nhóm hiểu:

  • Ranh giới và các tương tác của hệ thống
  • Trực quan hóa công nghệ
  • Trách nhiệm và mối quan hệ giữa các thành phần

Câu Hỏi Thường Gặp Về Sơ Đồ C4 và MassiveDiag

C4 có gì khác biệt so với các phương pháp vẽ sơ đồ khác?

C4 cung cấp một cách tiếp cận phân lớp, có cấu trúc để tài liệu hóa kiến trúc phần mềm.

Tôi có cần kinh nghiệm lập trình để sử dụng trình xem sơ đồ C4 không?

Hiểu biết cơ bản về cú pháp mã sẽ hữu ích, nhưng không bắt buộc.

Tôi có thể hợp tác với người khác trên các sơ đồ C4 của mình không?

Có, bạn có thể chia sẻ mã sơ đồ C4 hoặc xuất sơ đồ để hợp tác và xem xét.

Làm thế nào để tôi đưa sơ đồ C4 vào tài liệu của mình?

  • Xuất SVG/PNG cho web và bài thuyết trình
  • Xuất PDF/Word cho tài liệu chính thức

Tạo Sơ Đồ C4 Chuyên Nghiệp Ngay →

Chia sẻ