ฟรี · ไม่ต้องสมัคร · รองรับไฟล์ .mmd

ตัวแก้ไขแผนภูมิแกนต์ Mermaid

แผนภูมิแกนต์วางงานลงบนปฏิทิน ว่าอะไรกินเวลาเท่าไร อะไรทับซ้อนกัน และอะไรเริ่มไม่ได้จนกว่าอย่างอื่นจะเสร็จ ใช้เมื่อแก่นของเรื่องคือวันที่และความสัมพันธ์ระหว่างงาน ถ้าคุณต้องการเพียงลำดับโดยไม่ต้องมีวันที่ ผังงานเบากว่าและไม่เน่าทุกครั้งที่แผนเลื่อน

เปิดสิ่งนี้ในตัวแก้ไข →อ่านคู่มือ

แผนปล่อยรุ่นที่มีความสัมพันธ์และหมุดหมาย

สิ่งที่ทำให้นี่เป็นแผนภูมิแกนต์ ไม่ใช่แค่ภาพแท่ง คือ `after a1` เพราะความสัมพันธ์ถูกประกาศไว้ การเลื่อนงานแรกจึงลากทุกอย่างที่ตามมาไปด้วย ส่วนหมุดหมายทำเครื่องหมายวันที่ตายตัวซึ่งไม่กินเวลา และบรรทัด `dateFormat DD/MM/YYYY` ไม่ใช่ของเลือกได้ ถ้าไม่มีคุณจะตกกับดักวันที่ที่อธิบายไว้ด้านล่าง

gantt
    title ปล่อยรุ่น 2.4
    dateFormat DD/MM/YYYY
    axisFormat %d/%m
    excludes weekends

    section การพัฒนา
    สัญญา API             :done,      a1, 07/01/2026, 10d
    ลงมือพัฒนา            :active,    a2, after a1, 20d
    ทดสอบภายใน            :           a3, after a2, 8d

    section การปล่อยรุ่น
    ช่วงทำให้เสถียร        :           b1, after a3, 5d
    ตัดสินใจปล่อยรุ่น      :milestone, m1, after b1, 0d
    นำขึ้นระบบจริง         :crit,      b2, after m1, 3d
เปิดสิ่งนี้ในตัวแก้ไข
โฆษณา

ตัวอย่างพร้อมคำอธิบาย

1. แผนภูมิที่ถูกต้องแบบง่ายที่สุด

`dateFormat` บอก Mermaid ว่าจะอ่านวันที่ที่คุณเขียนอย่างไร ส่วน `axisFormat` คุมว่าวันที่จะแสดงบนแกนอย่างไร ทั้งสองเป็นคนละการตั้งค่า และการสับสนระหว่างสองอย่างนี้คือต้นเหตุความหงุดหงิดที่พบบ่อยที่สุดกับแกนต์

gantt
    title สปรินต์ 14
    dateFormat DD/MM/YYYY
    section งาน
    สร้างระบบค้นหา :02/03/2026, 10d
เปิดในตัวแก้ไข

2. ตัวระบุงานและความสัมพันธ์

การให้ตัวระบุแก่งานหนึ่งทำให้งานถัดไปเขียน `after <ตัวระบุ>` ได้ เมื่อประกาศความสัมพันธ์ไว้ คุณเปลี่ยนวันเริ่มที่เดียว แล้วแผนที่เหลือจะขยับตามเอง

gantt
    title ย้ายข้อมูล
    dateFormat DD/MM/YYYY
    section เตรียมการ
    ตรวจสอบสคีมา          :a1, 02/02/2026, 5d
    เขียนการจับคู่ข้อมูล  :a2, after a1, 8d
    section ดำเนินการ
    ซ้อมใหญ่               :a3, after a2, 3d
    สลับระบบ               :a4, after a3, 1d
เปิดในตัวแก้ไข

3. คำสำคัญบอกสถานะ

`done`, `active` และ `crit` เปลี่ยนวิธีวาดแท่ง เป็นวิธีที่ถูกที่สุดที่จะทำให้แผนภูมิตอบคำถามว่า «ตอนนี้เราอยู่ตรงไหน» ไม่ใช่แค่ «แผนเดิมเป็นอย่างไร»

gantt
    title แพลตฟอร์ม ไตรมาสแรก
    dateFormat DD/MM/YYYY
    section โครงสร้างพื้นฐาน
    จัดระเบียบ Terraform  :done,   t1, 05/01/2026, 12d
    อัปเกรด Kubernetes    :active, t2, 19/01/2026, 15d
    ทบทวนค่าใช้จ่าย        :        t3, after t2, 5d
    section ความปลอดภัย
    ตรวจสอบไลบรารี         :crit,   s1, 12/01/2026, 6d
เปิดในตัวแก้ไข

4. หมุดหมาย

หมุดหมายคือจุด ไม่ใช่ช่วงเวลา จึงต้องให้ `0d` ใช้กับวันที่ที่ถูกกำหนดจากภายนอกโครงการ เช่น งานแสดงสินค้า กำหนดตามสัญญา หรือวันหยุดแก้โค้ด

gantt
    title แผนเปิดตัว
    dateFormat DD/MM/YYYY
    section วิศวกรรม
    ตรึงขอบเขตงาน          :milestone, m1, 01/04/2026, 0d
    ล่าข้อบกพร่อง          :          e1, 01/04/2026, 5d
    แตกสาขาปล่อยรุ่น       :milestone, m2, after e1, 0d
    section การสื่อสาร
    หมดกำหนดห้ามเผยแพร่    :milestone, m3, 15/04/2026, 0d
เปิดในตัวแก้ไข

5. ตัดวันหยุดสุดสัปดาห์และวันหยุดนักขัตฤกษ์

`excludes weekends` ทำให้การนับระยะเวลาไม่รวมเสาร์อาทิตย์ งาน 10 วันจึงกินเวลาสองสัปดาห์ทำงานแทนที่จะไปจบกลางวันหยุด ส่วนวันหยุดนักขัตฤกษ์ตัดออกทีละวัน ซึ่งในไทยช่วงสงกรานต์เห็นผลชัดเจนมาก

gantt
    title เปิดใช้บริการใหม่
    dateFormat DD/MM/YYYY
    excludes weekends, 13/04/2026, 14/04/2026, 15/04/2026

    section สร้าง
    ตั้งโครงสร้างพื้นฐาน  :p1, 06/04/2026, 5d
    ต่อสายงาน CI/CD       :p2, after p1, 5d
    section ส่งมอบ
    คู่มือและการอบรม       :p3, after p2, 4d
เปิดในตัวแก้ไข

สรุปไวยากรณ์แผนภูมิแกนต์

ในบรรดาหกประเภท แกนต์เข้มงวดที่สุดเพียงจุดเดียวคือบรรทัดของงาน และผ่อนปรนที่สุดในทุกเรื่องที่เหลือ ด้วยเหตุนี้เองข้อผิดพลาดจำนวนมากจึงเล็ดลอดไปโดยไม่มีใครสังเกต

ไวยากรณ์ความหมาย
ganttเปิดไดอะแกรม
title ข้อความชื่อของแผนภูมิ
dateFormat DD/MM/YYYYวิธีแจงวันที่ที่คุณเขียน นี่คือบรรทัดที่ถูกต้องสำหรับภาษาไทย
dateFormat YYYY-MM-DDรูปแบบ ISO ซึ่งเป็นค่าตั้งต้น
axisFormat %d/%mวิธีแสดงวันที่บนแกน เป็นคนละการตั้งค่ากับ dateFormat
excludes weekendsข้ามเสาร์อาทิตย์เมื่อคำนวณระยะเวลา
excludes 13/04/2026ตัดวันใดวันหนึ่งออก ใช้วิธีนี้เอาวันหยุดนักขัตฤกษ์ออก
section ชื่อรวมงานไว้ในแถบที่มีชื่อ
งาน :id, 01/01/2026, 10dงานที่ระบุวันเริ่มและระยะเวลาชัดเจน
งาน :id, after อื่น, 10dงานที่เริ่มเมื่อ `อื่น` เสร็จ
งาน :done, id, ...เสร็จแล้ว วาดเป็นสีจาง
งาน :active, id, ...กำลังทำ วาดแบบเน้น
งาน :crit, id, ...วิกฤต วาดด้วยสีเน้น
ชื่อ :milestone, id, วันที่, 0dจุดหนึ่งบนเส้นเวลา ไม่ใช่ช่วงเวลา
10d / 3w / 2hระยะเวลาเป็นวัน สัปดาห์ ชั่วโมง หน่วยเป็นสิ่งบังคับ
โฆษณา

หกกับดักของแกนต์ — และมีเพียงหนึ่งเดียวที่เป็นข้อผิดพลาด

นี่คือสิ่งที่ทำให้แกนต์ต่างจากอีกห้าประเภท สร้างซ้ำบน Mermaid 11.12.2 มีเพียงหนึ่งในหกข้อด้านล่างที่หยุดการแสดงผล อีกห้าข้อให้แผนงานที่น่าเชื่อถืออย่างยิ่งและผิด ซึ่งอันตรายกว่ามาก เพราะไม่มีใครกลับไปตรวจแผนภูมิที่แสดงผลออกมาแล้ว

สิ่งที่คุณเห็น

Parse error ที่ลงท้ายด้วย: Expecting 'taskData', got 'NL'

ทำไม

บรรทัดของงานไม่มีทวิภาค ทวิภาคคือสิ่งที่แยกชื่อที่แสดงออกจากข้อมูลของงาน และเมื่อไม่มีมันก็ไม่เหลืออะไรให้แจง นี่เป็นกับดักเดียวในรายการนี้ที่ Mermaid ปฏิเสธอย่างตรงไปตรงมา

วิธีแก้

ใส่ทวิภาคระหว่างชื่อกับตัวระบุ

ผิด
gantt
    dateFormat DD/MM/YYYY
    section งาน
    ออกแบบ a1, 07/01/2026, 5d
ถูก
gantt
    dateFormat DD/MM/YYYY
    section งาน
    ออกแบบ :a1, 07/01/2026, 5d

สิ่งที่คุณเห็น

แผนภูมิแสดงผลได้ แต่ไปโผล่ในปีที่ห่างออกไปห้าร้อยกว่าปี

ทำไม

คุณเขียนปีเป็นพุทธศักราช นี่คือกับดักที่มีเฉพาะภาษาไทยและเป็นข้อที่แพงที่สุดในหน้านี้ Mermaid ไม่รู้จักพุทธศักราชเลย มันอ่านตัวเลขปีตามที่เขียนตรง ๆ วัดแล้ว `01/03/2569` ไม่ให้ข้อผิดพลาดและไม่เตือนอะไรทั้งสิ้น แต่ไปวางงานไว้ในปี 2569 ตามคริสต์ศักราช คือห่างจากที่คุณตั้งใจไป 543 ปี แกนของแผนภูมิยังดูปกติทุกอย่าง เพราะทุกงานเลื่อนไปเท่ากันหมด ความผิดพลาดจึงมองไม่เห็นจนกว่าจะไปอ่านตัวเลขปีจริง ๆ

วิธีแก้

เขียนปีเป็นคริสต์ศักราชเสมอในตัวข้อมูลวันที่ ถ้าอยากให้ผู้อ่านเห็นเป็นพุทธศักราช ให้ใส่ไว้ในชื่อแผนภูมิหรือชื่อหมวดแทน เพราะตรงนั้นเป็นป้ายกำกับที่ไม่ถูกนำไปคำนวณ

ผิด
gantt
    dateFormat DD/MM/YYYY
    axisFormat %d/%m/%Y
    section ส
    ออกแบบ :a1, 01/03/2569, 10d
ถูก
gantt
    title แผนงานปี 2569
    dateFormat DD/MM/YYYY
    axisFormat %d/%m/%Y
    section ส
    ออกแบบ :a1, 01/03/2026, 10d

สิ่งที่คุณเห็น

แผนภูมิแสดงผลได้ แต่วันที่ไปตกก่อนกำหนดสองเดือน

ทำไม

ค่าตั้งต้นของ `dateFormat` คือรูปแบบ ISO และเมื่อเจอวันที่ที่มีตัวคั่น Mermaid จะอ่านแบบอเมริกัน คือเอาเดือนขึ้นก่อน วัดแล้ว `01/03/2026` เมื่อใช้ `dateFormat YYYY-MM-DD` จะไปวางงานไว้วันที่ 3 มกราคม ไม่มีคำเตือนใด ๆ แผนภูมิดูเรียบร้อยดีและเคลื่อนไปสองเดือน

วิธีแก้

ประกาศ `dateFormat DD/MM/YYYY` แล้วเขียนวันที่แบบที่เขียนกันปกติ ทดสอบแล้วว่าเมื่อใช้รูปแบบนี้ `01/03/2026` ตกวันที่ 1 มีนาคมพอดี

ผิด
gantt
    dateFormat YYYY-MM-DD
    axisFormat %d/%m/%Y
    section ส
    ออกแบบ :a1, 01/03/2026, 10d
ถูก
gantt
    dateFormat DD/MM/YYYY
    axisFormat %d/%m/%Y
    section ส
    ออกแบบ :a1, 01/03/2026, 10d

สิ่งที่คุณเห็น

ชื่องานถูกตัดที่ทวิภาคตัวแรก

ทำไม

ในชื่องานมีทวิภาคอยู่ ทวิภาคตัวแรกคือตัวคั่น ทุกอย่างหลังจากนั้นจึงถูกอ่านเป็นข้อมูลของงาน วัดแล้วว่างานชื่อ `ระยะที่ 1: ออกแบบ` ออกมาเป็นงานชื่อ `ระยะที่ 1` เฉย ๆ ส่วนคำว่าออกแบบหายไป ส่วนชื่อหมวดไม่ได้รับผลกระทบ ทดสอบแล้ว

วิธีแก้

อย่าใช้ทวิภาคในชื่องาน ใช้ขีดกลางหรือย้ายรายละเอียดไปไว้ในชื่อหมวดแทน

ผิด
gantt
    dateFormat DD/MM/YYYY
    section ส
    ระยะที่ 1: ออกแบบ :a1, 07/01/2026, 10d
ถูก
gantt
    dateFormat DD/MM/YYYY
    section ส
    ระยะที่ 1 — ออกแบบ :a1, 07/01/2026, 10d

สิ่งที่คุณเห็น

แท่งหดจนหายไป

ทำไม

ระยะเวลาไม่มีหน่วย `5` ไม่ได้แปลว่าห้าวัน หน่วยเป็นสิ่งบังคับ และเมื่อไม่มีหน่วยงานก็ไม่ได้ความยาวที่มีความหมาย แผนภูมิยังแสดงผลอยู่ดี พร้อมงานที่ดูราวกับไม่กินเวลาเลย

วิธีแก้

เขียนหน่วยเสมอ `5d`, `3w`, `2h`

ผิด
gantt
    dateFormat DD/MM/YYYY
    section ส
    ออกแบบ :a1, 07/01/2026, 5
ถูก
gantt
    dateFormat DD/MM/YYYY
    section ส
    ออกแบบ :a1, 07/01/2026, 5d

สิ่งที่คุณเห็น

ระยะเวลาถูกต้อง แต่วันเสร็จไม่ตรงกับความเป็นจริง

ทำไม

ไม่มี `excludes weekends` โดยค่าตั้งต้น งาน 10 วันคือสิบวันตามปฏิทินรวมวันหยุดสุดสัปดาห์ ดังนั้นทุกอย่างที่ยาวกว่าหนึ่งสัปดาห์ทำงานจะเสร็จบนแผนภูมิเร็วกว่าในความเป็นจริง ในไทยยังต้องบวกช่วงสงกรานต์และวันหยุดยาวอื่น ๆ เข้าไปอีก และส่วนต่างที่สะสมตลอดไตรมาสจะกลายเป็นเรื่องที่อธิบายยากในที่ประชุม

วิธีแก้

เพิ่ม `excludes weekends` ไว้ใกล้ ๆ ตอนต้น ตามด้วยวันหยุดนักขัตฤกษ์ เว้นแต่งานจะเดินจริงเจ็ดวันต่อสัปดาห์

ผิด
gantt
    dateFormat DD/MM/YYYY
    section ส
    ย้ายข้อมูล :a1, 06/04/2026, 10d
ถูก
gantt
    dateFormat DD/MM/YYYY
    excludes weekends, 13/04/2026, 14/04/2026, 15/04/2026
    section ส
    ย้ายข้อมูล :a1, 06/04/2026, 10d

หมายเหตุเรื่องการแสดงผล

วัดบน Mermaid 11.12.2 ซึ่งเป็นรุ่นที่เว็บนี้ใช้ แกนต์มีพฤติกรรมต่างจากทุกประเภทที่เหลือ

พุทธศักราชคือกับดักที่แพงที่สุดของภาษาไทยทั้งเว็บนี้

ควรย้ำอีกครั้งเพราะมันร้ายกว่ากับดักวันที่แบบอื่นทั้งหมด Mermaid ไม่มีความคิดเรื่องพุทธศักราชอยู่เลย มันอ่านเลขปีตามตัวอักษร วัดแล้ว `01/03/2569` แสดงผลได้เรียบร้อยและไปอยู่ในปี 2569 ตามคริสต์ศักราช ที่ทำให้ตรวจจับยากคือทุกงานเลื่อนไปพร้อมกันหมด รูปทรงของแผนภูมิจึงถูกต้องทุกประการ ระยะเวลาถูก ความสัมพันธ์ถูก มีแต่ตัวเลขปีบนแกนที่ผิด และถ้า `axisFormat` ของคุณแสดงแค่วันกับเดือน คุณจะไม่เห็นมันเลย กฎที่ปลอดภัยคือใช้คริสต์ศักราชในข้อมูลวันที่เสมอ แล้วเขียนพุทธศักราชไว้ในชื่อแผนภูมิถ้าต้องการ

ประเภทเดียวที่ความกว้างของภาพคงที่

ไดอะแกรมอื่นทุกชนิดในเว็บนี้ขยายไปตามทิศทางที่เนื้อหาขยาย แต่แผนภูมิแกนต์มี viewBox กว้าง 1264 พิกเซลเสมอ ไม่ว่าจะมีสามงานหรือสี่สิบงาน เปลี่ยนเฉพาะความสูง ซึ่งวัดได้ระหว่างราว 172 ถึง 1060 พิกเซล แกนถูกบีบหรือยืดให้พอดีกับความกว้างคงที่นั้น จึงเป็นเหตุให้แผนสองปีกับแผนสองสัปดาห์ดูแน่นพอกัน ถ้าแท่งออกมาบางจนอ่านไม่ออก ปัญหาอยู่ที่ช่วงวันที่ ไม่ใช่จำนวนงาน

ที่นี่ไม่มีข้อจำกัดเรื่องอักษรไทยเลย

เป็นเรื่องน่าโล่งใจและควรพูดให้ชัด อักษรไทยถูกปฏิเสธในตัวระบุโหนดของผังงานและในชื่อคลาส แต่ในแกนต์ไม่มีตำแหน่งแบบนั้นอยู่เลย ชื่องานและชื่อหมวดเป็นป้ายกำกับ ไม่ใช่ตัวระบุ ทดสอบแล้วว่า `section การวางแผน` และ `วิเคราะห์ความต้องการ` แสดงผลได้ตรงตามที่เขียน สิ่งเดียวที่ห้ามในชื่องานคือทวิภาค แกนต์จึงเป็นประเภทที่ภาษาไทยไม่ต้องประนีประนอมอะไรเลย

การส่งออก PNG แม่นยำระดับพิกเซล

แกนต์วาดป้ายกำกับเป็นข้อความ SVG ธรรมดา ไม่ใช่ HTML ฝังใน ดังนั้นต่างจากผังงานและไดอะแกรมคลาส สถานะ และ ER มันจึงแปลงเป็นภาพแรสเตอร์ได้โดยตรง ไฟล์ PNG ที่ส่งออกตรงกับที่เห็นบนจอทุกประการ ไม่มีการวาดใหม่และไม่มีการเคลื่อนของการจัดวางตัวอักษร

ไวยากรณ์ผ่อนปรนทุกที่ยกเว้นทวิภาค

หมวดที่ขาดหาย คำสำคัญบอกสถานะที่ไม่รู้จัก วันที่รูปแบบผิด และระยะเวลาที่ไม่มีหน่วย ทั้งหมดแสดงผลได้ สิ่งเดียวที่ถูกปฏิเสธคือบรรทัดของงานที่ไม่มีทวิภาค ความไม่สมมาตรนี้คือสิ่งที่มีประโยชน์ที่สุดที่คุณจะรู้เกี่ยวกับการเขียนแผนภูมิแกนต์ นั่นคือการที่แผนภูมิแสดงผลออกมาได้แทบไม่ได้บอกอะไรเลยว่ามันถูกต้องหรือไม่

เมื่อใดควรใช้ไดอะแกรมประเภทอื่น

ถ้าวันที่เป็นเพียงการคาดเดา แผนภูมิแกนต์จะนำเสนอมันด้วยความแม่นยำที่มันไม่สมควรได้รับ และภายหลังจะมีคนหยิบมาทวงกับคุณ ผังงานที่แสดงลำดับโดยไม่มีวันที่ซื่อตรงกว่า และไม่ต้องแก้ทุกครั้งที่แผนเลื่อน

ถ้าแผนเปลี่ยนทุกสัปดาห์ แกนต์แบบข้อความที่อยู่ในระบบควบคุมเวอร์ชันดีจริง เพราะดูจากดิฟก็รู้ว่าอะไรเลื่อน แต่ไดอะแกรมที่ไม่มีใครอัปเดตแย่กว่าการไม่มีไดอะแกรมเลย ประเมินอย่างใจเย็นว่าคุณกำลังทำอันไหนอยู่

และสำหรับทุกเรื่องที่เกี่ยวกับการเกลี่ยภาระงาน กำลังการผลิต หรือการมอบหมายงานให้แต่ละคน นี่เป็นเครื่องมือที่ผิด Mermaid วาดแท่งลงบนปฏิทิน มันไม่รู้ว่าใครทำงานนั้นหรือคนนั้นยุ่งอยู่แล้วหรือเปล่า

ไดอะแกรมประเภทอื่น

เขียนโดย Dominik Malsch · อัปเดตล่าสุด:

เปิดตัวแก้ไข →