แผนภูมิแกนต์
แผนภูมิแกนต์เป็นแผนภูมิแท่งที่ใช้แสดงความคืบหน้าของโครงการและเวลาที่ต้องใช้ในการทำโครงการหนึ่งให้สำเร็จ แผนภูมิแกนต์แสดงจำนวนวันระหว่างวันที่เริ่มต้นและวันที่สิ้นสุดขององค์ประกอบปลายทางและองค์ประกอบสรุปของโครงการ
ข้อควรระวัง
แผนภูมิแกนต์บันทึกงานที่วางแผนไว้แต่ละงานเป็นแท่งต่อเนื่องที่ทอดยาวจากซ้ายไปขวา แกน x แทนเวลา แกน y บันทึกงานต่าง ๆ และลำดับการทำสำเร็จของงานเหล่านั้น
ที่สำคัญยิ่งกว่านั้น เมื่อวันที่ จำนวนวัน หรือชุดวันที่เฉพาะของงานใดถูกตัดออก แผนภูมิแกนต์จะปรับให้เข้ากับการเปลี่ยนแปลงเหล่านี้โดยขยายไปทางขวาด้วยจำนวนวันเท่ากัน แทนที่จะสร้างช่องว่างภายในงาน
คัดลอก
ฝัง
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
อย่างไรก็ตาม หากวันที่ที่ถูกตัดออกอยู่ระหว่างงานสองงานที่เริ่มต่อเนื่องกัน วันที่ที่ถูกตัดออกจะถูกข้ามไปและเว้นว่างไว้บนแผนภาพ หลังจากนั้นงานจะเริ่มหลังจากวันที่ที่ถูกตัดออกสิ้นสุดลง ดังที่แสดงด้านล่าง:
คัดลอก
ฝัง
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
แผนภูมิแกนต์มีประโยชน์สำหรับการติดตามเวลาที่ต้องใช้ในการทำโครงการให้สำเร็จ แต่ด้วยการปรับเล็กน้อย ก็ยังใช้แสดงวันหยุดแบบกราฟิกได้ด้วย
ไวยากรณ์
คัดลอก
ฝัง
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
โดยค่าเริ่มต้น งานจะดำเนินต่อเนื่องกัน โดยวันที่เริ่มต้นของงานถัดไปมีค่าเริ่มต้นเป็นวันที่สิ้นสุดของงานก่อนหน้า
ชื่องานและเมทาดาทาของงานคั่นด้วยเครื่องหมายทวิภาค (:) และรายการเมทาดาทาคั่นด้วยจุลภาค (,) ป้ายกำกับที่ถูกต้องได้แก่ active, done, crit และ milestone ป้ายกำกับเป็นตัวเลือก แต่หากใช้ ต้องวางไว้หน้าสุด หลังจากจัดการป้ายกำกับแล้ว รายการเมทาดาทาที่เหลืออธิบายได้ดังนี้:
- หากระบุรายการเดียว มันจะกำหนดว่างานสิ้นสุดเมื่อใด อาจเป็นวันที่หรือเวลาที่เจาะจง หรือระยะเวลาก็ได้ หากระบุระยะเวลา ระยะเวลานั้นจะถูกบวกเข้ากับวันที่เริ่มต้นของงานเพื่อกำหนดวันที่สิ้นสุดของงาน โดยคำนึงถึงกรณีที่ถูกตัดออกด้วย
- หากระบุสองรายการ รายการหลังจะตีความเหมือนกรณีก่อนหน้า รายการแรกสามารถระบุวันที่หรือเวลาที่เริ่มต้นอย่างชัดเจน (รูปแบบกำหนดโดย dateFormat) หรืออ้างอิงงานอื่นผ่าน after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...] ก็ได้ ในกรณีหลัง วันที่เริ่มต้นของงานจะถูกกำหนดตามวันที่สิ้นสุดที่ช้าที่สุดของงานที่ถูกอ้างอิงใด ๆ
- หากระบุสามรายการ สองรายการหลังจะตีความตามกรณีก่อนหน้า รายการแรกจะแสดง ID ของงาน ซึ่งสามารถอ้างอิงได้ด้วยไวยากรณ์ later <taskID>
| ไวยากรณ์เมทาดาทา | วันที่เริ่มต้น | วันที่สิ้นสุด | ID |
|---|---|---|---|
| <taskID>, <startDate>, <endDate> | startdate ที่ตีความด้วย dateformat | endDate ที่ตีความด้วย dateformat | taskID |
| <taskID>, <startDate>, <length> | startdate ที่ตีความด้วย dateformat | วันที่เริ่มต้น + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | วันที่สิ้นสุดของงาน otherTaskID ที่ระบุไว้ก่อนหน้า | endDate ที่ตีความด้วย dateformat | taskID |
| <taskID>, after <otherTaskId>, <length> | วันที่สิ้นสุดของงาน otherTaskID ที่ระบุไว้ก่อนหน้า | วันที่เริ่มต้น + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | startdate ที่ตีความด้วย dateformat | วันที่เริ่มต้นของงาน otherTaskID ที่ระบุไว้ก่อนหน้า | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | วันที่สิ้นสุดของงาน otherTaskID ที่ระบุไว้ก่อนหน้า | วันที่เริ่มต้นของงาน otherTaskID ที่ระบุไว้ก่อนหน้า | taskID |
| <startDate>, <endDate> | startdate ที่ตีความด้วย dateformat | 使用 dateformat 解释的 enddate | ไม่ใช้ |
| <startDate>, <length> | startdate ที่ตีความด้วย dateformat | วันที่เริ่มต้น + length | ไม่ใช้ |
| after <otherTaskID>, <endDate> | วันที่สิ้นสุดของงาน otherTaskID ที่ระบุไว้ก่อนหน้า | 使用 dateformat 解释的 enddate | ไม่ใช้ |
| after <otherTaskID>, <length> | วันที่สิ้นสุดของงาน otherTaskID ที่ระบุไว้ก่อนหน้า | วันที่เริ่มต้น + length | ไม่ใช้ |
| <startDate>, until <otherTaskId> | startdate ที่ตีความด้วย dateformat | วันที่เริ่มต้นของงาน otherTaskID ที่ระบุไว้ก่อนหน้า | ไม่ใช้ |
| after <otherTaskId>, until <otherTaskId> | วันที่สิ้นสุดของงาน otherTaskID ที่ระบุไว้ก่อนหน้า | วันที่เริ่มต้นของงาน otherTaskID ที่ระบุไว้ก่อนหน้า | ไม่ใช้ |
| <endDate> | วันที่สิ้นสุดของงานก่อนหน้า | 使用 dateformat 解释的 enddate | ไม่ใช้ |
| <length> | วันที่สิ้นสุดของงานก่อนหน้า | วันที่เริ่มต้น + length | ไม่ใช้ |
| until <otherTaskId> | วันที่สิ้นสุดของงานก่อนหน้า | วันที่เริ่มต้นของงาน otherTaskID ที่ระบุไว้ก่อนหน้า | ไม่ใช้ |
รูปแบบระยะเวลา
เมื่อระบุ <length> ให้ใช้ตัวเลขหนึ่งตัว ตามด้วยหนึ่งในคำต่อท้ายหน่วยต่อไปนี้:
| หน่วย | คำต่อท้าย | ตัวอย่าง |
|---|---|---|
| มิลลิวินาที | ms | 50ms |
| วินาที | s | 30s |
| นาที | m | 30m |
| ชั่วโมง | h | 4h |
| วัน | d | 7d |
| สัปดาห์ | w | 3w |
| เดือน | m | 2m |
| ปี | y | 1y |
ยังรองรับค่าทศนิยมด้วย (เช่น 2.5d) เครื่องหมายระยะเวลาที่ไม่ถูกต้อง (เช่น 3dX) จะถูกละเว้น และงานจะมีระยะเวลาเริ่มต้นเป็นศูนย์
เพื่อความง่าย ตารางนี้ไม่ได้แสดงงานหลายรายการที่ระบุด้วยไวยากรณ์ after ต่อไปนี้คือตัวอย่าง:
คัดลอก
ฝัง
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
ชื่อเรื่อง
title เป็นสตริงที่เป็นตัวเลือก แสดงที่ด้านบนของแผนภูมิแกนต์ ใช้สำหรับอธิบายแผนภาพทั้งหมด
การตัดออก
excludes เป็นคุณสมบัติที่เป็นตัวเลือก รับวันที่เฉพาะ (รูปแบบ YYYY-MM-DD) วันในสัปดาห์ (เช่น "sunday") หรือ "weekends" แต่ไม่สามารถใช้คำว่า "weekdays" ได้ วันที่เหล่านี้จะถูกทำเครื่องหมายบนแผนภาพ และถูกตัดออกจากการคำนวณระยะเวลาของงาน ซึ่งหมายความว่า หากช่วงเวลาที่งานดำเนินอยู่มีวันที่ที่ถูกตัดออก จำนวนวันที่ถูกตัดออกจะถูกบวกเข้ากับเวลาสิ้นสุดของงาน เพื่อให้แน่ใจว่าระยะเวลาของงานตรงกับที่ระบุในโค้ด
วันหยุดสุดสัปดาห์
เมื่อตัดวันหยุดสุดสัปดาห์ออก สามารถตั้งวันหยุดสุดสัปดาห์เป็นวันศุกร์และวันเสาร์ หรือวันเสาร์และวันอาทิตย์ก็ได้ โดยค่าเริ่มต้น วันหยุดสุดสัปดาห์คือวันเสาร์และวันอาทิตย์ หากต้องการกำหนดวันเริ่มต้นของวันหยุดสุดสัปดาห์ สามารถเพิ่มคุณสมบัติที่เป็นตัวเลือก weekend ในบรรทัดใหม่ ตามด้วย friday หรือ saturday
คัดลอก
ฝัง
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
การประกาศส่วน
คุณสามารถแบ่งแผนภาพออกเป็นส่วนต่าง ๆ เพื่อแยกส่วนต่าง ๆ ของโครงการ (เช่น การพัฒนาและเอกสาร) ออกจากกัน
สำหรับกรณีนี้ โปรดใช้ไวยากรณ์ section ที่ต้นบรรทัดและตั้งชื่อให้มัน โปรดทราบว่า ซึ่งต่างจากชื่อเรื่องของแผนภาพทั้งหมด ชื่อนี้จำเป็นต้องมี
เหตุการณ์สำคัญ (milestone)
คุณสามารถเพิ่มเหตุการณ์สำคัญ (milestone) ลงในแผนภาพได้ เหตุการณ์สำคัญแตกต่างจากงานเพราะมันแทนเวลาที่เจาะจง และถูกระบุด้วยไวยากรณ์ milestone ต่อไปนี้คือตัวอย่างการใช้เหตุการณ์สำคัญ: ตำแหน่งที่แน่นอนของเหตุการณ์สำคัญถูกกำหนดโดยวันที่เริ่มต้นของเหตุการณ์สำคัญและระยะเวลาของงาน ดังที่แสดงด้านล่าง:
คัดลอก
ฝัง
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
เครื่องหมายแนวตั้ง
vert หมายถึงการเพิ่มเส้นแนวตั้งในแผนภูมิแกนต์ เพื่อให้ไฮไลต์วันที่สำคัญได้ง่าย เช่น กำหนดส่ง เหตุการณ์สำคัญ หรือจุดตรวจสอบ เครื่องหมายเหล่านี้จะทอดยาวไปทั่วทั้งแผนภาพ และถูกจัดตำแหน่งตามวันที่ที่คุณระบุ ต่างจากเหตุการณ์สำคัญ เครื่องหมายแนวตั้งไม่กินพื้นที่หนึ่งบรรทัด มันเป็นเพียงจุดอ้างอิงทางสายตาล้วน ๆ ช่วยแบ่งไทม์ไลน์ ทำให้ช่วงเวลาสำคัญถูกระบุได้ง่ายขึ้น
คัดลอก
ฝัง
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
ตั้งค่าวันที่
dateFormat กำหนดรูปแบบการป้อนวันที่ขององค์ประกอบแผนภูมิแกนต์ ส่วน axisFormat กำหนดรูปแบบการส่งออกวันที่เมื่อเรนเดอร์แผนภาพ
รูปแบบวันที่ป้อนเข้า
รูปแบบวันที่ป้อนเข้าเริ่มต้นคือ YYYY-MM-DD คุณสามารถกำหนด dateFormat เองได้
คัดลอก
ฝัง
dateFormat YYYY-MM-DD
รองรับตัวเลือกรูปแบบต่อไปนี้:
| 输入 | ตัวอย่าง | คำอธิบาย |
|---|---|---|
| YYYY | 2026 | ปีที่มีตัวเลข 4 หลัก |
| YY | 26 | ปีที่มีตัวเลข 2 หลัก |
| Q | 1..4 | ตัวเลขไตรมาส |
| M MM | 1..12 | ตัวเลขเดือน |
| D DD | 1..31 | วันหนึ่งของเดือน |
| Do | 1st..31st | วันหนึ่งของเดือนแบบมีลำดับที่ |
| DDD DDDD | 1..365 | วันหนึ่งของปี |
| X | 1410715640.579 | Unix timestamp |
| x | 1410715640579 | Unix timestamp หน่วยมิลลิวินาที |
| H HH | 0..23 | เวลาแบบ 24 ชั่วโมง |
| h hh | 1..12 | เวลาแบบ 12 ชั่วโมง ใช้ร่วมกับ a A |
| a A | am pm | ก่อนเที่ยงหรือหลังเที่ยง |
| m mm | 0..59 | นาที |
| s ss | 0..59 | จำนวนวินาที |
| S | 0..9 | หนึ่งในสิบของวินาที |
| SS | 0..99 | หนึ่งในร้อยของวินาที |
| SSS | 0..999 | หนึ่งในพันของวินาที |
| Z ZZ | +12:00 | ค่าชดเชยจาก UTC รูปแบบ +-HH:mm, +-HHmm หรือ Z |
รูปแบบวันที่ส่งออกของแกน
รูปแบบวันที่ส่งออกเริ่มต้นคือ YYYY-MM-DD คุณสามารถกำหนด axisFormat เองได้ เช่น 2026-Q1 หมายถึงไตรมาสแรกของปี 2026
คัดลอก
ฝัง
axisFormat %Y-%m-%d
รองรับสตริงรูปแบบต่อไปนี้:
| รูปแบบ,คำจำกัดความ | |
|---|---|
| %a | ชื่อย่อของวันในสัปดาห์ |
| %A | ชื่อเต็มของวันในสัปดาห์ |
| %b | ชื่อย่อของเดือน |
| %B | ชื่อเต็มของเดือน |
| %c | วันที่และเวลาแบบโลคัล |
| %d | วันที่ ตัวเลขฐานสิบ [01,31] |
| %e | วันที่ ตัวเลขฐานสิบที่เติมด้วยช่องว่าง [1,31] เทียบเท่ากับ %_d |
| %H | ชั่วโมง (แบบ 24 ชั่วโมง) ตัวเลขฐานสิบ [00,23] |
| %I | ชั่วโมง (แบบ 12 ชั่วโมง) ตัวเลขฐานสิบ [01,12] |
| %j | วันที่เท่าไรของปี ตัวเลขฐานสิบ [001,366] |
| %m | เดือน ตัวเลขฐานสิบ [01,12] |
| %M | นาที ตัวเลขฐานสิบ [00,59] |
| %L | มิลลิวินาที ตัวเลขฐานสิบ [000, 999] |
| %p | ก่อนเที่ยงหรือหลังเที่ยง |
| %S | วินาที ตัวเลขฐานสิบ [00,59] |
| %U | สัปดาห์ที่เท่าไรของปี (โดยวันอาทิตย์เป็นวันแรกของสัปดาห์) ตัวเลขฐานสิบ [00,53] |
| %w | วันในสัปดาห์ ตัวเลขฐานสิบที่เติมด้วยช่องว่าง [0,6] โดย 0 แทนวันอาทิตย์ |
| %W | สัปดาห์ที่เท่าไรของปี (โดยวันจันทร์เป็นวันแรกของสัปดาห์) ตัวเลขฐานสิบ [00,53] |
| %x | การแสดงวันที่แบบโลคัล เช่น 2026-09-18 |
| %X | การแสดงเวลาแบบโลคัล เช่น 14:30:00 |
| %y | ปีที่ไม่มีศตวรรษ ตัวเลขฐานสิบ [00,99] เช่น 26 แทนปี 2026 |
| %Y | ปีที่มีศตวรรษ ตัวเลขฐานสิบ |
| %Z | ชื่อย่อของเขตเวลา เช่น "-0700" |
| %% | อักขระหลีก ใช้แสดงเครื่องหมายเปอร์เซ็นต์ % เอง |
ขีดบอกตำแหน่งของแกน
ขีดบอกตำแหน่งส่งออกเริ่มต้นเป็นแบบอัตโนมัติ คุณสามารถกำหนด tickInterval เองได้ เช่น 1day หรือ 1week
คัดลอก
ฝัง
tickInterval 1day
โหมดคือ
คัดลอก
ฝัง
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
tickInterval แบบรายสัปดาห์เริ่มจากวันอาทิตย์เป็นค่าเริ่มต้น หากคุณต้องการระบุวันทำงานอื่นที่ tickInterval เริ่ม ให้ใช้ตัวเลือก weekday ดังโค้ดต่อไปนี้:
คัดลอก
ฝัง
gantt
tickInterval 1week
weekday monday
เอาต์พุตโหมดกะทัดรัด
โหมดกะทัดรัดช่วยให้คุณแสดงหลายงานในบรรทัดเดียวกันได้ ควบคุมโหมดการแสดงผลของกราฟผ่านการตั้งค่า YAML ข้างต้น เพื่อเปิดใช้โหมดกะทัดรัดสำหรับแผนภูมิแกนต์
คัดลอก
ฝัง
---
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
สามารถป้อนความคิดเห็นในแผนภูมิแกนต์ได้ และตัวแยกวิเคราะห์จะไม่สนใจความคิดเห็นนั้น ความคิดเห็นต้องอยู่บนบรรทัดของตัวเอง และต้องขึ้นต้นด้วย %% (เครื่องหมายเปอร์เซ็นต์คู่) ข้อความใด ๆ ตั้งแต่เริ่มความคิดเห็นจนถึงตัวขึ้นบรรทัดใหม่ถัดไปจะถือเป็นความคิดเห็น รวมถึงไวยากรณ์ของแผนภาพใด ๆ
คัดลอก
ฝัง
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
เครื่องหมายวันนี้
คุณสามารถตั้งค่าสไตล์ให้กับเครื่องหมายของวันที่ปัจจุบันหรือซ่อนเครื่องหมายนั้นได้ หากต้องการตั้งค่าสไตล์ โปรดเพิ่มค่าให้กับคีย์ todayMarker
คัดลอก
ฝัง
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
หากต้องการซ่อนเครื่องหมาย โปรดตั้งค่า todayMarker เป็น off
คัดลอก
ฝัง
todayMarker off
ตัวอย่าง
แผนภูมิแกนต์แบบแท่ง
คัดลอก
ฝัง
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
ไทม์ไลน์ (มีความคิดเห็น, CSS และการกำหนดค่าส่วนหน้า)
คัดลอก
ฝัง
---
# 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
