PlantUML – Tool vẽ các biểu đồ với những dòng code đơn giản, nhanh chóng, tiện lợi

Posted by
alt text

1. Mở đầu

Coder mà, chủ yếu là theo trường phái nghĩ đến đâu code đến đó. Nhanh nhưng mà không ngon lắm, đôi khi lại không rẻ nữa, vì vừa nghĩ vừa code nên thành ra thiếu case này case nọ, code lộn xa lộn xộn. Thành ra code 10 cái thì được 5 cái qua, 3 cái phải sửa lại, 2 cái phải đập đi làm lại từ đầu vì sửa cái này nó tòi cái kia, loằng ngoằng lắm.
Thế nên mới sinh ra mấy cái để vẽ vời biểu đồ, coi như nháp trước, tính hết case, nhìn được tổng quan vấn đề nên cũng đỡ thiếu này thiếu nọ mà code nó nhanh, đúng kiểu xây nhà dựa vào bản vẽ có sẵn rồi. draw.cocacoo.com thường được hay sử dụng để vẽ vì có giao diện trực quan, kéo thả thoải mải, nhưng có 1 vấn để mọi người thường phải nhớ ký hiệu đúng theo action hay điều kiện thì mới đưa ra được 1 diagram chuẩn được (thường thì không làm được chuẩn), với lại cũng hơi hơi khó sửa khi thêm mới hoặc bớt đi một component khi có liên kết rồi. Thôi qua PlantUML

2. PlantUML là cái chi chi. Ưu nhược điểm như nào.

Nói ngắn gọn thì PlantUML là công cụ open-source free cho phép convert những dòng code sang dạng biểu đồ UML, nó sẽ thế hiện 1 cách rõ ràng khi nhìn vào dòng code, và dễ dàng triển khai cho các developer và cả những bạn ko biết code.

a. Xem qua có gì tốt

  • Kick thước nhẹ nên dễ dàng share cho người gửi.
  • Free
  • Nếu tích hợp vào dự án sử dụng git chẳng hạn thì vì là text có thể review chéo, cùng xây dựng UML trong team được.
  • Export ra ảnh khi cần
  • Vì kiểu là code nên cũng kiểu quen tay với lại không cần quá quan tâm về việc canh chỉnh vị trí của các component trên sơ đồ đang vẽ, nó tự căn chỉnh cho. Giờ thử tưởng tượng các component đang liên kết mũi tên ngang dọc đẹp đẽ ngon lành rồi, giờ thêm một component vào mà để chỉnh mấy cái mũi tên trên Draw hay Cacoo chắc phát ốm.
  • PlantUML vẽ được hầu hết các sơ đồ UML: Sequence Diagram, Use Case Diagram, Class Diagram, Activity Diagram, Component Diagram, …

b. Cũng vài nhược điểm.

  • Phải nhớ syntax mới code được nên giai đoạn đầu sẽ mất kha khá thời gian để vẽ xong một cái, dần nó quen giống như học code thôi. 😀
  • Màu mè và độ trực quan không được như các ứng dụng vẽ hình, không quan trọng lắm.

3. Cài đặt

PlantUML chạy trên nền tảng java, nên máy của bạn phải cài java.
Dùng extention của Visual Studio Code cho nhanh

Các file để vẽ UML sẽ có đuôi như dưới

*.wsd, *.pu, *.puml, *.plantuml, *.iuml

Sau đó Alt + D để xem Diagram Preview

Hoặc có thể code online tại http://www.plantuml.com/plantuml/ cho nóng.

4. Sử dụng và syntax

Hiện tại các tài liệu đã có sẵn ở https://plantuml.com/
Vì thời gian bài viết nên mình xin phép dịch và chia sẻ về Sequence diagram. Còn lại cũng có sẵn tài liệu và hình ảnh minh họa đầy đủ nên các bạn cùng nghiên cứu tiếp nhé.

Cấu trúc luôn là

@startuml
[code here]
@enduml

Khai báo thành phần
Để khai báo các thành phần, có thể dùng các keyword bên dưới, mỗi loại sẽ đại diện 1 thành phần và có hình dạng khác nhau

  • actor
  • boundary
  • control
  • entity
  • database
  • collections

    à quên, có cái nút Edit online, mọi người có thể sửa theo mẫu có sẵn của họ

Có thể dùng as để thay thế tên của thành phần (Với tên dài thì dùng as như một kiểu đặt biến để đưa nó đi nhiều nơi).
Dùng #red, #FF0000 để đặt màu background cho thành phần.
Dùng order để sắp xếp các thành phần (từ bé đến lớn).
Dùng ' để comment dòng, và /' ... '/ để comment theo cụm.

Ví dụ:

Change arrow style, color

Đánh số thứ tự
Thêm autonumber sẽ tự động thêm số, có thể thêm bước nhảy ngay phía sau (mặc định bước nhảy sẽ là 1). autonumber stop để dừng, autonumber resume để resume lại.

Page Title, Header and Footer

Nhóm các message
Có thể nhóm các message lại bằng từ khóa sau:

  • alt/else
  • opt
  • loop
  • par
  • break
  • critical
  • group: 1 text bất kỳ, nó sẽ được hiển thị ở header của group
    Khi đóng nhóm dùng end.
    Các nhóm cũng có thể lồng với nhau

Notes trên messages
note left để note nằm bên trái.
note right để note nằm bên phải.
note over để note over (nằm giữa).
end note để kết thúc note có nhiều dòng.
ngoài ra có thể thay đổi màu backgroup của note (mặc định màu vàng)

Creole and HTML
Để tạo điểm nhấn hoặc thay đổi 1 số hình dạng, màu sắc, các bạn có thể xem chi tiết ở đây:
https://plantuml.com/creole

vân vân và mây mây

5. Notes

https://plantuml.com/ trên này đã có đầy đủ các syntax.

Ngoài ra có trang web dưới đây tổng hợp, cung cấp rất nhiều UML với Preview đi kèm luôn. Cũng tiện để tham khảo.
Không chỉ là tài liệu tham khảo mà nó cũng là một kho 'văn mẫu', làm cái base để mình vẽ vời thêm.
https://real-world-plantuml.com/

Leave a Reply

Your email address will not be published. Required fields are marked *