Cú pháp biểu đồ Gantt Mermaid - Hướng dẫn tạo biểu đồ Gantt bằng mã Mermaid

Biểu đồ Gantt

Biểu đồ Gantt là một loại biểu đồ cột, dùng để thể hiện tiến độ dự án và thời gian cần thiết để hoàn thành một dự án. Biểu đồ Gantt hiển thị số ngày giữa ngày bắt đầu và ngày hoàn thành của các phần tử đầu cuối và phần tử tổng hợp của dự án.

Lưu ý

Biểu đồ Gantt ghi lại mỗi tác vụ theo kế hoạch thành một thanh liên tục kéo dài từ trái sang phải. Trục x biểu diễn thời gian, trục y ghi lại các tác vụ khác nhau và thứ tự hoàn thành của chúng.

Quan trọng hơn, khi ngày, số ngày hoặc tập ngày cụ thể của một tác vụ bị loại trừ, biểu đồ Gantt sẽ thích ứng với những thay đổi này bằng cách kéo dài thêm số ngày tương ứng về phía bên phải, thay vì tạo khoảng trống bên trong tác vụ.

Mã

                            
                                
                                    
                                    Sao chép
                                
                                
                                    
                                    Nhúng
                                
                            
                            
                                gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    excludes 2026-03-16,2026-03-18,2026-03-19
    section Section
    
    A task :a1, 2026-03-07, 7d
    Another task :after a1, 5d

Tuy nhiên, nếu ngày bị loại trừ nằm giữa hai tác vụ bắt đầu liên tiếp, ngày bị loại trừ sẽ bị bỏ qua và để trống trên biểu đồ, sau đó tác vụ sẽ bắt đầu sau khi ngày bị loại trừ kết thúc. Như sau:

Mã

                            
                                
                                    
                                    Sao chép
                                
                                
                                    
                                    Nhúng
                                
                            
                            
                                gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    excludes Sunday, Friday, Saturday
    section Section
    
    A task :a1, 2026-03-07, 5d
    Another task :after a1, 7d

Biểu đồ Gantt rất hữu ích để theo dõi thời gian cần thiết để hoàn thành dự án, nhưng với một số điều chỉnh, nó cũng có thể được dùng để biểu diễn trực quan "ngày không làm việc".

Cú pháp

Mã

                            
                                
                                    
                                    Sao chép
                                
                                
                                    
                                    Nhúng
                                
                            
                            
                                gantt
    dateFormat YYYY-MM-DD
    title Adding GANTT diagram functionality to mermaid
    excludes weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section A section
    Completed task :done, des1, 2026-01-06,2026-01-08
    Active task :active, des2, 2026-01-09, 3d
    Future task : des3, after des2, 5d
    Future task2 : des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2026-01-06,24h
    Implement parser and jison :crit, done, after des1, 2d
    Create tests for parser :crit, active, 3d
    Future task in critical line :crit, 5d
    Create tests for renderer :2d
    Add to mermaid :until isadded
    Functionality added :milestone, isadded, 2026-01-25, 0d

    section Documentation
    Describe gantt syntax :active, a1, after des1, 3d
    Add gantt diagram to demo page :after a1 , 20h
    Add another diagram to demo page :doc1, after a1 , 48h

    section Last section
    Describe gantt syntax :after doc1, 3d
    Add gantt diagram to demo page :20h
    Add another diagram to demo page :48h

Theo mặc định, các tác vụ diễn ra liên tục, ngày bắt đầu của tác vụ tiếp theo mặc định là ngày kết thúc của tác vụ trước.

Tiêu đề tác vụ và siêu dữ liệu của nó được phân tách bằng dấu hai chấm (:), các mục siêu dữ liệu được phân tách bằng dấu phẩy (,). Các nhãn hợp lệ bao gồm active, done, crit và milestone. Nhãn là tùy chọn, nhưng nếu dùng thì phải đặt ở đầu tiên. Sau khi xử lý nhãn, các mục siêu dữ liệu còn lại được giải thích như sau:

Nếu chỉ định một mục, nó sẽ quyết định tác vụ kết thúc khi nào. Nó có thể là một ngày hoặc thời điểm cụ thể, cũng có thể là một khoảng thời gian. Nếu chỉ định khoảng thời gian, nó sẽ được cộng vào ngày bắt đầu của tác vụ để xác định ngày kết thúc của tác vụ, đồng thời xem xét mọi trường hợp bị loại trừ.
Nếu chỉ định hai mục, mục sau được giải thích giống như trường hợp trước. Mục đầu tiên có thể chỉ định một ngày hoặc thời điểm bắt đầu rõ ràng (định dạng do dateFormat chỉ định), cũng có thể thông qua after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...] để tham chiếu tới một tác vụ khác. Trong trường hợp sau, ngày bắt đầu của tác vụ sẽ được đặt theo ngày kết thúc muộn nhất của bất kỳ tác vụ được tham chiếu nào.
Nếu chỉ định ba mục, hai mục cuối được giải thích theo trường hợp trước. Mục đầu tiên sẽ biểu thị ID của tác vụ, có thể dùng cú pháp later <taskID> để tham chiếu.

Cú pháp siêu dữ liệu	Ngày bắt đầu	Ngày kết thúc	ID
<taskID>, <startDate>, <endDate>	startdate được giải thích bằng dateformat	endDate được giải thích bằng dateformat	taskID
<taskID>, <startDate>, <length>	startdate được giải thích bằng dateformat	Ngày bắt đầu + length	taskID
<taskID>, after <otherTaskId>, <endDate>	Ngày kết thúc của tác vụ otherTaskID đã chỉ định trước đó	endDate được giải thích bằng dateformat	taskID
<taskID>, after <otherTaskId>, <length>	Ngày kết thúc của tác vụ otherTaskID đã chỉ định trước đó	Ngày bắt đầu + length	taskID
<taskID>, <startDate>, until <otherTaskId>	startdate được giải thích bằng dateformat	Ngày bắt đầu của tác vụ otherTaskID đã chỉ định trước đó	taskID
<taskID>, after <otherTaskId>, until <otherTaskId>	Ngày kết thúc của tác vụ otherTaskID đã chỉ định trước đó	Ngày bắt đầu của tác vụ otherTaskID đã chỉ định trước đó	taskID
<startDate>, <endDate>	startdate được giải thích bằng dateformat	使用 dateformat 解释的 enddate	Không áp dụng
<startDate>, <length>	startdate được giải thích bằng dateformat	Ngày bắt đầu + length	Không áp dụng
after <otherTaskID>, <endDate>	Ngày kết thúc của tác vụ otherTaskID đã chỉ định trước đó	使用 dateformat 解释的 enddate	Không áp dụng
after <otherTaskID>, <length>	Ngày kết thúc của tác vụ otherTaskID đã chỉ định trước đó	Ngày bắt đầu + length	Không áp dụng
<startDate>, until <otherTaskId>	startdate được giải thích bằng dateformat	Ngày bắt đầu của tác vụ otherTaskID đã chỉ định trước đó	Không áp dụng
after <otherTaskId>, until <otherTaskId>	Ngày kết thúc của tác vụ otherTaskID đã chỉ định trước đó	Ngày bắt đầu của tác vụ otherTaskID đã chỉ định trước đó	Không áp dụng
<endDate>	Ngày kết thúc của tác vụ trước	使用 dateformat 解释的 enddate	Không áp dụng
<length>	Ngày kết thúc của tác vụ trước	Ngày bắt đầu + length	Không áp dụng
until <otherTaskId>	Ngày kết thúc của tác vụ trước	Ngày bắt đầu của tác vụ otherTaskID đã chỉ định trước đó	Không áp dụng

Định dạng khoảng thời gian

Khi chỉ định <length>, dùng một số, theo sau là một trong các hậu tố đơn vị sau:

Đơn vị	Hậu tố	Ví dụ
Mili giây	ms	50ms
Giây	s	30s
Phút	m	30m
Giờ	h	4h
Ngày	d	7d
Tuần	w	3w
Tháng	m	2m
Năm	y	1y

Cũng hỗ trợ giá trị thập phân (ví dụ, 2.5d). Các ký hiệu khoảng thời gian không hợp lệ (ví dụ, 3dX) sẽ bị bỏ qua, tác vụ sẽ mặc định có khoảng thời gian bằng không.

Để đơn giản, bảng này không hiển thị nhiều tác vụ được liệt kê bằng cú pháp after. Dưới đây là ví dụ:

Mã

                            
                                
                                    
                                    Sao chép
                                
                                
                                    
                                    Nhúng
                                
                            
                            
                                gantt
    apple :a, 2026-07-20, 1w
    banana :crit, b, 2026-07-23, 1d
    cherry :active, c, after b a, 1d
    kiwi :d, 2026-07-20, until b c

Tiêu đề

title là một chuỗi tùy chọn, hiển thị ở đầu biểu đồ Gantt, dùng để mô tả toàn bộ biểu đồ.

Loại trừ

excludes là thuộc tính tùy chọn, chấp nhận ngày cụ thể (định dạng YYYY-MM-DD), thứ trong tuần (ví dụ "sunday") hoặc "weekends", nhưng không thể dùng từ "weekdays". Những ngày này sẽ được đánh dấu trên biểu đồ, và bị loại trừ khỏi việc tính khoảng thời gian của tác vụ. Điều này có nghĩa là, nếu khoảng thời gian của tác vụ bao gồm các ngày bị loại trừ, số ngày bị loại trừ sẽ được cộng vào thời điểm kết thúc của tác vụ, để đảm bảo khoảng thời gian của tác vụ nhất quán với chỉ định trong mã.

Cuối tuần

Khi loại trừ cuối tuần, có thể đặt cuối tuần thành thứ Sáu và thứ Bảy, hoặc thứ Bảy và Chủ nhật. Theo mặc định, cuối tuần là thứ Bảy và Chủ nhật. Để định nghĩa ngày bắt đầu cuối tuần, có thể thêm một thuộc tính tùy chọn weekend vào dòng mới, theo sau là friday hoặc saturday.

Mã

                            
                                
                                    
                                    Sao chép
                                
                                
                                    
                                    Nhúng
                                
                            
                            
                                gantt
    title A Gantt Diagram Excluding Fri - Sat weekends
    dateFormat Букмекерлар-MM-DD
    excludes weekends
    weekend friday
    section Section
        A task :a1, 2026-01-01, 30d
        Another task :after a1, 20d

Khai báo phần

Bạn có thể chia biểu đồ thành các phần, để tách biệt các phần khác nhau của dự án (ví dụ phát triển và tài liệu).

Để làm điều này, hãy dùng cú pháp section ở đầu một dòng và đặt tên cho nó. Xin lưu ý, khác với tiêu đề của toàn bộ biểu đồ, tên này là bắt buộc.

Mốc quan trọng

Bạn có thể thêm mốc quan trọng vào biểu đồ. Mốc quan trọng khác với tác vụ vì chúng biểu diễn một thời điểm cụ thể, và được nhận biết bằng cú pháp milestone. Dưới đây là ví dụ sử dụng mốc quan trọng: vị trí chính xác của mốc quan trọng được xác định bởi ngày bắt đầu của mốc quan trọng và khoảng thời gian của tác vụ, như sau:

Mã

                            
                                
                                    
                                    Sao chép
                                
                                
                                    
                                    Nhúng
                                
                            
                            
                                gantt
    dateFormat HH:mm
    axisFormat %H:%M
    Initial milestone : milestone, m1, 17:49, 2m
    Task A : 10m
    Task B : 5m
    Final milestone : milestone, m2, 18:08, 4m

Đánh dấu dọc

vert biểu thị việc thêm đường thẳng đứng vào biểu đồ Gantt, để dễ dàng tô sáng các ngày quan trọng, ví dụ hạn chót, sự kiện quan trọng hoặc điểm kiểm tra. Những dấu này sẽ kéo dài khắp toàn bộ biểu đồ, và được định vị theo ngày bạn cung cấp. Khác với mốc quan trọng, đánh dấu dọc không chiếm một dòng. Chúng thuần túy là các điểm tham chiếu trực quan, giúp phân tách trục thời gian, khiến những thời điểm quan trọng dễ được nhận biết hơn.

Mã

                            
                                
                                    
                                    Sao chép
                                
                                
                                    
                                    Nhúng
                                
                            
                            
                                gantt
dateFormat HH:mm
axisFormat %H:%M
Initial vert : vert, v1, 17:30, 2m
Task A : 3m
Task B : 8m
Final vert : vert, v2, 17:58, 4m

Đặt ngày

dateFormat định nghĩa định dạng nhập ngày của các phần tử biểu đồ Gantt, axisFormat định nghĩa định dạng xuất ngày khi kết xuất biểu đồ.

Định dạng ngày nhập

Định dạng ngày nhập mặc định là YYYY-MM-DD, bạn có thể tùy chỉnh dateFormat.

                            
                                
                                    
                                    Sao chép
                                
                                
                                    
                                    Nhúng
                                
                            
                            dateFormat YYYY-MM-DD

Hỗ trợ các tùy chọn định dạng sau:

输入	Ví dụ	Mô tả
YYYY	2026	Năm có 4 chữ số
YY	26	Năm có 2 chữ số
Q	1..4	Số quý
M MM	1..12	Số tháng
D DD	1..31	Một ngày trong tháng
Do	1st..31st	Một ngày trong tháng có số thứ tự
DDD DDDD	1..365	Một ngày trong năm
X	1410715640.579	Dấu thời gian Unix
x	1410715640579	Dấu thời gian Unix mili giây
H HH	0..23	Thời gian 24 giờ
h hh	1..12	Thời gian 12 giờ, dùng cùng với a A
a A	am pm	Buổi sáng hoặc buổi chiều
m mm	0..59	Phút
s ss	0..59	Số giây
S	0..9	Một phần mười giây
SS	0..99	Một phần trăm giây
SSS	0..999	Một phần nghìn giây
Z ZZ	+12:00	Độ lệch so với UTC, định dạng là +-HH:mm, +-HHmm hoặc Z

Định dạng ngày xuất của trục tọa độ

Định dạng ngày xuất mặc định là YYYY-MM-DD. Bạn có thể tùy chỉnh axisFormat, ví dụ 2026-Q1 biểu thị quý đầu tiên của năm 2026.

                            
                                
                                    
                                    Sao chép
                                
                                
                                    
                                    Nhúng
                                
                            
                            axisFormat %Y-%m-%d

Hỗ trợ các chuỗi định dạng sau:

Định dạng,Định nghĩa
%a	Tên viết tắt của thứ trong tuần
%A	Tên đầy đủ của thứ trong tuần
%b	Tên viết tắt của tháng
%B	Tên đầy đủ của tháng
%c	Ngày và giờ được bản địa hóa
%d	Ngày, số thập phân [01,31]
%e	Ngày, số thập phân được đệm bằng dấu cách [1,31], tương đương %_d
%H	Giờ (chế độ 24 giờ), số thập phân [00,23]
%I	Giờ (chế độ 12 giờ), số thập phân [01,12]
%j	Ngày thứ mấy trong năm, số thập phân [001,366]
%m	Tháng, số thập phân [01,12]
%M	Phút, số thập phân [00,59]
%L	Mili giây, số thập phân [000, 999]
%p	Buổi sáng hoặc buổi chiều
%S	Giây, số thập phân [00,59]
%U	Tuần thứ mấy trong năm (lấy Chủ nhật làm ngày đầu tuần), số thập phân [00,53]
%w	Thứ trong tuần, số thập phân được đệm bằng dấu cách [0,6], trong đó 0 biểu thị Chủ nhật
%W	Tuần thứ mấy trong năm (lấy thứ Hai làm ngày đầu tuần), số thập phân [00,53]
%x	Biểu diễn ngày được bản địa hóa, ví dụ: 2026-09-18
%X	Biểu diễn thời gian được bản địa hóa, ví dụ: 14:30:00
%y	Năm không có thế kỷ, số thập phân [00,99], ví dụ 26 biểu thị năm 2026
%Y	Năm có thế kỷ, số thập phân
%Z	Tên viết tắt của múi giờ, ví dụ "-0700"
%%	Ký tự thoát, dùng để hiển thị chính ký tự phần trăm %

Vạch chia trục

Vạch chia xuất mặc định là tự động. Bạn có thể tùy chỉnh tickInterval, ví dụ 1day hoặc 1week.

                            
                                
                                    
                                    Sao chép
                                
                                
                                    
                                    Nhúng
                                
                            
                            tickInterval 1day

Mẫu là

                            
                                
                                    
                                    Sao chép
                                
                                
                                    
                                    Nhúng
                                
                            
                            /^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;

tickInterval dựa trên tuần mặc định bắt đầu từ Chủ nhật. Nếu bạn muốn chỉ định ngày làm việc khác để tickInterval bắt đầu, hãy dùng tùy chọn weekday, mã như sau:

Mã

                            
                                
                                    
                                    Sao chép
                                
                                
                                    
                                    Nhúng
                                
                            
                            
                                gantt
tickInterval 1week
weekday monday

Đầu ra chế độ thu gọn

Chế độ thu gọn cho phép bạn hiển thị nhiều tác vụ trên cùng một dòng. Thông qua thiết lập YAML phía trước để kiểm soát chế độ hiển thị của đồ thị, bật chế độ thu gọn cho biểu đồ Gantt.

Mã

                            
                                
                                    
                                    Sao chép
                                
                                
                                    
                                    Nhúng
                                
                            
                            
                                ---
displayMode: compact
---
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD

    section Section
    A task           :a1, 2026-01-01, 30d
    Another task     :a2, 2026-01-20, 25d
    Another one      :a3, 2026-02-10, 20d

Có thể nhập chú thích trong biểu đồ Gantt, trình phân tích sẽ bỏ qua chú thích này. Chú thích cần chiếm một dòng riêng, và phải bắt đầu bằng %% (hai dấu phần trăm). Mọi văn bản sau khi bắt đầu chú thích đến ký tự xuống dòng tiếp theo đều được coi là chú thích, bao gồm cả bất kỳ cú pháp biểu đồ nào.

Mã

                            
                                
                                    
                                    Sao chép
                                
                                
                                    
                                    Nhúng
                                
                            
                            
                                gantt
    title A Gantt Diagram
    %% This is a comment
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        another task    :24d

Đánh dấu ngày hôm nay

Bạn có thể tạo kiểu hoặc ẩn dấu đánh dấu cho ngày hiện tại. Để tạo kiểu, hãy thêm một giá trị cho khóa todayMarker.

                            
                                
                                    
                                    Sao chép
                                
                                
                                    
                                    Nhúng
                                
                            
                            todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5

Để ẩn dấu, hãy đặt todayMarker thành off.

                            
                                
                                    
                                    Sao chép
                                
                                
                                    
                                    Nhúng
                                
                            
                            todayMarker off

Ví dụ

Biểu đồ Gantt dạng cột

Mã

                            
                                
                                    
                                    Sao chép
                                
                                
                                    
                                    Nhúng
                                
                            
                            
                                gantt
    title Git Issues - days since last update
    dateFormat X
    axisFormat %s
    section Issue19062
    71   : 0, 71
    section Issue19401
    36   : 0, 36
    section Issue193
    34   : 0, 34
    section Issue7441
    9    : 0, 9
    section Issue1300
    5    : 0, 5

Trục thời gian (bao gồm chú thích, CSS và cấu hình ở đầu)

Mã

                            
                                
                                    
                                    Sao chép
                                
                                
                                    
                                    Nhúng
                                
                            
                            
                                ---
    # Frontmatter config, YAML comments
    title: Ignored if specified in chart
    displayMode: compact     #gantt specific setting but works at this level too
    config:
#        theme: forest
#        themeCSS: " #item36 { fill: CadetBlue } "
        themeCSS: " // YAML supports multiline strings using a newline markers: 

            #item36 { fill: CadetBlue }       


            // Custom marker workaround CSS from forum (below)    

            rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; }   

            text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}
        "
        gantt:
            useWidth: 400
            rightPadding: 0
            topAxis: true  #false
            numberSectionStyles: 2
---
gantt
    title Timeline - Gantt Sampler
    dateFormat YYYY
    axisFormat %y
    %% this next line doesn't recognise 'decade' or 'year', but will silently ignore
    tickInterval 1decade

    section Issue19062
    71   :            item71, 1900, 1930
    section Issue19401
    36   :            item36, 1913, 1935
    section Issue1300
    94   :            item94, 1910, 1915
    5    :            item5,  1920, 1925
    0    : milestone, item0,  1918, 1s
    9    : vert,              1906, 1s   %% not yet official
    64   : workaround,        1923, 1s   %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250

Biểu đồ GanttCú pháp