PlantUML- Vẽ biểu đồ UML bằng code

Posted: Friday November 12th, 2021/Under: News, General, IT technique/By: Akiyasu Maeda
PlantUML- Vẽ biểu đồ UML bằng code

Giới thiệu PlantUML

Trong quy trình phát triển phần mềm, dù áp dụng mô hình Waterfall hay mô hình Agile thì cũng thường hay sử dụng biểu đồ UML để giải thích yêu cầu, cấu trúc, chức năng.
Tuy nhiên, tài liệu biểu đồ hình vẽ  không dùng Text Editor mà thường dùng ứng dụng vẽ hình và đôi lúc khó nhận biết được sự khác biệt giữa các version.
Nếu dùng PlantUML thì có thể vẽ hình, biểu đồ bằng code và dễ dàng biết được sự khác biệt của các thay đổi, dễ dàng quản lý version.

Xây dựng trên môi trường local

Khởi động PlantUML trên localhost

Phương pháp áp dụng đơn giản có dùng Docker như sau:

  1. Cài Docker, khởi động Docker. (Hãy tham khảo phương pháp cài Docker tại đây)
  2. Chạy lệnh “docker run -d -p 8080:8080 plantuml/plantuml-server:jetty”, khởi động Docker container của plantumlUML
  3. Trên trình duyệt, truy cập vào “http://localhost:8080/”, nếu hiện ra như dưới đây là đã thành công

Setting VScode

  1. Chọn Extension, cài PlantUML
  2. Mở Extension setting của PlantUML và setting như sau:
    • Plantuml: Render => PlantUMLServer
    • Plantuml: Server => http://localhost:8080

Cách sử dụng

Vừa edit vừa hiển thị preview

  1. Tạo file UML (*******.uml) bằng VScode, sau đó copy & paste đoạn code dưới đây.
    @startuml
    start
    repeat
    :Test something;
    if (Something went wrong?) then (no)
    #palegreen:OK;
    break
    endif
    ->NOK;
    :Alert "Error with long text";
    repeat while (Something went wrong with long text?) is (yes) not (no)
    ->//merged step//;
    :Alert "Success";
    stop
    @enduml
  2. Từ Command Panel của VScode, chọn “PlantUML:Preview Current Diagram”
  3. Màn hình preview sẽ hiện ra

Xuất hình vẽ

  1. Từ Command Panel của VScode, chọn “PlantUML: Export Current File Diagrams”
  2. Chọn png
  3. Thư mục out sẽ được tạo và file hình sẽ được xuất ra trong đó.

Ngoài biểu đồ hoạt động (Activity diagram), còn có thể vẽ biểu đồ tuần tự (Sequence diagram), biểu đồ use case (Use-case diagram), biểu đồ các lớp (Class diagram), v.v… Trên trang PlantUML cũng có đăng tải các ví dụ mẫu, hãy tham khảo.

Tạo sơ đồ cấu trúc hệ thống có dùng dịch vụ AWS

ICON của AWS được cung cấp trên GitHub, có thể sử dụng trong PlantUML

Trước đây thường dùng AWS-PlantUML nhưng gần đây dường như không có cập nhật cho nên chuyển sang dùng aws-icons-for-plantuml thay thế.

Sơ đồ cấu trúc có sử dụng tính năng này như sau.


@startuml aws-sample-system-diagram

!define AWSPuml https://raw.githubusercontent.com/awslabs/aws-icons-for-plantuml/v11.1/dist
!includeurl AWSPuml/AWSCommon.puml
!includeurl AWSPuml/NetworkingContentDelivery/ElasticLoadBalancingApplicationLoadBalancer.puml
!includeurl AWSPuml/GroupIcons/Region.puml
!includeurl AWSPuml/NetworkingContentDelivery/Route53.puml
!includeurl AWSPuml/Compute/all.puml
!includeurl AWSPuml/Storage/SimpleStorageService.puml
!includeurl AWSPuml/Database/AuroraMySQLInstance.puml
!includeurl AWSPuml/Database/ElastiCacheElastiCacheforRedis.puml

left to right direction

actor "Person" as personAlias
Region(cloudArea, "Tokyo", "AWS", ""){
Route53(route53, "Sample.com", "Route53", "")
ElasticLoadBalancingApplicationLoadBalancer(elb, "Production-ALB", "ALB", "")
EC2Instance(desktopAlias, "Production-ec2", "EC2", "t3.micro \n amazon linux2")
SimpleStorageService(storageAlias, "Production-s3", "AmazonS3", "Host name \n public")
AuroraMySQLInstance(rds,"Database","RDS Mysql","Host name \n DB name")
ElastiCacheElastiCacheforRedis(redis,"Redis","Elastic Cache","Host name")
}

personAlias --> route53
route53 --> elb
elb --> desktopAlias
elb --> storageAlias
desktopAlias --> storageAlias
desktopAlias --> redis
rds <--> desktopAlias
@enduml

Danh sách các icon khác có trong AWSSymbols.md của thư mục top

Cảm nhận

Vì có thể dùng VScode để tạo cho nên dễ dàng thao tác cùng lúc với người khác, dễ dàng quản lý version mà không cần phải bận tâm đến việc mua bản quyền phần mềm.
Không thể chỉnh sửa nhỏ nhặt hình vẽ mà chỉ có thể chọn vẽ từ trên xuống dưới, vẽ từ trái qua phải, v.v…
Chính vì vậy, những ai đã biết điều trên và không chấp nhận thì không nên sử dụng.
Tuy nhiên, đối với tôi thì bỏ qua yếu tố không thể chỉnh sửa nhỏ nhặt thì có thể tạo được biểu đồ, hình vẽ, ghi những thứ cần thiết vào phần giải thích mà không cần phải suy nghĩ nhiều thứ, có thể tập trung công việc một cách hiệu quả hơn.

Ghi chú

Cũng có người không muốn xây dựng môi trường local thì trên trang PlantUML có sẵn demo hãy dùng thử.

Cho dù không sử dụng Docker thì khi setting Plantuml: Render của VScode, nếu set URL của trang PlantUML thì cũng có thể sử dụng Preview. Tuy nhiên trường hợp sử dụng trang PlantUML thì cần phải cân nhắc kỹ xem những thứ sẽ tạo có phải là thông tin cơ mật hay không rồi hãy sử dụng.

Tham khảo

PlantUML
Tạo môi trường có thể vừa vẽ PlantUML vừa xem Preview trên Visual Studio Code bằng Docker
aws-icons-for-plantuml

Categories