Tầm Quan Trọng của Diagrams trong Dự Án Phát Triển Phần Mềm

Trong bất kỳ dự án phát triển phần mềm nào, diagrams và tài liệu luôn đóng vai trò cốt lõi. Chúng giống như la bàn chỉ đường, giúp các kỹ sư phần mềm hiểu rõ ý tưởng từ các Product Manager, Tech Lead hay Business Analyst. Diagrams không chỉ giúp định hình luồng công việc mà còn như là bằng chứng để hai bên đối chiếu trong các tranh cãi về yêu cầu dự án. Đôi khi, một hình ảnh có thể truyền đạt thông điệp tốt hơn cả ngàn lời nói, tiết kiệm thời gian giải thích đáng kể.

Trước đây, tôi thường sử dụng draw.io để vẽ diagrams. Đối với những ai chưa biết, đây là một công cụ trực tuyến cho phép kéo thả để tạo các biểu đồ. Tuy nhiên, mỗi khi cần cập nhật diagram, việc kéo thả từng phần không chỉ tốn thời gian mà còn kém hiệu quả. Cho đến khi một người bạn giới thiệu về Mermaid, mọi thứ đã bước sang một trang mới.

Khám Phá Mermaid

Theo định nghĩa trên trang chính thức, Mermaid là một công cụ được phát triển dựa trên JavaScript, cho phép người dùng tạo ra diagrams và biểu đồ một cách linh hoạt chỉ với văn bản có cú pháp tương tự như Markdown.

Ưu Điểm Của Mermaid

Mermaid là một công cụ mã nguồn mở và hoàn toàn miễn phí. Nó hỗ trợ nhiều loại diagrams và charts thông dụng như Flowcharts, Sequence diagrams, Class diagrams, State diagrams, và Git graphs.

Cú pháp của Mermaid rất đơn giản và dễ học. Nếu bạn đã quen thuộc với Markdown, bạn chỉ cần một chút thời gian để làm quen. Khi yêu cầu dự án thay đổi, bạn chỉ cần chỉnh sửa một vài dòng văn bản và diagram sẽ được cập nhật ngay lập tức.

Để vẽ các diagrams đơn giản, bạn hoàn toàn có thể dùng Mermaid Live Editor mà không cần cài đặt gì. Hơn nữa, Mermaid còn được tích hợp với các công cụ như Notion và các sản phẩm của Atlassian. Nếu bạn muốn sử dụng ở môi trường local, có thể dùng Mermaid trong các IDE phổ biến như Visual Studio Code hoặc các sản phẩm của JetBrains.

So Sánh Mermaid và PlantUML

Trên thị trường hiện tại, có nhiều công cụ cho phép render diagrams từ text, nổi bật nhất là PlantUML. Dưới đây là bảng so sánh để bạn có cái nhìn tổng quan hơn.

Hướng Dẫn Cài Đặt Mermaid trên Visual Studio Code

Tại dự án của tôi, team đã tạo riêng một project để quản lý các diagram, sử dụng Git để kiểm soát phiên bản và Visual Studio Code để vẽ. Bạn chỉ cần cài đặt thêm hai extension: Markdown Preview Mermaid Support và Mermaid Markdown Syntax Highlighting trên Visual Studio Code.

Khi cần vẽ một diagram, bạn tạo một file với đuôi .md và viết theo cú pháp của Mermaid. Bạn có thể nhấp vào nút Open Preview ở góc trên bên phải để vừa code vừa xem diagram được cập nhật trực tiếp cạnh bên. Kết quả sẽ hiện ra ngay lập tức.

Cú Pháp Của Các Diagram Phổ Biến

Flowchart

Flowchart là một loại hình đồ họa bao gồm các node và mối liên kết (có thể là đường vô hướng hoặc mũi tên có hướng). Cú pháp của Mermaid cho phép xác định cách tạo ra các node và cạnh, tùy chỉnh các loại cạnh theo mục đích của người sử dụng.

Cú Pháp Mẫu:

flowchart TD
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Kết quả:

Sequence Diagram

Sequence diagram là một loại diagram thể hiện các quy trình tương tác hoạt động với nhau và theo thứ tự thời gian.

Cú Pháp Mẫu:

sequenceDiagram
    participant Alice
    participant Bob
    participant John
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

Kết quả:

Class Diagram

Class diagram trong UML là một loại sơ đồ cấu trúc tĩnh mô tả cấu trúc của hệ thống thông qua các lớp và mối quan hệ giữa chúng.

Cú Pháp Mẫu:

classDiagram
    Class01 <|-- AveryLongClass : Cool
    Class03 *-- Class04
    Class05 o-- Class06
    Class07 .. Class08
    Class09 --> C2 : Where am i?
    Class09 --* C3
    Class09 --|> Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : size()
    Class01 : int chimp
    Class01 : int gorilla
    Class08 <--> C2: Cool label

Kết quả:

State Diagram

State diagram mô tả hành vi của hệ thống qua các trạng thái khác nhau.

Cú Pháp Mẫu:

stateDiagram
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

Kết quả:

Git Graph

Git graph minh họa các commit và hành động của git trên các branch khác nhau.

Cú Pháp Mẫu:

gitGraph
   commit
   commit
   branch develop
   commit
   commit
   commit
   checkout main
   commit
   commit

Kết quả:

Kết Luận

Mermaid thực sự là một công cụ mạnh mẽ và linh hoạt, cho phép người dùng có nhiều tùy chọn trong việc vẽ các loại diagram khác nhau. Tuy nhiên, trong bài viết này, tôi chỉ có thể giới thiệu một phần nào đó. Nếu bạn cần thêm thông tin chi tiết, có thể tham khảo tài liệu của Mermaid được đính kèm. Hy vọng rằng bạn sẽ tìm thấy nhiều ý tưởng áp dụng Mermaid trong các dự án và tiết kiệm thời gian quý báu của mình.

🔔 Blog: henrytechie.com

☕️ Facebook: Henry Techie

☁️ TikTok: @henrytechie
source: viblo