Trình tạo biểu đồ Gantt Mermaid
Biểu đồ Gantt đặt công việc lên trên lịch: cái gì kéo dài bao lâu, cái gì chồng lấn và cái gì chưa thể bắt đầu khi việc khác chưa xong. Hãy dùng nó khi cốt lõi là ngày tháng và các phụ thuộc. Nếu bạn chỉ cần thứ tự mà không cần ngày, lưu đồ nhẹ hơn và không mục nát mỗi lần lịch bị đẩy lùi.
Lịch phát hành có phụ thuộc và một cột mốc
Thứ biến cái này thành biểu đồ Gantt thay vì một bức vẽ các thanh ngang chính là `after a1`: phụ thuộc đã được khai báo, nên dời việc đầu tiên sẽ kéo theo mọi thứ đứng sau. Cột mốc đánh dấu một ngày cố định không chiếm thời gian. Dòng `dateFormat DD/MM/YYYY` không phải tùy chọn: thiếu nó là bạn rơi vào cái bẫy ngày tháng nói ở dưới.
gantt
title Phát hành 2.4
dateFormat DD/MM/YYYY
axisFormat %d/%m
excludes weekends
section Phát triển
Chốt hợp đồng API :done, a1, 07/01/2026, 10d
Hiện thực :active, a2, after a1, 20d
Kiểm thử nội bộ : a3, after a2, 8d
section Phát hành
Giai đoạn ổn định : b1, after a3, 5d
Quyết định phát hành :milestone, m1, after b1, 0d
Đưa lên môi trường thật :crit, b2, after m1, 3dVí dụ có giải thích
1. Biểu đồ đúng đơn giản nhất
`dateFormat` bảo Mermaid cách ĐỌC những ngày bạn viết; `axisFormat` quyết định cách chúng ĐƯỢC HIỂN THỊ trên trục. Đó là hai thiết lập khác nhau, và nhầm lẫn giữa chúng là nguồn bực bội phổ biến nhất khi làm Gantt.
gantt
title Sprint 14
dateFormat DD/MM/YYYY
section Công việc
Dựng chức năng tìm kiếm :02/03/2026, 10d2. Định danh công việc và phụ thuộc
Cho một công việc định danh sẽ cho phép các việc sau viết `after <định danh>`. Khi phụ thuộc đã được khai báo, bạn đổi ngày bắt đầu ở một chỗ và phần lịch còn lại tự đi theo.
gantt
title Di chuyển dữ liệu
dateFormat DD/MM/YYYY
section Chuẩn bị
Rà soát lược đồ :a1, 02/02/2026, 5d
Viết bảng ánh xạ :a2, after a1, 8d
section Thực hiện
Chạy thử toàn phần :a3, after a2, 3d
Chuyển đổi :a4, after a3, 1d3. Các từ khóa trạng thái
`done`, `active` và `crit` thay đổi cách vẽ thanh ngang. Đó là cách rẻ nhất để biểu đồ trả lời được câu «chúng ta đang ở đâu» chứ không chỉ «kế hoạch ban đầu là gì».
gantt
title Nền tảng, quý một
dateFormat DD/MM/YYYY
section Hạ tầng
Dọn dẹp Terraform :done, t1, 05/01/2026, 12d
Nâng cấp Kubernetes :active, t2, 19/01/2026, 15d
Rà soát chi phí : t3, after t2, 5d
section Bảo mật
Kiểm tra thư viện :crit, s1, 12/01/2026, 6d4. Cột mốc
Cột mốc là một điểm chứ không phải một khoảng: hãy cho nó `0d`. Dùng chúng cho những ngày do bên ngoài dự án ấn định — một hội chợ, một hạn hợp đồng, một mốc đóng băng mã nguồn.
gantt
title Kế hoạch ra mắt
dateFormat DD/MM/YYYY
section Kỹ thuật
Chốt phạm vi :milestone, m1, 01/04/2026, 0d
Săn lỗi : e1, 01/04/2026, 5d
Tạo nhánh phát hành :milestone, m2, after e1, 0d
section Truyền thông
Hết hạn cấm đăng tin :milestone, m3, 15/04/2026, 0d5. Loại trừ cuối tuần và ngày lễ
`excludes weekends` khiến thời lượng không tính thứ Bảy và Chủ nhật, nên một việc 10 ngày chiếm hai tuần làm việc thay vì kết thúc giữa cuối tuần. Ngày lễ thì loại trừ từng ngày một; ở Việt Nam khoảng 30/4 và 1/5 chênh lệch thấy rõ.
gantt
title Đưa dịch vụ mới vào vận hành
dateFormat DD/MM/YYYY
excludes weekends, 30/04/2026, 01/05/2026
section Xây dựng
Dựng hạ tầng :p1, 20/04/2026, 5d
Nối CI/CD :p2, after p1, 5d
section Bàn giao
Tài liệu và đào tạo :p3, after p2, 4dTóm tắt cú pháp biểu đồ Gantt
Trong sáu loại sơ đồ, Gantt khắt khe nhất ở đúng một chỗ — dòng công việc — và dễ dãi nhất ở mọi chỗ còn lại. Chính vì thế mà rất nhiều lỗi lọt qua mà không ai thấy.
| Cú pháp | Ý nghĩa |
|---|---|
| gantt | Mở sơ đồ. |
| title Văn bản | Tiêu đề của biểu đồ. |
| dateFormat DD/MM/YYYY | Cách PHÂN TÍCH những ngày bạn viết. Đây là dòng đúng cho tiếng Việt. |
| dateFormat YYYY-MM-DD | Định dạng ISO, thiết lập mặc định. |
| axisFormat %d/%m | Cách HIỂN THỊ ngày trên trục. Là thiết lập khác với dateFormat. |
| excludes weekends | Bỏ qua thứ Bảy và Chủ nhật khi tính thời lượng. |
| excludes 02/09/2026 | Loại trừ một ngày cụ thể. Ngày lễ được bỏ ra như vậy. |
| section Tên | Gom các công việc vào một dải có tên. |
| Công việc :id, 01/01/2026, 10d | Công việc có ngày bắt đầu và thời lượng rõ ràng. |
| Công việc :id, after khác, 10d | Công việc bắt đầu khi `khác` kết thúc. |
| Công việc :done, id, ... | Đã xong — vẽ mờ. |
| Công việc :active, id, ... | Đang chạy — vẽ nổi bật. |
| Công việc :crit, id, ... | Quan trọng — vẽ bằng màu nhấn. |
| Tên :milestone, id, ngày, 0d | Một điểm trên trục thời gian, không phải một khoảng. |
| 10d / 3w / 2h | Thời lượng tính bằng ngày, tuần, giờ. Đơn vị là bắt buộc. |
Sáu cái bẫy của Gantt — và chỉ một cái là lỗi
Đây chính là điểm phân biệt Gantt với năm loại còn lại. Dựng lại trên Mermaid 11.12.2: đúng một trong sáu cái dưới đây chặn việc vẽ. Năm cái kia cho ra một cái lịch hoàn toàn đáng tin và sai, nguy hiểm hơn nhiều, vì không ai đi kiểm tra lại một biểu đồ đã vẽ ra được.
Bạn thấy gì
Parse error, kết thúc bằng: Expecting 'taskData', got 'NL'
Vì sao
Một dòng công việc thiếu dấu hai chấm. Dấu hai chấm ngăn tên hiển thị với dữ liệu công việc, và thiếu nó thì chẳng còn gì để phân tích. Đây là cái bẫy duy nhất trong danh sách này bị Mermaid từ chối thẳng thừng.
Cách sửa
Đặt dấu hai chấm giữa tên và định danh.
gantt
dateFormat DD/MM/YYYY
section Công việc
Thiết kế a1, 07/01/2026, 5dgantt
dateFormat DD/MM/YYYY
section Công việc
Thiết kế :a1, 07/01/2026, 5dBạn thấy gì
Biểu đồ vẽ ra được, nhưng các ngày rơi sớm hơn hai tháng
Vì sao
Đây là lỗi đắt giá nhất trong danh sách với người viết tiếng Việt. Ta viết 01/03/2026 và hiểu là mùng 1 tháng Ba, nhưng `dateFormat` mặc định là `YYYY-MM-DD`, và với một ngày có dấu phân cách thì Mermaid đọc theo kiểu Mỹ, tháng đứng trước. Đã đo: `01/03/2026` với `dateFormat YYYY-MM-DD` đặt công việc vào mùng 3 tháng Giêng. Không có cảnh báo nào; biểu đồ trông hoàn hảo và lệch mất hai tháng. Dùng dấu chấm hay dấu gạch ngang cũng không khác gì.
Cách sửa
Khai báo `dateFormat DD/MM/YYYY` rồi viết ngày như bạn vẫn viết. Đã kiểm chứng: với định dạng đó, `01/03/2026` rơi đúng vào mùng 1 tháng Ba.
gantt
dateFormat YYYY-MM-DD
axisFormat %d/%m/%Y
section S
Thiết kế :a1, 01/03/2026, 10dgantt
dateFormat DD/MM/YYYY
axisFormat %d/%m/%Y
section S
Thiết kế :a1, 01/03/2026, 10dBạn thấy gì
Biểu đồ vẽ ra được, nhưng trục bỗng trải dài nhiều tháng
Vì sao
Một `after` trỏ tới định danh công việc không tồn tại — thường là gõ nhầm hoặc do đã đổi tên. Mermaid không cảnh báo: nó đặt công việc vào một chỗ bất kỳ, khiến trục giãn ra để với tới. Hai công việc mười ngày có thể nằm trên một cái trục trải tám tháng.
Cách sửa
Kiểm tra mỗi `after <định danh>` khớp chính xác với một định danh đã khai báo. Trục đột nhiên đổi tỷ lệ chính là dấu hiệu.
gantt
dateFormat DD/MM/YYYY
section S
Thiết kế :a1, 07/01/2026, 10d
Xây dựng :a2, after thietke, 10dgantt
dateFormat DD/MM/YYYY
section S
Thiết kế :a1, 07/01/2026, 10d
Xây dựng :a2, after a1, 10dBạn thấy gì
Tên công việc bị cắt cụt ở dấu hai chấm đầu tiên
Vì sao
Trong tên công việc có dấu hai chấm. Dấu hai chấm đầu tiên là dấu phân cách, nên mọi thứ sau nó bị đọc thành dữ liệu công việc: `Giai đoạn 1: thiết kế` vẽ ra thành một công việc chỉ tên là `Giai đoạn 1`, còn chữ thiết kế biến mất. Tên các section thì không bị ảnh hưởng — đã kiểm chứng.
Cách sửa
Không dùng dấu hai chấm trong tên công việc. Hãy dùng gạch ngang dài hoặc chuyển chi tiết sang tên section.
gantt
dateFormat DD/MM/YYYY
section S
Giai đoạn 1: thiết kế :a1, 07/01/2026, 10dgantt
dateFormat DD/MM/YYYY
section S
Giai đoạn 1 — thiết kế :a1, 07/01/2026, 10dBạn thấy gì
Thanh ngang co lại thành không có gì
Vì sao
Thời lượng không có đơn vị. `5` không phải là năm ngày: đơn vị là bắt buộc và thiếu nó thì công việc không nhận được độ dài hợp lý nào. Biểu đồ vẫn vẽ ra, với một công việc trông như chẳng tốn thời gian.
Cách sửa
Luôn viết đơn vị: `5d`, `3w`, `2h`.
gantt
dateFormat DD/MM/YYYY
section S
Thiết kế :a1, 07/01/2026, 5gantt
dateFormat DD/MM/YYYY
section S
Thiết kế :a1, 07/01/2026, 5dBạn thấy gì
Thời lượng thì đúng, nhưng ngày kết thúc không khớp với thực tế
Vì sao
Thiếu `excludes weekends`. Mặc định, một công việc 10 ngày là mười ngày theo lịch kể cả cuối tuần, nên mọi việc dài hơn một tuần làm việc đều kết thúc trên biểu đồ sớm hơn ngoài đời. Ở Việt Nam còn phải cộng thêm các đợt nghỉ lễ dài, và sai lệch tích lại qua một quý sẽ rất khó bảo vệ trong cuộc họp.
Cách sửa
Thêm `excludes weekends` gần đầu, rồi liệt kê ngày lễ theo sau — trừ khi công việc thật sự chạy bảy ngày một tuần.
gantt
dateFormat DD/MM/YYYY
section S
Di chuyển dữ liệu :a1, 20/04/2026, 10dgantt
dateFormat DD/MM/YYYY
excludes weekends, 30/04/2026, 01/05/2026
section S
Di chuyển dữ liệu :a1, 20/04/2026, 10dGhi chú về việc vẽ
Đo trên Mermaid 11.12.2, đúng phiên bản trang này dùng. Gantt cư xử khác hẳn mọi loại còn lại.
Loại duy nhất có chiều rộng vẽ cố định
Mọi sơ đồ khác trên trang này đều lớn ra theo hướng mà nội dung của chúng lớn ra. Biểu đồ Gantt thì luôn có viewBox rộng 1264 pixel, dù có ba công việc hay bốn mươi; chỉ chiều cao thay đổi, đo được trong khoảng chừng 172 đến 1060 pixel. Trục bị nén lại hoặc kéo giãn ra cho vừa bề rộng cố định đó, và vì thế một kế hoạch hai năm với một kế hoạch hai tuần trông dày đặc như nhau. Nếu các thanh ngang mảnh đến mức không đọc nổi thì vấn đề nằm ở khoảng thời gian, không phải ở số lượng công việc.
Đây là chỗ duy nhất trong sáu loại mà tiếng Việt không bị khoảng trắng làm phiền
Tên công việc và tên section là nhãn chứ không phải định danh, nên khoảng trắng giữa các âm tiết hoàn toàn thoải mái: `Rà soát lược đồ` và `Chuẩn bị` đều vẽ đúng nguyên vẹn. Điều duy nhất bị cấm trong tên công việc là dấu hai chấm. Đó là một sự nhẹ nhõm đáng kể so với sơ đồ trạng thái và lưu đồ, nơi cùng một khoảng trắng ấy làm vỡ mọi thứ.
Dấu gạch chéo không cứu được — việc phân tích vẫn theo kiểu Mỹ
Tôi nhắc lại ở đây vì đây là cái bẫy đắt nhất khi viết bằng tiếng Việt. Đã đo: với `dateFormat YYYY-MM-DD`, ngày `01/03/2026` không cho lỗi cũng không cho cảnh báo, nó chỉ đơn giản đứng vào mùng 3 tháng Giêng — dấu gạch chéo chẳng gợi ý gì cho bộ máy rằng đó là ngày rồi tháng. Dấu chấm cũng vậy. Một dòng `dateFormat DD/MM/YYYY` được khai báo sẽ giải quyết trọn vẹn. Đó là dòng đầu tiên nên thêm vào mọi biểu đồ Gantt viết bằng tiếng Việt.
Xuất PNG chính xác đến từng pixel
Gantt vẽ nhãn bằng văn bản SVG thông thường chứ không phải HTML nhúng, nên — khác với lưu đồ và các sơ đồ lớp, trạng thái, ER — nó chuyển thành ảnh raster trực tiếp được. Tệp PNG xuất ra khớp chính xác với màn hình, không phải vẽ lại và không lệch kiểu chữ.
Ngữ pháp dễ dãi ở mọi nơi trừ dấu hai chấm
Thiếu section, từ khóa trạng thái lạ, ngày sai định dạng và thời lượng không đơn vị — tất cả đều vẽ ra được. Thứ duy nhất bị từ chối là dòng công việc thiếu dấu hai chấm. Sự lệch lạc đó là điều hữu ích nhất bạn có thể biết về việc viết biểu đồ Gantt: việc biểu đồ đã vẽ ra được gần như không nói lên điều gì về chuyện nó có đúng hay không.
Khi nào nên dùng loại sơ đồ khác
Nếu các ngày chỉ là phỏng đoán, biểu đồ Gantt sẽ trình bày chúng với một độ chính xác mà chúng không xứng đáng, rồi sau này sẽ có người nhắc lại chuyện đó với bạn. Một lưu đồ cho thấy thứ tự mà không có ngày thì trung thực hơn và không cần sửa mỗi lần lịch bị đẩy lùi.
Nếu kế hoạch thay đổi hằng tuần, một biểu đồ Gantt dạng văn bản nằm trong hệ quản lý phiên bản thật sự rất tốt — nhìn diff là biết cái gì đã dời — nhưng một sơ đồ không ai cập nhật thì tệ hơn là không có sơ đồ nào. Hãy tỉnh táo đánh giá bạn đang làm cái nào trong hai cái đó.
Còn với mọi chuyện liên quan đến cân bằng khối lượng công việc, năng lực hay phân công cho từng người, đây là công cụ sai. Mermaid vẽ các thanh ngang trên một cái lịch; nó không biết ai làm việc đó và người ấy có đang bận hay không.
Các loại sơ đồ khác
Viết bởi Dominik Malsch · Cập nhật lần cuối: