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

ตัวแก้ไขไดอะแกรมลำดับ Mermaid

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

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

ชำระเงินด้วยคิวอาร์ผ่านแอปธนาคาร

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

sequenceDiagram
    autonumber
    participant ลูกค้า
    participant ร้านค้า
    participant ระบบกลาง
    participant ธนาคาร

    ลูกค้า->>ร้านค้า: ยืนยันคำสั่งซื้อ
    ร้านค้า->>ระบบกลาง: ขอรหัสคิวอาร์
    ระบบกลาง-->>ร้านค้า: รหัสคิวอาร์และเลขอ้างอิง
    ร้านค้า-->>ลูกค้า: แสดงรหัสคิวอาร์
    ลูกค้า->>ธนาคาร: สแกนและยืนยันในแอป

    alt ยอดเงินพอและอยู่ในวงเงิน
        ธนาคาร->>ระบบกลาง: ตัดเงินสำเร็จ
        ระบบกลาง-->>ร้านค้า: แจ้งเงินเข้า
        ร้านค้า->>ร้านค้า: ทำเครื่องหมายว่าชำระแล้ว
    else ยอดเงินไม่พอหรือเกินวงเงิน
        ธนาคาร->>ระบบกลาง: ปฏิเสธรายการ
        ระบบกลาง-->>ร้านค้า: แจ้งไม่สำเร็จ
        ร้านค้า->>ร้านค้า: คงคำสั่งซื้อไว้รอชำระ
    end

    ร้านค้า-->>ลูกค้า: แสดงหน้าผลลัพธ์

เปิดสิ่งนี้ในตัวแก้ไข

โฆษณา

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

1. ผู้เกี่ยวข้องสองฝ่ายกับข้อความหนึ่งข้อความ

`->>` คือลูกศรหัวทึบ หมายถึงการเรียก ส่วน `-->>` เป็นเส้นประและหมายถึงการตอบกลับ คู่นี้เพียงพอสำหรับไดอะแกรมส่วนใหญ่

sequenceDiagram
    ไคลเอนต์->>เอพีไอ: สร้างคำสั่งซื้อ
    เอพีไอ-->>ไคลเอนต์: 201 Created

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

2. ชื่อย่อสำหรับชื่อที่ยาว

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

sequenceDiagram
    participant บ as เบราว์เซอร์
    participant ค as บริการคำสั่งซื้อ
    participant ส as บริการคลังสินค้า

    บ->>ค: POST /orders
    ค->>ส: จองสินค้า
    ส-->>ค: ยืนยันการจอง
    ค-->>บ: 201 Created

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

3. การเปิดใช้งานและการเรียกตัวเอง

`activate` และ `deactivate` วาดแถบที่แสดงว่าผู้เกี่ยวข้องกำลังทำงานอยู่ ส่วนต่อท้าย `+` และ `-` บนลูกศรทำงานเดียวกันโดยพิมพ์น้อยกว่า ลูกศรจากผู้เกี่ยวข้องกลับมาที่ตัวเองหมายถึงงานภายใน

sequenceDiagram
    participant อ as เอพีไอ
    participant ฐ as ฐานข้อมูล

    ไคลเอนต์->>+อ: GET /invoice/42
    อ->>+ฐ: SELECT invoice
    ฐ-->>-อ: พบระเบียน
    อ->>อ: คำนวณภาษีมูลค่าเพิ่ม
    อ-->>-ไคลเอนต์: 200 OK

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

4. ทางเลือก ส่วนที่ไม่บังคับ และวงวน

`alt`/`else` คือเส้นทางที่ตัดกันเอง `opt` คือบล็อกที่อาจไม่เกิดขึ้น และ `loop` คือการทำซ้ำ ทั้งสามปิดด้วย `end` และการลืมปิดคือข้อผิดพลาดที่พบบ่อยที่สุดของประเภทนี้

sequenceDiagram
    participant ผ as ผู้ใช้
    participant อ as เอพีไอ
    participant ม as บริการอีเมล

    ผ->>อ: ขอเปิดบัญชี
    alt อีเมลนี้ลงทะเบียนแล้ว
        อ-->>ผ: 409 Conflict
    else อีเมลนี้ยังว่าง
        อ-->>ผ: 201 Created
        อ->>ม: ส่งอีเมลยืนยัน
        loop ไม่เกินสามครั้ง
            ม->>ม: ส่งซ้ำเมื่อล้มเหลว
        end
    end
    opt ผู้ใช้ยินดีรับจดหมายข่าว
        อ->>ม: เพิ่มเข้ารายชื่อ
    end

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

5. หมายเหตุและการทำงานคู่ขนาน

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

sequenceDiagram
    participant ค as บริการคำสั่งซื้อ
    participant ง as ระบบวางบิล
    participant ข as ระบบขนส่ง

    Note over ค: คำสั่งซื้อนี้ชำระเงินแล้ว

    par แจ้งระบบวางบิล
        ค->>ง: ออกใบกำกับภาษี
        ง-->>ค: ใบกำกับ 2026/0431
    and แจ้งระบบขนส่ง
        ค->>ข: เตรียมพัสดุ
        ข-->>ค: สร้างเลขติดตามแล้ว
    end

    Note over ง,ข: แต่ละฝ่ายเดินตามจังหวะของตัวเอง

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

สรุปไวยากรณ์ไดอะแกรมลำดับ

สิ่งที่ต้องจำคือลูกศร และมันเป็นของประเภทนี้เท่านั้น ลูกศร `-->` ของผังงานที่นี่มีความหมายอื่น ส่วนลูกศร `->>` ของที่นี่เป็นข้อผิดพลาดในไดอะแกรมคลาส

ไวยากรณ์	ความหมาย
sequenceDiagram	เปิดไดอะแกรม แยกตัวพิมพ์ใหญ่เล็ก `sequencediagram` ใช้ไม่ได้
participant A	ประกาศผู้เกี่ยวข้องและกำหนดตำแหน่งของเขา
participant A as ชื่อ	ตัวระบุสั้นพร้อมชื่อที่อ่านง่าย
actor A	เหมือน participant แต่วาดเป็นรูปคน
A->>B: ข้อความ	ข้อความหัวลูกศรทึบ — การเรียก
A-->>B: ข้อความ	เส้นประ — การตอบกลับ
A-)B: ข้อความ	หัวลูกศรเปิด — ข้อความแบบไม่ประสานเวลา
A->>A: ข้อความ	ผู้เกี่ยวข้องเรียกตัวเอง
activate A / deactivate A	ทำเครื่องหมายช่วงเวลาที่ A กำลังทำงาน
A->>+B: / B-->>-A:	สิ่งเดียวกันในรูปย่อบนลูกศรโดยตรง
alt เงื่อนไข ... else ... end	เส้นทางที่ตัดกันเอง
opt เงื่อนไข ... end	บล็อกที่อาจไม่เกิดขึ้น
loop ข้อความ ... end	การทำซ้ำ
par ... and ... end	แขนงที่เกิดพร้อมกัน
Note over A,B: ข้อความ	หมายเหตุเหนือผู้เกี่ยวข้องหนึ่งฝ่ายหรือมากกว่า มี `Note left of` และ `Note right of` ด้วย
autonumber	ใส่หมายเลขข้อความให้อัตโนมัติ

โฆษณา

หกข้อผิดพลาดที่ทำให้ไดอะแกรมลำดับพัง

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

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

Parse error ที่ชี้ไปยังบรรทัดสุดท้ายของไดอะแกรม

ทำไม

มีบล็อกที่เปิดไว้แล้วไม่เคยปิด `alt`, `opt`, `loop` และ `par` ต่างต้องการ `end` ของตัวเอง Mermaid แจ้งข้อผิดพลาดตรงจุดที่ข้อมูลนำเข้าหมด เลขบรรทัดจึงชี้ไปที่ท้ายไฟล์ ไม่ใช่บล็อกที่ค้างอยู่ ถ้ามีบล็อกซ้อนกันสองชั้นก็จะหายากขึ้นไปอีก

วิธีแก้

นับบล็อกที่เปิดกับจำนวน `end` ที่เขียนไว้ ถ้าข้อผิดพลาดชี้ไปที่บรรทัดสุดท้าย แทบทุกครั้งจะเป็นเรื่องนี้

ผิด

sequenceDiagram
    ไคลเอนต์->>เอพีไอ: คำขอ
    alt ทุกอย่างเรียบร้อย
        เอพีไอ-->>ไคลเอนต์: 200 OK

ถูก

sequenceDiagram
    ไคลเอนต์->>เอพีไอ: คำขอ
    alt ทุกอย่างเรียบร้อย
        เอพีไอ-->>ไคลเอนต์: 200 OK
    end

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

No diagram type detected matching given configuration

ทำไม

ตัวพิมพ์ใหญ่เล็กของคำสำคัญไม่ถูกต้อง `sequenceDiagram` ใช้ได้ ส่วน `sequencediagram` และ `SequenceDiagram` ใช้ไม่ได้ Mermaid แยกตัวพิมพ์ใหญ่เล็กในคำสำคัญทุกคำ

วิธีแก้

ตัว D ใหญ่ ที่เหลือเป็นตัวเล็ก

ผิด

sequencediagram
    ไคลเอนต์->>เอพีไอ: สวัสดี

ถูก

sequenceDiagram
    ไคลเอนต์->>เอพีไอ: สวัสดี

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

แสดงผลได้ แต่ข้อความออกมาไม่มีตัวอักษรเลย

ทำไม

ไม่มีข้อความหลังทวิภาค วัดแล้ว Mermaid ไม่ปฏิเสธ มันวาดข้อความนั้นด้วยป้ายกำกับว่างเปล่า ลูกศรจึงค้างอยู่โดยไม่มีคำอธิบาย สิ่งที่ล้มจริงคือการไม่ใส่ทวิภาคเลย เพราะ `ไคลเอนต์->>เอพีไอ` เฉย ๆ จะให้ `Expecting 'TXT', got 'NEWLINE'` แปลว่าทวิภาคเป็นสิ่งบังคับ ส่วนข้อความไม่บังคับ ซึ่งกลับกันกับที่คนส่วนใหญ่เดา

วิธีแก้

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

ผิด

sequenceDiagram
    ไคลเอนต์->>เอพีไอ:
    เอพีไอ-->>ไคลเอนต์: 200

ถูก

sequenceDiagram
    ไคลเอนต์->>เอพีไอ: สร้างคำสั่งซื้อ
    เอพีไอ-->>ไคลเอนต์: 200

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

Parse error หลังจาก `alt` ที่มีเงื่อนไขยาว

ทำไม

มีการขึ้นบรรทัดใหม่อยู่ภายในเงื่อนไขของบล็อก เงื่อนไขของ `alt`, `opt` หรือ `loop` ต้องอยู่ในบรรทัดเดียว ถ้าคุณตัดบรรทัด ครึ่งหลังจะถูกตีความเป็นข้อความและไม่เข้ากับอะไรเลย

วิธีแก้

เก็บเงื่อนไขไว้ในบรรทัดเดียว ถ้ายาวเกินไปให้ย่อลงแล้วย้ายรายละเอียดไปไว้ในหมายเหตุ

ผิด

sequenceDiagram
    alt ลูกค้ามียอดเงินคงเหลือ
    เพียงพอในบัญชี
        A-->>B: ตกลง
    end

ถูก

sequenceDiagram
    alt ลูกค้ามียอดเงินคงเหลือเพียงพอ
        A-->>B: ตกลง
    end
    Note over A,B: ยอดคงเหลือถูกตรวจกับวงเงินต่อวัน

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

แสดงผลได้ แต่มีผู้เกี่ยวข้องโผล่มาโดยที่คุณไม่ได้ประกาศไว้

ทำไม

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

วิธีแก้

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

ผิด

sequenceDiagram
    คำสั่งซื้อ->>ขนส่ง: เตรียมพัสดุ
    ขนสง-->>คำสั่งซื้อ: พัสดุพร้อม

ถูก

sequenceDiagram
    participant ค as คำสั่งซื้อ
    participant ข as ขนส่ง
    ค->>ข: เตรียมพัสดุ
    ข-->>ค: พัสดุพร้อม

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

แสดงผลได้ แต่ลำดับคอลัมน์ไม่ใช่อย่างที่คุณต้องการ

ทำไม

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

วิธีแก้

ประกาศผู้เกี่ยวข้องทั้งหมดไว้ส่วนหัว ตามลำดับที่คุณอยากให้เห็น

ผิด

sequenceDiagram
    ธนาคาร-->>ระบบกลาง: ตัดเงินสำเร็จ
    ลูกค้า->>ร้านค้า: ยืนยันคำสั่งซื้อ
    ร้านค้า->>ระบบกลาง: สร้างรายการ

ถูก

sequenceDiagram
    participant ลูกค้า
    participant ร้านค้า
    participant ระบบกลาง
    participant ธนาคาร
    ลูกค้า->>ร้านค้า: ยืนยันคำสั่งซื้อ
    ร้านค้า->>ระบบกลาง: สร้างรายการ
    ระบบกลาง->>ธนาคาร: ส่งต่อ
    ธนาคาร-->>ระบบกลาง: ตัดเงินสำเร็จ

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

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

สำหรับภาษาไทย นี่คือประเภทที่ผ่อนปรนที่สุดในหกประเภท

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

ความกว้างถูกกำหนดโดยผู้เกี่ยวข้อง ไม่ใช่ข้อความ

วัดแล้ว ผู้เกี่ยวข้องสองฝ่ายให้ viewBox กว้าง 450 พิกเซล หกฝ่ายให้ 1250 คือราว 200 พิกเซลต่อคอลัมน์ที่เพิ่ม โดยไม่เกี่ยวกับเนื้อหาของข้อความ ส่วนข้อความเพิ่มเฉพาะความสูง ราว 46 พิกเซลต่อข้อความ มีข้อยกเว้นหนึ่งข้อ ถ้าป้ายกำกับของข้อความกว้างกว่าความกว้างขั้นต่ำของคอลัมน์ มันจะขยายไดอะแกรมจริง ป้ายกำกับภาษาไทยวัดได้ราว 204 พิกเซล เท่ากับภาษาอังกฤษพอดีสำหรับความหมายเดียวกัน จังหวะที่เกิดเรื่องนี้จึงพอ ๆ กัน

ประเภทเดียวที่จุดกำเนิดของ viewBox ติดลบ

ไดอะแกรมลำดับออกมาพร้อม viewBox ที่เริ่มจาก `-50 -10` ไม่ใช่ `0 0` นี่ไม่ใช่ข้อบกพร่อง Mermaid กันขอบนั้นไว้ให้กรอบของผู้เกี่ยวข้อง เรื่องนี้สำคัญเฉพาะเมื่อคุณเอา SVG ไปประมวลผลด้วยเครื่องมือของตัวเอง เพราะการคำนวณใดที่สมมติว่าจุดเริ่มเป็นศูนย์จะตัดคอลัมน์แรกทิ้ง

ที่นี่การส่งออก PNG แม่นยำ

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

ผู้เกี่ยวข้องที่ประกาศไว้แต่ไม่ได้ใช้ก็ยังถูกวาด

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

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

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

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

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

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

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

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