Mermaid

Nhiều người từng rất ngại vẽ sơ đồ. Không phải là không có những công cụ vẽ sơ đồ và trực quan hóa tốt, nhưng họ phải dành nhiều thời gian hơn để vật lộn với công cụ đang dùng thay vì suy nghĩ thấu đáo quy trình mà mình muốn trực quan hóa.

Bạn biết đấy: Mở một công cụ giao diện đồ họa cồng kềnh, kéo các hộp xung quanh, chỉnh sửa vị trí mũi tên, rồi lại làm lại từ đầu khi có gì thay đổi. Chúng ta cần một công cụ có thể vẽ sơ đồ nhanh chóng và không bị gián đoạn. May mắn thay, Mermaid chính là công cụ đáp ứng được yêu cầu đó.

Mermaid là gì?

Một công cụ vẽ sơ đồ ưu tiên văn bản nhanh chóng, chứ không phải để tạo ra các biểu tượng đẹp mắt

Mermaid là một công cụ vẽ sơ đồ mã nguồn mở dựa trên Javascript, cho phép bạn tạo sơ đồ bằng các định nghĩa văn bản đơn giản. Nó khá giống Markdown, nhưng dành cho trực quan hóa.

Thay vì kéo các hình dạng và đường nối xung quanh canvas, bạn chỉ cần viết một vài dòng code, và Mermaid sẽ tự động chuyển đổi chúng thành những sơ đồ hoàn chỉnh. Cú pháp của nó khá giống với Markdown, thứ mà bạn sử dụng hàng ngày.

Lợi thế về tốc độ mà nó mang lại là rất đáng kể. Các công cụ vẽ sơ đồ truyền thống buộc bạn phải liên tục chuyển đổi ngữ cảnh. Bạn đang suy nghĩ về quy trình làm việc của mình, rồi đột nhiên lo lắng về việc mũi tên có được căn chỉnh hoàn hảo hay không, hoặc hộp có đúng màu sắc hay không. Với Mermaid, bạn chỉ cần gõ logic và công cụ sẽ xử lý phần còn lại.

Ngoài ra còn có trình chỉnh sửa trực tiếp hiển thị các thay đổi theo thời gian thực khi bạn gõ, loại bỏ mọi thời gian chờ đợi để hiển thị hoặc sự phức tạp không cần thiết. Các lần lặp cũng có thể được thực hiện nhanh chóng bằng cách chèn những dòng văn bản khi cần thiết.

Các loại sơ đồ mà Mermaid xử lý tốt nhất

Flowchart, sơ đồ trình tự, sơ đồ thời gian, v.v... mà không cần thao tác kéo thả

Mermaid hỗ trợ rất nhiều loại sơ đồ ngay từ đầu. Chúng bao gồm:

Mọi người thường dùng Mermaid để tạo sơ đồ logic cơ bản và sơ đồ tư duy. Thực tế, nó là một công cụ lập sơ đồ tư duy tốt đến nỗi nhiều người đã ngừng phác thảo trên giấy. Cú pháp có thể hơi khác nhau giữa các loại sơ đồ, nhưng nhìn chung khá nhất quán, nên một khi bạn đã học được một loại, việc học các loại khác cũng khá dễ dàng.

Việc bắt đầu chỉ mất vài phút

Viết ở dạng plain text và xem trước ngay lập tức

Bạn không cần cài đặt bất cứ thứ gì để dùng thử Mermaid. Chỉ cần vào Mermaid Live Editor và bắt đầu gõ.

Ví dụ, đây là một sơ đồ khối đơn giản:

flowchart TD
A[Start] --> B{Is it working?}
B -->|Yes| C[Great!]
B -->|No| D[Debug it]
D --> B

Vậy là xong! Gõ đoạn code này vào trình chỉnh sửa và bạn sẽ ngay lập tức thấy một sơ đồ khối hoàn chỉnh với các hình thoi quyết định, mũi tên có nhãn và bố cục gọn gàng.

Một sơ đồ phức tạp hơn như sơ đồ trình tự cũng có thể được viết theo cùng một cách. Tuy nhiên, cú pháp sẽ hơi khác một chút.

sequenceDiagram
User->>Frontend: Enter credentials
Frontend->>API: POST /login
API->>Database: Verify user
Database->>API: User valid
API->>Frontend: Return token
Frontend->>User: Login successful

Một lần nữa, toàn bộ sơ đồ có thể đọc được bằng văn bản. Tuy nhiên, nó được hiển thị thành một sơ đồ chuyên nghiệp thể hiện sự tương tác qua lại giữa các thành phần khác nhau.

Và nếu bạn đang sử dụng Mermaid Chart, trình chỉnh sửa nâng cao từ nhóm Mermaid, thì có một tính năng AI có thể tạo sơ đồ từ các prompt bằng tiếng Anh đơn giản.

Sau đó, bạn có thể tinh chỉnh các sơ đồ này bằng cách sử dụng trình chỉnh sửa văn bản hoặc giao diện kéo và thả trực quan. Cách tiếp cận kết hợp này mang lại cho bạn những ưu điểm của cả hai.

Cho đến nay, mọi người đã sử dụng Mermaid để tạo các sơ đồ được nhúng trực tiếp vào những file readme, trang wiki và hướng dẫn kỹ thuật. Bạn cũng có thể sử dụng và thậm chí tạo ra các sơ đồ này ngay trong những công cụ như Obsidian và Notion nhờ vào tính năng hỗ trợ gốc.