Bạn có chắc chắn muốn xóa bài viết này không ?
Bạn có chắc chắn muốn xóa bình luận này không ?
PlantUML - Tool vẽ các biểu đồ với những dòng code đơn giản, nhanh chóng, tiện lợi
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.co và cacoo.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
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.
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/




