Lời nói đầu
Xin chào các bạn. Lâu lắm rồi mình mới ngoi lên viết bài nên chắc là mình cũng phải giới thiệu bản thân lại.
Mình là Quân, và tham gia Viblo cũng lâu. Bài đầu tiên mình viết ở Viblo thì đã bắt đầu từ 2018 và sau 7 năm thì Reputation của mình cũng khiêm tốn khoảng 3.9k.
Hiện mình đang làm việc ở Nhật được khoảng hơn 5 năm. Thi thoảng có đi AWS Summit Japan và 1 số event của các hội Ruby. Ngoài ra thì mình có kênh Instagram chuyên Origami, có chơi trống và tại thời điểm viết bài đang tập tành sáng tác nhạc.
Vấn đề: Tại sao mình lại tìm đến Mermaid
Công việc đợt này của mình bắt đầu phải động vào công đoạn thiết kế chứ cũng không còn chỉ mỗi code như xưa. Và các bản thiết kế lần này của mình cũng thiên nhiều về thiết kế DB, thiết kế class, flow, sequence,...
Khi động đến công đoạn này, từ trước đến nay mình toàn dùng draw.io. Tuy nhiên, việc kéo thả với draw.io tưởng là đơn giản mà cũng rất mất thời gian bởi:
- Tạo và chỉnh sửa từng phần bằng tay
- Thay tác kéo thả
- Cần phải chú ý đẹp xấu, dễ nhìn hay không
Và sau đó thì mình cũng nhận 1 dự án khác. Trong quá trình làm dự án thứ 2 song song, khách đó sử dụng Notion và trong phần diagram, mình đã nhận thấy 1 block code cùng với ngôn ngữ Mermaid và chế độ view gồm Code, Preview và Split. Và đó là lúc mình biết đến Mermaid.
Mermaid là gì?
Mermaid là một thư viện JavaScript cho phép bạn tạo sơ đồ và lưu đồ bằng cú pháp đơn giản, giống như đánh dấu. Nó hỗ trợ nhiều loại sơ đồ, bao gồm lưu đồ, sơ đồ trình tự, sơ đồ lớp và sơ đồ trạng thái. Các sơ đồ được tạo bằng cách sử dụng mã dựa trên văn bản, sau đó được kết xuất thành một sơ đồ dựa trên SVG, tương tác, có thể dễ dàng tích hợp vào các trang web và các tài liệu khác. Mermaid được sử dụng rộng rãi trong các tài liệu kỹ thuật và thuyết trình.
Mermaid có những ưu điểm gì?
- Dễ dàng tích hợp: Mermaid có thể nhúng trực tiếp vào Markdown, giúp việc tạo sơ đồ trong tài liệu trở nên thuận tiện.
- Cú pháp đơn giản: Không cần phần mềm thiết kế phức tạp, chỉ cần viết mã văn bản.
- Tương tác: Sơ đồ có thể phóng to, thu nhỏ và chỉnh sửa dễ dàng.
- Hỗ trợ nhiều loại sơ đồ: Lưu đồ, sơ đồ trình tự, sơ đồ lớp, sơ đồ trạng thái, v.v.
Cách sử dụng Mermaid trong Markdown
Chỉ cần đặt mã Mermaid trong khối mã với ngôn ngữ mermaid như ví dụ trên. Một số nền tảng như GitHub, GitLab, hoặc các trình soạn thảo hỗ trợ Markdown nâng cao đều có thể hiển thị trực tiếp sơ đồ Mermaid.
Ví dụ về Mermaid
Để có cái nhìn trực quan về Mermaid lần này, mình sẽ sử dụng Mermaid Live
Và đề bài mình đưa ra làm ví dụ là: Vẽ Flow diagram của chương trình xử lý Fizz-Buzz
Và sơ đồ trên được dựng bằng đoạn code sau:
graph TD A[Start] --> B{Input Number N}; B --> C{Initialize i = 1}; C --> D{i <= N?}; D -- Yes --> E{Is i divisible by 15?}; E -- Yes --> F["Print 'FizzBuzz'"]; F --> I{Increment i by 1}; E -- No --> G{Is i divisible by 3?}; G -- Yes --> H["Print 'Fizz'"]; H --> I; G -- No --> J{Is i divisible by 5?}; J -- Yes --> K["Print 'Buzz'"]; K --> I; J -- No --> L[Print i]; L --> I; I --> D; D -- No --> M[End];
Giải thích cú pháp:
- flowchart: keyword của loại chart này (bạn có thể dùng graph cũng tương đương).
- TD: hướng của chart (top to down). Ngoài ra còn có:
- TB: top to bottom (giống top to down)
- BT: bottom to top
- RL: right to left
- LR: left to right
- A, B, C, D: tên của các node. Ngoài hình chữ nhật mặc định, bạn cũng có thể dùng nhiều loại hình khác như hình chữ nhật bo tròn, hình thang, hình tròn...
- -->: loại cạnh có hướng. Ngoài ra còn các loại vô hướng, đa hướng, có gắn text...
Vậy nếu chuyển thành Sequence Diagram thì như thế này
sequenceDiagram participant P as Program participant L as Loop (i from 1 to N) participant C as Conditionals participant O as Output P->>L: Start FizzBuzz(N) loop For each number i L->>C: Check divisibility for i alt i % 15 == 0 C->>O: Print "FizzBuzz" else i % 3 == 0 C->>O: Print "Fizz" else i % 5 == 0 C->>O: Print "Buzz" else C->>O: Print i end O-->>L: Result for i end L->>P: All numbers processed P->>P: End
Và ta sẽ có
Tổng kết
Sẽ phải mất 1 chút thời gian để học về syntax này, nhưng mình thấy nó khá dễ học cho các bạn non-tech. Hơn nữa sự hỗ trợ từ AI hiện nay cũng sẽ giúp các bạn rất nhiều.
Bài viết mình đến đây là kết thúc. Cảm ơn các bạn đã đọc bài