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

Văn Đức Thái viết ngày 29/10/2020

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. :D
  • 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
alt text

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

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

Sau đó Alt + D để xem Diagram Preview
alt text
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 alt text à 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ụ:
alt text
Change arrow style, color
alt text

Đá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.
alt text

Page Title, Header and Footer
alt text

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 alt text

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)
alt text
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
alt text

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/

https://cauchuyencoder.com/cau-chuyen-lap-trinh/plantuml-tool-ve-cac-bieu-do-voi-nhung-dong-code-don-gian-nhanh-chong-tien-loi/

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Văn Đức Thái

27 bài viết.
114 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
29 18
1. Tản mạn ngoài lề (Ảnh) MySQL với DB thì có cái quần què gì chứ? Đọc thôi để thấy cũng vài cái hay ho và này nọ. 2. MySQL: MyISAM & InnoDB & ...
Văn Đức Thái viết hơn 2 năm trước
29 18
White
28 13
1. Tản mạn ngoài lề Khuya vật vã. Chẳng ngủ được. Mà chẳng biết làm gì giữa cái lúc dở dở ương ương này. Viết blog vậy :(. Bài viết dành cho các...
Văn Đức Thái viết hơn 2 năm trước
28 13
White
19 3
1. Tản mạn ngoài lề (Ảnh) Khi gặp một vấn đề trong cuộc sống bạn sẽ làm gì? Người yêu đá đít, cuối tháng hết tiền lương, sếp đì trên đi xuống, bl...
Văn Đức Thái viết hơn 2 năm trước
19 3
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
27 bài viết.
114 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!