Trình chỉnh sửa trực tuyến Mermaid - Tạo biểu đồ luồng, biểu đồ tuần tự và biểu đồ lớp bằng cú pháp Mermaid chỉ với một cú nhấp và 21 loại biểu đồ khác

Mermaid là công cụ tạo biểu đồ dựa trên cú pháp văn bản. Bằng cách viết mã Mermaid đơn giản, bạn có thể tạo biểu đồ luồng, biểu đồ tuần tự, biểu đồ lớp, biểu đồ trạng thái, biểu đồ ER, biểu đồ Gantt, sơ đồ tư duy, biểu đồ kiến trúc và nhiều loại biểu đồ khác.

Khác với các công cụ vẽ kéo thả truyền thống, Mermaid chủ yếu dùng mã để mô tả nút, quan hệ, thứ tự thời gian và cấu trúc dữ liệu trong biểu đồ. Sau khi sửa mã, biểu đồ sẽ tự động được tạo lại, vì vậy rất phù hợp cho tài liệu kỹ thuật, thiết kế sản phẩm, quản lý dự án, phát triển phần mềm và sắp xếp tri thức.

Bài viết này giới thiệu cú pháp cơ bản của Mermaid và tổng hợp các loại biểu đồ mà trình chỉnh sửa Mermaid hỗ trợ kết xuất, cùng cú pháp khai báo, ví dụ mã và tình huống sử dụng. Nếu bạn muốn viết và xem trước mã Mermaid trực tiếp trên mạng, bạn có thể dùng thử miễn phí trình chỉnh sửa trực tuyến Mermaid của ProcessOn.

Mermaid là gì?

Mermaid là công cụ dùng cú pháp văn bản để tạo biểu đồ. Đoạn mã dưới đây có thể tạo một biểu đồ luồng Mermaid đơn giản:

flowchart TD

A[Start] --> B[Enter information]

B --> C{ Completed?}

C -->|Yes| D[End]

C -->|No| B

Kết quả kết xuất như sau:

Trong đó: flowchart TD dùng để khai báo tạo một biểu đồ luồng xếp từ trên xuống dưới.

Logic vận hành của Mermaid có thể tóm tắt như sau:

Viết mã Mermaid → Phân tích mã → kết xuất biểu đồ → Sửa mã → biểu đồ cập nhật theo thời gian thực

Vì vậy, một trong những điểm mấu chốt khi học Mermaid là hiểu cú pháp khai báo tương ứng với từng loại biểu đồ.

Mermaid hỗ trợ những loại biểu đồ nào?

Các loại biểu đồ khác nhau dùng cú pháp khai báo Mermaid khác nhau, hiện nay các biểu đồ Mermaid phổ biến bao gồm:

Loại biểu đồ	Cú pháp khai báo Mermaid	Ứng dụng phổ biến
Biểu đồ luồng	flowchart	Quy trình nghiệp vụ, thuật toán, quy trình công việc
Biểu đồ tuần tự	sequenceDiagram	Tương tác hệ thống, gọi API
Biểu đồ lớp	classDiagram	Cấu trúc phần mềm, mô hình hóa hướng đối tượng
Biểu đồ trạng thái	stateDiagram-v2	Chuyển đổi trạng thái, máy trạng thái
Biểu đồ ER	erDiagram	Quan hệ thực thể trong cơ sở dữ liệu
Biểu đồ Gantt	gantt	Kế hoạch dự án, tiến độ công việc
Biểu đồ hành trình người dùng	journey	Trải nghiệm người dùng, hành trình khách hàng
Sơ đồ tư duy	mindmap	Sắp xếp tri thức, động não
Dòng thời gian	timeline	Dòng thời gian, sự kiện lịch sử
Biểu đồ tròn	pie	Phân tích tỷ lệ, cấu thành
Biểu đồ góc phần tư	quadrantChart	Phân loại, mức ưu tiên, phân tích định vị
Biểu đồ Git	gitGraph	Nhánh Git, commit, hợp nhất
Biểu đồ Sankey	sankey-beta	Dòng chảy dữ liệu, tài nguyên, lưu lượng
Biểu đồ XY	xychart-beta	Xu hướng dữ liệu, so sánh giá trị
Biểu đồ radar	radar	So sánh chỉ số đa chiều
Biểu đồ C4	C4Context, v.v.	Mô hình hóa kiến trúc phần mềm
Biểu đồ kiến trúc	architecture-beta	Kiến trúc hệ thống, dịch vụ và tài nguyên
Biểu đồ kanban	kanban	Quản lý công việc, trạng thái công việc
Biểu đồ khối	block-beta	Mô-đun, cấu trúc và quan hệ hệ thống
Biểu đồ gói	packet-beta	Cấu trúc gói dữ liệu mạng
Biểu đồ yêu cầu	requirementDiagram	Phân tích yêu cầu và quan hệ yêu cầu

Các phiên bản trình chỉnh sửa Mermaid khác nhau có thể thay đổi về cú pháp và tính năng hỗ trợ biểu đồ, vì vậy khi dùng thực tế hãy theo cú pháp mà trình chỉnh sửa hỗ trợ.

Biểu đồ luồng Mermaid

Cú pháp cơ bản

Mermaid dùng khai báo flowchart để tạo biểu đồ luồng. Cách viết đơn giản nhất:

flowchart TD

A[Start] --> B[Arrange]

B --> C[End]

Kết quả kết xuất

Trong đó:

flowchart: khai báo tạo biểu đồ luồng
TD: xếp từ trên xuống dưới
A[Start]: tạo một nút
-->: tạo đường nối có mũi tên

Biểu đồ luồng Mermaid còn có thể dùng LR (từ trái sang phải), RL (từ phải sang trái), BT (từ dưới lên trên) và các thiết lập hướng khác. Ví dụ:

flowchart LR

A[Start] --> B[Arrange] --> C[End]

Biểu thị biểu đồ luồng được sắp xếp từ trái sang phải.

Cú pháp thường dùng

Cú pháp	Biểu đồ	Ý nghĩa
(text)	Hình chữ nhật bo góc	Biểu thị điểm bắt đầu, kết thúc hoặc thao tác thông thường của luồng
[text]	Hình chữ nhật	Biểu thị bước cụ thể, công việc hoặc quá trình xử lý
{text}	Hình thoi	Biểu thị phán đoán, nhánh điều kiện
((text))	Hình tròn	Biểu thị điểm kết nối hoặc sự kiện
[[text]]	Hình chữ nhật đôi	Biểu thị việc gọi luồng con, mô-đun con
[(text)]	Hình trụ	Biểu thị nút cơ sở dữ liệu
>text]	Hình bất đối xứng	Biểu thị đầu vào/đầu ra
[/text/]	Hình bình hành	Biểu thị dữ liệu đầu vào hoặc đầu ra
-->	Mũi tên	Biểu thị hướng diễn ra của luồng
---	Đường nối không có mũi tên	Biểu thị quan hệ liên kết
-.->	Mũi tên nét đứt	Biểu thị luồng tùy chọn, quan hệ tham chiếu
==>	Mũi tên đậm	Biểu thị luồng trọng tâm hoặc liên kết mạnh

Xem cú pháp chi tiết để tạo biểu đồ luồng bằng Mermaid tại trang sau: https://www.processon.io/vi/mermaid/flowchart

Biểu đồ luồng phù hợp cho các tình huống như quy trình nghiệp vụ, quy trình công việc, luồng thuật toán, luồng hệ thống và luồng ra quyết định, dùng thử miễn phí trình chỉnh sửa trực tuyến Mermaid cho biểu đồ luồng.

Biểu đồ tuần tự Mermaid

Cú pháp cơ bản

Mermaid dùng khai báo sequenceDiagram để tạo biểu đồ tuần tự. Ví dụ đơn giản nhất:

sequenceDiagram

Alice->>John: Hello John

John-->>Alice: Hello Alice

Kết quả kết xuất

Trong đó:

sequenceDiagram: Biểu thị việc tạo một biểu đồ tuần tự Mermaid
->>: mũi tên nét liền, biểu thị lời gọi thông điệp bất đồng bộ
-->>: mũi tên nét đứt, biểu thị phản hồi bất đồng bộ hoặc thông điệp trả về

Cú pháp thường dùng

Cú pháp	Biểu đồ	Ý nghĩa
sequenceDiagram	Biểu đồ tuần tự	Tạo một biểu đồ tuần tự
A->B: message	Nét liền	Biểu thị lời gọi thông điệp đồng bộ hoặc tương tác thông thường
A-->B: message	Nét đứt	Biểu thị thông điệp trả về hoặc tương tác liên kết yếu
A->>B: message	Mũi tên nét liền	biểu thị lời gọi thông điệp bất đồng bộ
A-->>B: message	Mũi tên nét đứt	biểu thị phản hồi bất đồng bộ hoặc thông điệp trả về
participant A	Bên tham gia	Định nghĩa đối tượng, vai trò hoặc hệ thống trong tương tác
actor A	Vai trò	Biểu thị các bên tham gia chủ động như người dùng, hệ thống bên ngoài
activate A	Hộp kích hoạt	Biểu thị đối tượng bắt đầu xử lý yêu cầu
deactivate A	Kết thúc kích hoạt	Biểu thị đối tượng hoàn thành xử lý hiện tại
loop text	Hộp lặp	Biểu thị quá trình tương tác được thực hiện lặp lại
alt text	Nhánh điều kiện	Biểu thị đường tương tác trong các điều kiện khác nhau
opt text	Luồng tùy chọn	Biểu thị tương tác có thể được thực hiện
par text	Hộp song song	Biểu thị nhiều thao tác được thực hiện đồng thời

Xem cú pháp chi tiết để tạo biểu đồ tuần tự bằng Mermaid tại trang sau: https://www.processon.io/vi/mermaid/sequence-diagram

Biểu đồ tuần tự phù hợp để mô tả tương tác diễn ra theo thứ tự thời gian giữa người dùng với hệ thống, hệ thống với hệ thống, dịch vụ với dịch vụ, dùng thử miễn phí trình chỉnh sửa trực tuyến Mermaid cho biểu đồ tuần tự.

Biểu đồ lớp Mermaid

Cú pháp cơ bản

Mermaid dùng khai báo classDiagram để tạo biểu đồ lớp.

classDiagram

Animal <|-- Duck

Animal <|-- Fish

class Animal {

+String name

+eat()

}

class Duck {

+swim()

}

Kết quả kết xuất

Trong đó:

classDiagram: Biểu thị việc tạo biểu đồ lớp Mermaid
<|--: Biểu thị quan hệ kế thừa
+String name: Biểu thị thuộc tính hoặc phương thức công khai

Cú pháp thường dùng

Cú pháp	Biểu đồ	Ý nghĩa
classDiagram	Biểu đồ lớp	Tạo một biểu đồ lớp
class ClassName	Lớp	Định nghĩa một đối tượng lớp
ClassName : attribute	Thuộc tính	Biểu thị biến thành viên trong lớp
ClassName : method()	Phương thức	Định nghĩa phương thức của lớp
<\|--	Tam giác rỗng+ Nét liền	Biểu thị quan hệ kế thừa
<\|..	Tam giác rỗng+ Nét đứt	Biểu thị quan hệ thực thi
*--	Hình thoi đặc+ Nét liền	Biểu thị quan hệ tổ hợp
o--	Hình thoi rỗng+ Nét liền	Biểu thị quan hệ tập hợp
-->	Mũi tên nét liền	Biểu thị quan hệ liên kết
..>	Mũi tên nét đứt	Biểu thị quan hệ phụ thuộc
--	Nét liền	Biểu thị quan hệ kết nối thông thường
+attribute	Dấu cộng	Biểu thị thuộc tính hoặc phương thức công khai
-attribute	Dấu trừ	Biểu thị thuộc tính hoặc phương thức riêng tư

Các ký hiệu như +, -, # đứng trước thành viên lớp có thể biểu thị các mức truy cập khác nhau.

Xem cú pháp chi tiết để tạo biểu đồ lớp bằng Mermaid tại trang sau: https://www.processon.io/vi/mermaid/class-diagram

Biểu đồ lớp phù hợp cho các tình huống như thiết kế phần mềm, mô hình hóa hướng đối tượng, phân tích cấu trúc chương trình, dùng thử miễn phí trình chỉnh sửa trực tuyến Mermaid cho biểu đồ lớp.

Biểu đồ trạng thái Mermaid

Cú pháp cơ bản

Mermaid dùng khai báo stateDiagram-v2 để tạo biểu đồ trạng thái.

stateDiagram-v2

state "Pending Payment" as Pending

[*] --> Pending

Pending --> Paid

Paid --> Shipped

Shipped --> Completed

Completed--> [*]

Kết quả kết xuất

Trong đó:

stateDiagram-v2: Biểu thị việc tạo biểu đồ trạng thái Mermaid
[*] -->: Biểu thị việc đi vào trạng thái đầu tiên
-->: Biểu thị chuyển trạng thái
--> [*]: Biểu thị kết thúc luồng trạng thái

Cú pháp thường dùng

Cú pháp	Biểu đồ	Ý nghĩa
stateDiagram-v2	Biểu đồ trạng thái	Tạo một biểu đồ trạng thái
state StateName	Hình chữ nhật bo góc	Định nghĩa nút trạng thái cơ bản
state StateName : text	Hình chữ nhật bo góc có văn bản	Gắn văn bản mô tả cho trạng thái
[*]	Chấm tròn đặc hoặc vòng tròn hai lớp	Biểu thị trạng thái bắt đầu hoặc kết thúc
[*] --> StateName	Mũi tên bắt đầu	Biểu thị việc đi vào trạng thái đầu tiên
StateName --> [*]	Mũi tên kết thúc	Biểu thị kết thúc luồng trạng thái
A --> B	Mũi tên nét liền	Biểu thị chuyển trạng thái
A --> B: event	Mũi tên nét liền có chú thích	Chuyển trạng thái có sự kiện kích hoạt
state StateName { ... }	Hình chữ nhật bo góc lồng nhau	Định nghĩa trạng thái phức hợp
state Node <<choice>>	Hình thoi	Nút lựa chọn rẽ nhánh
state Fork <<fork>>	Đường phân cách ngang đậm	Biểu thị bắt đầu luồng song song
state Join <<join>>	Đường phân cách ngang đậm	Biểu thị kết thúc và hợp nhất luồng song song

Xem cú pháp chi tiết để tạo biểu đồ trạng thái bằng Mermaid tại trang sau: https://www.processon.io/vi/mermaid/state-diagram

Biểu đồ trạng thái phù hợp để biểu thị trạng thái đơn hàng, trạng thái quy trình công việc, trạng thái người dùng, trạng thái hệ thống cũng như máy trạng thái, dùng thử miễn phí trình chỉnh sửa trực tuyến Mermaid cho biểu đồ trạng thái.

Biểu đồ ER Mermaid

Cú pháp cơ bản

Mermaid dùng khai báo erDiagram để tạo biểu đồ quan hệ thực thể, tức biểu đồ ER.

erDiagram

USER ||--o{ ORDER : places

ORDER ||--|{ PRODUCT : contains

Kết quả kết xuất

Trong đó:

erDiagram: Biểu thị việc tạo biểu đồ ER Mermaid
||--o{: Kết nối một-nhiều, Biểu thị một thực thể tương ứng với nhiều thực thể, có thể để trống
||--|{: Kết nối một-nhiều, Biểu thị một thực thể tương ứng với nhiều thực thể, tối thiểu 1

Cú pháp thường dùng

Cú pháp	Biểu đồ	Ý nghĩa
erDiagram	biểu đồ ER	Tạo biểu đồ ER
ENTITY { }	Hình chữ nhật	Định nghĩa một thực thể
type field	Nhãn thuộc tính	Định nghĩa thuộc tính thực thể
type field PK	Khóa chính	Định nghĩa khóa chính của thực thể
type field FK	Khóa ngoại	Định nghĩa khóa ngoại của thực thể
type field UK	Khóa duy nhất	Định nghĩa trường ràng buộc duy nhất
\|\|	Một	Bắt buộc và chỉ một
o\|	Không hoặc một	Không hoặc một
\|{	Một hoặc nhiều	Tối thiểu một
o{	Không hoặc một hoặc nhiều	Không hoặc nhiều

Xem cú pháp chi tiết để tạo biểu đồ ER bằng Mermaid tại trang sau: https://www.processon.io/vi/mermaid/er-diagram

Biểu đồ ER có thể biểu thị thực thể, thuộc tính và quan hệ giữa các thực thể, thường dùng trong thiết kế cơ sở dữ liệu, dùng thử miễn phí trình chỉnh sửa trực tuyến Mermaid cho biểu đồ ER.

Cú pháp sơ đồ tư duy Mermaid

Cú pháp cơ bản

Mermaid dùng khai báo mindmap để tạo sơ đồ tư duy.

mindmap

root((Mermaid))

Flowchart

Sequence diagram

Class diagram

Gantt chart

Mind map

Kết quả kết xuất

Trong đó:

Mindmap: Biểu thị việc tạo sơ đồ tư duy Mermaid
root(()): biểu thị việc tạo chủ đề gốc hình tròn

Cú pháp thường dùng

Cú pháp	Biểu đồ	Ý nghĩa
mindmap	Sơ đồ tư duy	Tạo một sơ đồ tư duy
root[text]	Hình chữ nhật	Chủ đề gốc hình chữ nhật
root(text)	Hình chữ nhật bo góc	Chủ đề gốc hình chữ nhật bo góc
root((text))	Hình tròn	Chủ đề gốc hình tròn
root{{text}}	Hình lục giác	Chủ đề gốc hình lục giác
root)text(	Hình bong bóng	Chủ đề gốc hình bong bóng
[text]	Hình chữ nhật	Nút hình chữ nhật
(text)	Hình chữ nhật bo góc	Nút hình chữ nhật bo góc
((text))	Hình tròn	Nút hình tròn
{{text}}	Hình lục giác	Nút hình lục giác
)text(	Hình bong bóng	Nút bong bóng

Xem cú pháp chi tiết để tạo sơ đồ tư duy bằng Mermaid tại trang sau: https://www.processon.io/vi/mermaid/mindmap

Sơ đồ tư duy chủ yếu biểu thị quan hệ phân cấp bằng thụt lề, vì vậy rất phù hợp cho sắp xếp tri thức, động não, ghi chú bài giảng và kiến trúc thông tin, dùng thử miễn phí trình chỉnh sửa trực tuyến Mermaid cho sơ đồ tư duy.

Biểu đồ Gantt Mermaid

Cú pháp cơ bản

Mermaid dùng khai báo gantt để tạo biểu đồ Gantt.

gantt

title Project Plan

dateFormat YYYY-MM-DD

section Design

Requirements Analysis:a1, 2026-01-01, 3d

UI Design:after a1, 2d

section Development

Front-end Development:2026-01-06, 4d

Back-end Development:2026-01-07, 4d

Kết quả kết xuất

Trong đó:

gantt: Biểu thị việc tạo biểu đồ Gantt Mermaid
title: biểu thị tiêu đề của biểu đồ Gantt
dateFormat: định nghĩa định dạng phân tích ngày trên dòng thời gian
section: biểu thị các nhóm công việc khác nhau

Cú pháp thường dùng

Cú pháp	Biểu đồ	Ý nghĩa
gantt	Biểu đồ Gantt	Tạo một biểu đồ Gantt
title text	Tiêu đề	Đặt tiêu đề biểu đồ Gantt
dateFormat text	Nhãn cấu hình ngày	Định nghĩa định dạng phân tích ngày trên dòng thời gian
section text	Thanh tiêu đề khối màu nhóm	Phân chia nhóm công việc
TaskName : id, startDate, endDate	Thanh công việc nằm ngang	Định nghĩa thuộc tính liên quan của công việc
startDate	Thanh công việc nằm ngang	Định nghĩa thời gian bắt đầu
endDate	Thanh công việc nằm ngang	Định nghĩa thời gian kết thúc
duration	Thanh công việc nằm ngang	Định nghĩa thời lượng công việc
id	Tùy chỉnh	Định nghĩa mã số công việc
after id	Thanh công việc nằm ngang	Định nghĩa công việc bắt đầu sau công việc tiền đề
16d, 2w	Thanh công việc nằm ngang	Biểu thị ngày hoặc tuần
milestone, date	Hình thoi đặc	Đặt nút cột mốc

Xem cú pháp chi tiết để tạo biểu đồ Gantt bằng Mermaid tại trang sau: https://www.processon.io/vi/mermaid/gantt

Biểu đồ Gantt Mermaid phù hợp cho kế hoạch dự án, sắp xếp công việc, tiến độ phát triển và quản lý dự án, dùng thử miễn phí trình chỉnh sửa trực tuyến Mermaid cho biểu đồ Gantt.

Biểu đồ hành trình người dùng Mermaid

Cú pháp cơ bản

Mermaid dùng khai báo journey để tạo biểu đồ hành trình người dùng.

journey

title User purchases a product

section Browse

Search for products: 5: User

View details: 4: User

section Place order

Add to cart: 5: User

Complete payment: 3: User

Kết quả kết xuất

Trong đó:

journey: Biểu thị việc tạo biểu đồ hành trình người dùng Mermaid
title: biểu thị tiêu đề của biểu đồ hành trình người dùng
section: biểu thị nhóm giai đoạn của luồng
Search for products: 5: User: định nghĩa công việc cụ thể trong giai đoạn, nhánh mức độ hài lòng, vai trò tham gia

Cú pháp thường dùng

Cú pháp	Biểu đồ	Ý nghĩa
journey	Biểu đồ hành trình người dùng	Tạo một biểu đồ hành trình người dùng
title text	Tiêu đề	Tiêu đề biểu đồ hành trình người dùng
section text	Khối phân đoạn	Phân chia nhóm giai đoạn của luồng
TaskName:num:Actor	Nút luồng + trục thang mức độ hài lòng	Định nghĩa công việc tương tác trong giai đoạn, điểm mức độ hài lòng, vai trò tham gia
num (1~5)	Điểm mức độ hài lòng	1 điểm là thấp nhất, 5 điểm là tốt nhất
Me, Cat	Vai trò	Định nghĩa nhiều vai trò tham gia công việc đó

Xem cú pháp chi tiết để tạo biểu đồ hành trình người dùng bằng Mermaid tại trang sau: https://www.processon.io/vi/mermaid/user-journey-diagram

Biểu đồ hành trình người dùng phù hợp để phân tích các bước và trải nghiệm khác nhau mà khách hàng trải qua từ khi tiếp xúc sản phẩm đến khi hoàn thành mục tiêu, dùng thử miễn phí trình chỉnh sửa trực tuyến Mermaid cho biểu đồ hành trình người dùng.

Dòng thời gian Mermaid

Cú pháp cơ bản

Mermaid dùng khai báo timeline để tạo dòng thời gian.

timeline

title Mermaid Development History

2019 : Project Development

2020 : Feature Expansion

2021 : More Diagram Types

Kết quả kết xuất

Trong đó:

timeline: Biểu thị việc tạo dòng thời gian Mermaid
title: biểu thị tiêu đề dòng thời gian
2019 : Phát triển dự án: định nghĩa sự kiện tương ứng với mốc thời gian

Cú pháp	Biểu đồ	Ý nghĩa
timeline	Dòng thời gian	Tạo một dòng thời gian
title text	Tiêu đề	Đặt tiêu đề dòng thời gian
section text	Khối phân đoạn	Phân chia nhóm giai đoạn thời gian
date : Event1	Sự kiện	Định nghĩa sự kiện tương ứng với mốc thời gian
: Event2	Nhiều sự kiện	Các sự kiện khác tại cùng mốc thời gian
Dấu cách	Xuống dòng	Xuống dòng cho mô tả sự kiện quá dài

Xem cú pháp chi tiết để tạo dòng thời gian bằng Mermaid tại trang sau: https://www.processon.io/vi/mermaid/timeline

Dòng thời gian phù hợp để hiển thị sự kiện lịch sử, phát triển dự án, vòng lặp sản phẩm và thông tin theo thứ tự thời gian, dùng thử miễn phí trình chỉnh sửa trực tuyến Mermaid cho dòng thời gian.

Cú pháp biểu đồ góc phần tư Mermaid

Cú pháp cơ bản

Mermaid dùng khai báo quadrantChart để tạo biểu đồ góc phần tư.

quadrantChart

title Product Positioning

x-axis Low Price--> High Price

y-axis Low Quality--> High Quality

quadrant-1 High-end

quadrant-2 Quality-focused

quadrant-3 Basic

quadrant-4 Value-for-money

Product A: [0.8, 0.7]

Product B: [0.3, 0.8]

Kết quả kết xuất

Trong đó:

quadrantChart: Biểu thị việc tạo biểu đồ góc phần tư Mermaid
x-axis: định nghĩa nhãn hai đầu trục ngang
y-axis: định nghĩa nhãn hai đầu trục dọc
quadrant-1: Đặt văn bản chú thích bên trong góc phần tư phía trên bên phải
quadrant-2: Đặt văn bản chú thích bên trong góc phần tư phía trên bên trái
quadrant-3: Đặt văn bản chú thích bên trong góc phần tư phía dưới bên trái
quadrant-4: Đặt văn bản chú thích bên trong góc phần tư phía dưới bên phải
Product A: [0.8, 0.7]: định nghĩa điểm tọa độ, giá trị x/y từ 0-1

Xem cú pháp chi tiết để tạo biểu đồ góc phần tư bằng Mermaid tại trang sau: https://www.processon.io/vi/mermaid/quadrant-chart

Biểu đồ góc phần tư phù hợp cho định vị sản phẩm, phân tích mức ưu tiên, phân tích cạnh tranh và phân loại hai chiều, dùng thử miễn phí trình chỉnh sửa trực tuyến Mermaid cho biểu đồ góc phần tư.

Biểu đồ kanban Mermaid

Cú pháp cơ bản

Biểu đồ kanban Mermaid dùng để tổ chức các hạng mục công việc theo trạng thái công việc, ví dụ cần xử lý, đang thực hiện và đã hoàn thành. Cấu trúc điển hình có thể được biểu diễn như sau:

kanban

Todo

Task A

Task B

Doing

Task C

Done

Task D

Kết quả kết xuất

Trong đó：

kanban: biểu thị việc tạo biểu đồ kanban Mermaid
Todo: định nghĩa phân loại trạng thái kanban
Task A: Biểu thị công việc cụ thể

Xem cú pháp chi tiết để tạo biểu đồ kanban bằng Mermaid tại trang sau: https://www.processon.io/vi/mermaid/kanban

Biểu đồ kanban phù hợp cho quản lý dự án, theo dõi công việc, quy trình nghiên cứu và phát triển và quản lý quy trình công việc, dùng thử miễn phí trình chỉnh sửa trực tuyến Mermaid cho biểu đồ kanban.

Biểu đồ yêu cầu Mermaid

Cú pháp cơ bản

Biểu đồ yêu cầu có thể dùng để biểu thị quan hệ giữa yêu cầu, chức năng và phần tử hệ thống, Mermaid dùng khai báo requirementDiagram để tạo biểu đồ yêu cầu.

requirementDiagram

requirement userRequirement {

id: 1

text: Customers can purchase products

risk: low

verifymethod: test

}

Kết quả kết xuất

Trong đó:

requirementDiagram: Biểu thị việc tạo biểu đồ yêu cầu Mermaid
requirement userRequirement { }: định nghĩa yêu cầu cơ bản
text: định nghĩa tên yêu cầu
risk: định nghĩa mức rủi ro
verifymethod: định nghĩa phương thức xác minh

Cú pháp thường dùng

Cú pháp	Biểu đồ	Ý nghĩa
requirementDiagram	Biểu đồ yêu cầu	Tạo một biểu đồ yêu cầu
Requirement name { }	Yêu cầu	Định nghĩa yêu cầu cơ bản
functionalRequirement name { }	Chức năng	Định nghĩa yêu cầu chức năng
interfaceRequirement name { }	Giao diện	Định nghĩa yêu cầu giao diện
performanceRequirement name { }	Hiệu năng	Định nghĩa yêu cầu hiệu năng
physicalRequirement name { }	Vật lý	Định nghĩa yêu cầu vật lý
element name {type: name docRef: name}	Phần tử	Định nghĩa các phần tử thực thể như hệ thống / thành phần / kiểm thử
X - satisfies -> Y	Mũi tên nét đứt	Thực thể đáp ứng yêu cầu tương ứng
X - contains -> Y	Nét liền, điểm bắt đầu có đầu tròn hình chữ thập dấu cộng	Một yêu cầu bao hàm một yêu cầu khác
X - derives -> Y	Mũi tên nét đứt	Yêu cầu được dẫn xuất từ yêu cầu khác
X - copies -> Y	Mũi tên nét đứt	Yêu cầu sao chép một yêu cầu khác
X - traces -> Y	Mũi tên nét đứt	Yêu cầu có liên kết truy vết hai chiều

Cú pháp đầy đủ để tạo biểu đồ yêu cầu Mermaid được trình bày ở trang sau: https://www.processon.io/vi/mermaid/requirement-diagram

Biểu đồ yêu cầu phù hợp cho phân tích yêu cầu sản phẩm, kỹ thuật hệ thống và truy vết yêu cầu, dùng thử miễn phí trình chỉnh sửa trực tuyến Mermaid cho biểu đồ yêu cầu.

Biểu đồ tròn Mermaid

Cú pháp cơ bản

Mermaid dùng khai báo pie để tạo biểu đồ tròn.

pie showData

title Population Share by Continent

"Asia" : 59.5

"Africa" : 18.0

"Europe" : 9.0

"North America" : 7.5

"South America" : 5.5

"Oceania" : 0.5

Kết quả kết xuất

Trong đó:

pie: Biểu thị việc tạo biểu đồ tròn Mermaid
pie showData: biểu thị việc tạo biểu đồ tròn Mermaid có hiển thị giá trị dữ liệu
title: biểu thị tiêu đề biểu đồ tròn
"Asia" : 59.5: định nghĩa phân loại dữ liệu và tỷ lệ phần trăm

Xem cú pháp chi tiết để tạo biểu đồ tròn bằng Mermaid tại trang sau: https://www.processon.io/vi/mermaid/pie-chart

Biểu đồ tròn phù hợp để biểu thị tỷ lệ và quan hệ cấu thành, dùng thử miễn phí trình chỉnh sửa trực tuyến Mermaid cho biểu đồ tròn.

Biểu đồ Sankey Mermaid

Cú pháp cơ bản

Biểu đồ Sankey chủ yếu dùng để biểu thị dòng chảy lưu lượng, tài nguyên, vốn hoặc dữ liệu giữa các nút khác nhau, Mermaid dùng khai báo sankey-beta để tạo biểu đồ Sankey.

sankey-beta

A,B,50

A,C,30

B,D,20

C,D,30

Kết quả kết xuất

Trong đó:

sankey-beta: biểu thị việc tạo biểu đồ Sankey Mermaid
A,B,50: Định nghĩa dòng chảy dữ liệu: nguồn, đích và giá trị lưu lượng
A: nút bên trái, biểu thị nguồn dữ liệu đầu vào
B: nút bên phải, biểu thị đích dữ liệu đầu ra
50: biểu thị độ lớn lưu lượng

Xem cú pháp chi tiết để tạo biểu đồ Sankey bằng Mermaid tại trang sau: https://www.processon.io/vi/mermaid/sankey-diagram

Biểu đồ Sankey là một loại biểu đồ trực quan hóa dùng để hiển thị dòng chảy từ một nhóm giá trị sang một nhóm giá trị khác, dùng thử miễn phí trình chỉnh sửa trực tuyến Mermaid cho biểu đồ Sankey.

Biểu đồ XY Mermaid

Cú pháp cơ bản

Mermaid dùng khai báo xychart-beta để tạo biểu đồ XY.

xychart-beta

title "Monthly Sales Data"

x-axis "Month"["Jan", "Feb", "Mar", "Apr", "May", "Jun"]

y-axis " Sales (million)" 0 --> 100

line [20, 30, 40, 35, 50, 60]

bar [30, 50, 35, 20, 45, 40]

Kết quả kết xuất

Trong đó:

xychart-beta: Biểu thị việc tạo biểu đồ XY Mermaid
title: biểu thị tiêu đề biểu đồ XY
x-axis: biểu thị danh mục và tiêu đề trục ngang
y-axis: biểu thị phạm vi và tiêu đề trục dọc
line: định nghĩa chuỗi dữ liệu biểu đồ đường
bar: định nghĩa chuỗi dữ liệu biểu đồ cột

Cú pháp thường dùng

Cú pháp	Biểu đồ	Ý nghĩa
xychart-beta	Biểu đồ tọa độ XY	Tạo một biểu đồ tọa độ XY
xychart-beta horizontal	Biểu đồ tọa độ XY nằm ngang	Tạo một biểu đồ tọa độ XY nằm ngang
title "name"	Tiêu đề	Định nghĩa tiêu đề biểu đồ XY
x-axis "axisTitle" [a,b,c]	Trục X	Định nghĩa danh mục và tiêu đề trục ngang
y-axis "axisTitle" min --> max	Trục Y	Định nghĩa phạm vi và tiêu đề trục dọc
y-axis "axisTitle"	Trục Y chỉ có tiêu đề	Chỉ đặt tên trục dọc, phạm vi giá trị tự động thích ứng
bar [num1, num2, num3]	Biểu đồ cột	Định nghĩa chuỗi dữ liệu biểu đồ cột
line [num1, num2, num3]	Biểu đồ đường	Định nghĩa chuỗi dữ liệu biểu đồ đường

Xem cú pháp chi tiết để tạo biểu đồ XY bằng Mermaid tại trang sau: https://www.processon.io/vi/mermaid/xy-chart

Biểu đồ XY phù hợp để hiển thị thay đổi dữ liệu, so sánh giá trị và trực quan hóa dữ liệu đơn giản, dùng thử miễn phí trình chỉnh sửa trực tuyến Mermaid cho biểu đồ XY.

Biểu đồ radar Mermaid

Cú pháp cơ bản

Biểu đồ radar phù hợp để so sánh biểu hiện của nhiều đối tượng trên nhiều chiều, ví dụ đánh giá năng lực, chỉ số sản phẩm và so sánh phương án. Mermaid dùng khai báo radar-beta để tạo biểu đồ radar.

radar-beta

title "Competency Assessment Radar Chart"

axis a["Communication Skills"], b["Logical Thinking"], c["Team Collaboration"], d["Technical Skills"]

curve A["Chenlaoda"] {80, 90, 70, 85}

curve B["Wangxiaoer"] {60, 70, 90, 80}

Kết quả kết xuất

Trong đó:

radar-beta: biểu thị việc tạo biểu đồ radar Mermaid
title: định nghĩa tiêu đề biểu đồ radar
axis: Định nghĩa chiều và tên của biểu đồ radar
curve: Định nghĩa tên chuỗi dữ liệu và giá trị của từng chiều

Cú pháp thường dùng

Cú pháp	Biểu đồ	Ý nghĩa
radar-beta	Biểu đồ radar	Tạo một biểu đồ radar
title "name"	Tiêu đề	Định nghĩa tiêu đề biểu đồ radar, đặt ngay sau radar-beta
title "name"	Tiêu đề	Định nghĩa tiêu đề biểu đồ radar, đặt trước radar-beta và cần thêm 3 dấu gạch ngang ở cả trên và dưới
axis id ["axisTitle"]	Trục chiều	Định nghĩa chiều và tên của biểu đồ radar
curve id ["name"]{[values]}	Đường cong dữ liệu	Định nghĩa tên chuỗi dữ liệu và giá trị của từng chiều
max value	Giá trị lớn nhất	Đặt giá trị lớn nhất của phạm vi giá trị biểu đồ radar
min value	Giá trị nhỏ nhất	Đặt giá trị nhỏ nhất của phạm vi giá trị biểu đồ radar

Xem cú pháp chi tiết để tạo biểu đồ radar bằng Mermaid tại trang sau: https://www.processon.io/vi/mermaid/radar-chart

Biểu đồ radar đặc biệt hữu ích cho lập trình viên, nhà khoa học dữ liệu và kỹ sư cần biểu diễn dữ liệu một cách rõ ràng, súc tích dưới dạng hình tròn, dùng thử miễn phí trình chỉnh sửa trực tuyến Mermaid cho biểu đồ radar.

Biểu đồ Git Mermaid

Cú pháp cơ bản

Mermaid dùng khai báo gitGraph để tạo biểu đồ Git.

gitGraph

commit

branch develop

checkout develop

commit

checkout main

merge develop

Kết quả kết xuất

Trong đó:

gitGraph: Biểu thị việc tạo biểu đồ Git Mermaid
commit: biểu thị việc tạo commit
commit id:"": đặt tên commit
branch: biểu thị việc tạo nhánh
checkout: biểu thị việc chuyển nhánh
merge: biểu thị việc hợp nhất nhánh

Xem cú pháp chi tiết để tạo biểu đồ Git bằng Mermaid tại trang sau: https://www.processon.io/vi/mermaid/git-graph

Biểu đồ Git phù hợp để biểu thị quá trình quản lý phiên bản như commit, tạo nhánh, chuyển nhánh và hợp nhất trong Git, dùng thử miễn phí trình chỉnh sửa trực tuyến Mermaid cho biểu đồ Git.

Biểu đồ C4 Mermaid

Cú pháp cơ bản

Biểu đồ C4 Mermaid dùng để mô hình hóa kiến trúc phần mềm, có thể mô tả hệ thống phần mềm, container, thành phần và quan hệ giữa chúng ở các cấp độ khác nhau.

C4Context

title C4 Diagram of the Business System

Person(user, " User", " System user")

System(system, " Business System", " Core business system")

Rel(user, system, "Uses")

Kết quả kết xuất

Trong đó:

C4Context: Biểu thị việc tạo biểu đồ ngữ cảnh C4
title: biểu thị tiêu đề biểu đồ C4
Person(user, " User", " System user"): biểu thị người dùng hoặc vai trò sử dụng hệ thống
System(system, " Business System", " Core business system"): biểu thị hệ thống phần mềm cần phân tích
Rel(user, system, "Uses"): định nghĩa quan hệ gọi, tương tác hoặc truyền dữ liệu giữa hai phần tử

Cú pháp thường dùng

Cú pháp	Biểu đồ	Ý nghĩa
C4Context	Biểu đồ ngữ cảnh hệ thống	Tạo một biểu đồ ngữ cảnh hệ thống C4
C4Container	Biểu đồ container	Tạo một biểu đồ container C4
C4Component	Biểu đồ thành phần	Tạo một biểu đồ thành phần C4
C4Dynamic	Biểu đồ tương tác động	Tạo một biểu đồ tương tác động C4
C4Deployment	Biểu đồ triển khai	Tạo một biểu đồ triển khai C4
title	Tiêu đề	Đặt tiêu đề biểu đồ C4
Person(alias, "label", "description")	Người	Biểu thị người dùng hoặc vai trò sử dụng hệ thống
Person_Ext(alias, "label", "description")	Người bên ngoài	Biểu thị nhân sự hoặc vai trò tổ chức bên ngoài hệ thống tham gia tương tác
System(alias, "label", "description")	Nút hệ thống	Biểu thị hệ thống phần mềm cần phân tích
System_Ext(alias, "label", "description")	Nút hệ thống bên ngoài	Biểu thị dịch vụ bên thứ ba hoặc hệ thống phần mềm bên ngoài mà hệ thống phụ thuộc
System_Boundary(alias, "label")	Ranh giới hệ thống	Biểu thị ranh giới phạm vi hệ thống
Container(alias, "label", "technology")	Container	Biểu thị đơn vị phần mềm có thể chạy độc lập bên trong hệ thống
Container_Boundary(alias, "label")	Ranh giới container	Biểu thị phạm vi của một container hoặc dịch vụ

Xem cú pháp chi tiết để tạo biểu đồ C4 bằng Mermaid tại trang sau: https://www.processon.io/vi/mermaid/c4-diagram

Biểu đồ C4 phù hợp cho thiết kế kiến trúc phần mềm, phân tích hệ thống và tài liệu kỹ thuật, dùng thử miễn phí trình chỉnh sửa trực tuyến Mermaid cho biểu đồ C4.

Biểu đồ kiến trúc Mermaid

Cú pháp cơ bản

Mermaid dùng khai báo architecture-beta để tạo biểu đồ kiến trúc.

architecture-beta

group api(cloud)[API server]

service server(server)[server] in api

service database(database)[databasa] in api

server:R --> L:database

Kết quả kết xuất

Trong đó:

architecture-beta: Biểu thị việc tạo biểu đồ kiến trúc Mermaid.
group api(cloud)[API server]: tạo một nhóm kiến trúc
service server(server)[server] in api: tạo một thành phần kiến trúc hoặc mô-đun dịch vụ, và đặt trong nhóm kiến trúc
server:R --> L:database: chỉ định hướng kết nối của nút, từ phía bên phải của server hướng tới phía bên trái của database

Xem cú pháp chi tiết để tạo biểu đồ kiến trúc bằng Mermaid tại trang sau: https://www.processon.io/vi/mermaid/architecture-diagram

Biểu đồ kiến trúc phù hợp để biểu thị quan hệ giữa máy chủ, cơ sở dữ liệu, dịch vụ đám mây, dịch vụ ứng dụng và các thành phần hệ thống khác nhau, dùng thử miễn phí
trình chỉnh sửa trực tuyến Mermaid cho biểu đồ kiến trúc.

Biểu đồ khối Mermaid

Cú pháp cơ bản

Biểu đồ khối chủ yếu mô tả cấu trúc hệ thống thông qua mô-đun và quan hệ kết nối, Mermaid dùng khai báo block-beta để tạo biểu đồ khối.

block-beta

A space B

A["User"] --> B["Application"]

B space C

B --> C["Database"]

Kết quả kết xuất

Trong đó:

block-beta: Biểu thị việc tạo biểu đồ khối Mermaid
space: Tăng khoảng cách giữa mỗi đơn vị hoặc mô-đun
-->: mũi tên nét liền, biểu thị hướng của quan hệ

Xem cú pháp chi tiết để tạo biểu đồ khối bằng Mermaid tại trang sau: https://www.processon.io/vi/mermaid/block-diagram

Biểu đồ khối phù hợp cho các tình huống như mô-đun hệ thống, cấu trúc chức năng, kiến trúc kỹ thuật và quan hệ thành phần, dùng thử miễn phí trình chỉnh sửa trực tuyến Mermaid cho biểu đồ khối.

Biểu đồ gói Mermaid

Cú pháp cơ bản

Biểu đồ gói chủ yếu dùng để biểu thị trường và độ dài trong gói dữ liệu mạng hoặc cấu trúc dữ liệu giao thức, Mermaid dùng khai báo packet-beta để tạo biểu đồ gói.

packet-beta

0-7: "Version"

8-15: "Type"

16-31: "Length"

Kết quả kết xuất

Trong đó:

packet-beta: Biểu thị việc tạo biểu đồ gói Mermaid
0-7: "Version ": biểu thị phạm vi bit mà trường chiếm giữ

Biểu đồ gói phù hợp cho giao thức mạng, cấu trúc gói dữ liệu và tài liệu đặc tả kỹ thuật, dùng thử miễn phí trình chỉnh sửa trực tuyến Mermaid cho biểu đồ gói.

Không biết cú pháp Mermaid thì phải làm sao?

Không quen với cú pháp Mermaid không có nghĩa là bạn không thể dùng Mermaid để tạo biểu đồ, bạn có thể áp dụng một số cách sau:

Dùng mẫu Mermaid miễn phí

Trước tiên hãy chọn mẫu gần với nhu cầu, sau đó sửa nút, văn bản và quan hệ trong đó. Cách này phù hợp với người dùng lần đầu sử dụng Mermaid.

AI tạo mã Mermaid

Có thể trực tiếp mô tả biểu đồ bạn cần bằng ngôn ngữ tự nhiên, ví dụ:

Tạo một quy trình xử lý đơn hàng thương mại điện tử, bao gồm người dùng đặt hàng, thanh toán, kiểm tra kho, giao hàng và hoàn tất đơn hàng.

AI có thể tạo mã Mermaid dựa trên mô tả, sau đó sửa lại theo nhu cầu thực tế.

Dùng AI để kiểm tra và sửa mã

Nếu mã Mermaid có lỗi cú pháp, bạn có thể nhờ AI giúp xác định vấn đề và sửa mã.

Tạo mã thông qua nhận dạng hình ảnh

Với những biểu đồ luồng, biểu đồ kiến trúc hoặc biểu đồ có cấu trúc đã tồn tại, bạn có thể thử tạo mã Mermaid thông qua nhận dạng hình ảnh rồi tiếp tục chỉnh sửa.

Trình chỉnh sửa trực tuyến Mermaid có những chức năng nào?

Trình chỉnh sửa trực tuyến Mermaid thường cần giải quyết ba vấn đề cốt lõi: viết mã, xem trước biểu đồ và xuất kết quả. Ngoài ra, mẫu và AI cũng có thể giảm ngưỡng sử dụng Mermaid.

Lấy ví dụ ProcessOn Mermaid trực tuyến, bạn có thể làm trực tiếp trong trình duyệt:

Viết mã Mermaid
Dán mã Mermaid đã có
Kết xuất và xem trước biểu đồ theo thời gian thực
Dùng mẫu Mermaid miễn phí
Với ngôn ngữ tự nhiên, AI tạo biểu đồ Mermaid
AI kiểm tra và sửa mã Mermaid
Tạo mã Mermaid thông qua nhận dạng hình ảnh
Chỉnh sửa và thay đổi biểu đồ đã tạo một lần nữa
Xuất PNG, các định dạng PDF, SVG, JPG, Markdown

Vì vậy, với những người dùng thường xuyên tạo biểu đồ Mermaid, trình chỉnh sửa trực tuyến ProcessOn Mermaid có thể gom việc viết mã Mermaid, tạo biểu đồ, chỉnh sửa và thay đổi về sau, xuất và chia sẻ
vào cùng một môi trường làm việc.

Từ biểu đồ luồng, biểu đồ tuần tự, biểu đồ lớp của Mermaid cho đến biểu đồ Gantt, sơ đồ tư duy, biểu đồ góc phần tư, biểu đồ Sankey, biểu đồ Git, biểu đồ C4 và biểu đồ kiến trúc, đều có thể tạo bằng cú pháp Mermaid và chỉnh sửa.

Hãy dùng ngay trình chỉnh sửa trực tuyến Mermaid, viết mã Mermaid trực tuyến và tạo biểu đồ.

Câu hỏi thường gặp

Cú pháp Mermaid có khó học không?

Cú pháp cơ bản của Mermaid tương đối đơn giản, hầu hết biểu đồ chỉ cần nắm được cách viết cơ bản như khai báo biểu đồ, nút, đường nối và văn bản. Ví dụ, sequenceDiagram dùng để khai báo biểu đồ tuần tự, flowchart dùng để khai báo biểu đồ luồng. Quy tắc cú pháp của các loại biểu đồ khác nhau có khác biệt, biểu đồ phức tạp còn cần học thêm các tham số và cấu hình tương ứng.

Tại sao mã Mermaid viết sai lại không tạo được biểu đồ?

Mermaid khá nhạy với cấu trúc cú pháp. Các nguyên nhân phổ biến bao gồm khai báo biểu đồ viết sai, cú pháp nút hoặc đường nối không đầy đủ, xử lý thụt lề hoặc ký tự đặc biệt không đúng, cũng như sử dụng cú pháp mà phiên bản Mermaid hiện tại không hỗ trợ.

Mermaid khác gì so với phần mềm vẽ truyền thống?

Mermaid chủ yếu mô tả biểu đồ bằng mã văn bản, trong khi phần mềm vẽ truyền thống thường tạo biểu đồ bằng cách kéo thả hình, đường nối và điều chỉnh kiểu dáng.

Biểu đồ Mermaid có thể lưu và tái sử dụng không?

Có thể. Nội dung cốt lõi của biểu đồ Mermaid là mã văn bản, vì vậy có thể lưu mã vào Markdown, tệp mã hoặc tài liệu khác hỗ trợ Mermaid, và kết xuất lại khi cần.

Đây cũng là một khác biệt quan trọng giữa Mermaid và biểu đồ thuần dạng hình ảnh: Hình ảnh lưu lại kết quả cuối cùng, còn mã Mermaid đồng thời lưu cả thông tin cấu trúc của biểu đồ.

Mermaid và Markdown có quan hệ gì?

Mermaid thường được dùng cùng với Markdown, nhưng hai loại không phải là cùng một cú pháp.

Markdown chủ yếu dùng để viết văn bản có cấu trúc, còn Mermaid dùng để tạo biểu đồ thông qua mã. Trong trình chỉnh sửa Markdown hỗ trợ Mermaid, có thể nhúng mã Mermaid vào tài liệu Markdown, từ đó đặt biểu đồ và phần mô tả văn bản trong cùng một tài liệu.

Khả năng làm việc Công cụ cần thiết Hướng dẫn vẽ

Bạn có thể đăng nhập để hỗ trợ tác giả không?

Khuyến nghị liên quan

Cập nhật gần đây