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

ตัวแก้ไขผังงาน Mermaid

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

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

สายงานปล่อยรุ่นที่มีเส้นทางล้มเหลวสองทาง

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

flowchart TD
    push[พุชขึ้น main] --> lint[ตรวจสอบสถิตและชนิดข้อมูล]
    lint --> test{การทดสอบผ่าน}
    test -->|ไม่| alert[แจ้งผู้ที่คอมมิต]
    test -->|ใช่| build[สร้างอิมเมจ]
    build --> scan{การสแกนความปลอดภัยสะอาด}
    scan -->|ไม่| hold["ระงับการปล่อยรุ่น (ตรวจด้วยมือ)"]
    scan -->|ใช่| deploy[นำขึ้นระบบจริง]
    deploy --> smoke[ทดสอบอย่างเร็ว]
    smoke --> done[ปล่อยรุ่นเสร็จสิ้น]
เปิดสิ่งนี้ในตัวแก้ไข
โฆษณา

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

1. ผังงานที่เล็กที่สุด

สองโหนดกับหนึ่งลูกศร `TD` ไล่จากบนลงล่าง ส่วน `LR` ไล่จากซ้ายไปขวา และไดอะแกรมที่กว้างกว่าสูงมักอ่านง่ายกว่าด้วย `LR` แทบทุกครั้ง

flowchart TD
    recv[รับคำขอ] --> reply[ส่งคำตอบ]
เปิดในตัวแก้ไข

2. การแตกแขนงพร้อมป้ายกำกับ

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

flowchart TD
    start[รับคำขอ] --> auth{โทเคนถูกต้อง}
    auth -->|ใช่| handle[เรียกตัวจัดการ]
    auth -->|ไม่| deny[ส่งกลับ 401]
    handle --> ok[ส่งกลับ 200]
เปิดในตัวแก้ไข

3. ให้รูปทรงบอกอะไรบางอย่าง

รูปทรงเป็นวิธีที่ถูกที่สุดในการเพิ่มข้อมูลลงในผังงาน ปลายมนบอกจุดเริ่มและจุดจบ สี่เหลี่ยมข้าวหลามตัดบอกการตัดสินใจ และทรงกระบอกบอกที่เก็บข้อมูล

flowchart LR
    begin([เริ่มงาน]) --> read[(อ่านจาก Postgres)]
    read --> fresh{มีแถวใหม่}
    fresh -->|ไม่| stop([จบโดยไม่เปลี่ยนแปลง])
    fresh -->|ใช่| xform[/แปลงข้อมูล/]
    xform --> write[(เขียนลง S3)]
    write --> stop
เปิดในตัวแก้ไข

4. กลุ่มย่อยเพื่อจัดกลุ่มตามผู้รับผิดชอบ

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

flowchart TD
    subgraph client [เบราว์เซอร์]
        ui[ส่งแบบฟอร์ม]
    end
    subgraph api [บริการคำสั่งซื้อ]
        validate[ตรวจข้อมูลนำเข้า]
        save[บันทึกคำสั่งซื้อ]
    end
    subgraph async [งานเบื้องหลัง]
        mail[ส่งอีเมลยืนยัน]
        invoice[ออกใบแจ้งหนี้]
    end
    ui --> validate
    validate --> save
    save --> mail
    save --> invoice
เปิดในตัวแก้ไข

5. วงวนลองใหม่ที่มีขีดจำกัด

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

flowchart TD
    send[ส่งเว็บฮุก] --> result{ได้รับ 2xx}
    result -->|ใช่| success[ทำเครื่องหมายว่าส่งแล้ว]
    result -->|ไม่| tries{ลองน้อยกว่า 5 ครั้ง}
    tries -->|ใช่| wait[รอแบบทวีคูณ]
    wait --> send
    tries -->|ไม่| queue[ใส่คิวที่ล้มเหลว]
เปิดในตัวแก้ไข

สรุปไวยากรณ์ผังงาน

ทุกอย่างในนี้เป็นของผังงานเท่านั้น โดยเฉพาะลูกศร มันย้ายไปใช้กับประเภทอื่นไม่ได้ ลูกศร `->>` ของไดอะแกรมลำดับถือเป็นข้อผิดพลาดทางไวยากรณ์ที่นี่

ไวยากรณ์ความหมาย
flowchart TDจากบนลงล่าง `TB` ก็เหมือนกัน เป็นทิศทางปกติของการอ่านกระบวนการ
flowchart LRจากซ้ายไปขวา มี `RL` ด้วย เหมาะกับกระแสงานที่กว้างและตื้น
A[ข้อความ]สี่เหลี่ยมผืนผ้า — ขั้นตอนธรรมดา
A(ข้อความ)สี่เหลี่ยมผืนผ้ามุมมน
A([ข้อความ])ทรงสนามกีฬา — ตามธรรมเนียมคือจุดเริ่มหรือจุดจบ
A[(ข้อความ)]ทรงกระบอก — ที่เก็บข้อมูล
A{ข้อความ}สี่เหลี่ยมข้าวหลามตัด — การตัดสินใจ
A[/ข้อความ/]สี่เหลี่ยมด้านขนาน — ข้อมูลเข้าหรือออก
A --> Bลูกศร
A --- Bเส้นที่ไม่มีหัวลูกศร
A -.-> Bลูกศรเส้นประ — ตามธรรมเนียมคือแบบไม่ประสานเวลาหรือไม่บังคับ
A ==> Bลูกศรหนา — ตามธรรมเนียมคือเส้นทางหลัก
A -->|ข้อความ| Bเส้นเชื่อมที่มีป้ายกำกับ ถ้ามีวงเล็บต้องใส่เครื่องหมายคำพูด
A["ข้อความ (มีวงเล็บ)"]ป้ายกำกับในเครื่องหมายคำพูด จำเป็นสำหรับวงเล็บ เครื่องหมายคำพูด และทุกอักขระที่ถูกอ่านเป็นไวยากรณ์รูปทรง
subgraph ชื่อ [หัวเรื่อง] ... endรวมโหนดไว้ในกรอบ ปิดด้วย `end`
%% หมายเหตุบรรทัดหมายเหตุ ไม่ถูกวาดออกมา
โฆษณา

หกข้อผิดพลาดที่ทำให้ผังงานพังจริง

ทั้งหมดสร้างซ้ำบนเอนจินที่เว็บนี้ใช้ (Mermaid 11.12.2) วางรูปแบบที่ผิดลงในตัวแก้ไขแล้วจะได้ข้อผิดพลาดตรงตามที่อธิบาย ส่วนรูปแบบที่แก้แล้วแสดงผลได้ วิธีอ่านข้อผิดพลาดของ Mermaid ที่เร็วที่สุดคือดูตอนท้าย หลังคำว่า `got` จะเป็นโทเคนที่ตัวแจงติดอยู่

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

Lexical error on line N. Unrecognized text.

ทำไม

ตัวระบุของโหนดเขียนด้วยอักษรไทย และนี่คืออุปสรรคใหญ่ที่สุดเมื่อเขียนภาษาไทย วัดแล้ว `คำสั่งซื้อ --> ชำระเงิน` ล้มด้วยข้อผิดพลาดนี้ ทั้งที่คำเดียวกันใช้ในป้ายกำกับได้ตามปกติ นี่เป็นข้อจำกัดด้านอักษรที่มีเฉพาะภาษาไทยกับภาษาฮินดี ส่วนละติน ซีริลลิก จีน ญี่ปุ่น เกาหลี และอาหรับ ใช้อักษรของตนเป็นตัวระบุได้ทั้งหมด

วิธีแก้

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

ผิด
flowchart TD
    คำสั่งซื้อ --> ชำระเงิน
ถูก
flowchart TD
    order[คำสั่งซื้อ] --> payment[ชำระเงิน]

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

Parse error ที่ลงท้ายด้วย: got 'PS'

ทำไม

มีวงเล็บเปิดอยู่ภายในป้ายกำกับที่อยู่ในวงเล็บเหลี่ยม วงเล็บกลมเป็นไวยากรณ์รูปทรง เพราะ `A(ข้อความ)` หมายถึงโหนดมุมมน ดังนั้นวงเล็บกลมเปล่า ๆ ภายในวงเล็บเหลี่ยมจึงถูกอ่านว่าเป็นจุดเริ่มของรูปทรงใหม่

วิธีแก้

ครอบป้ายกำกับทั้งอันด้วยเครื่องหมายคำพูดคู่ ภายในนั้นทุกอย่างนับเป็นข้อความ

ผิด
flowchart TD
    a[ลองใหม่ (ไม่เกิน 5 ครั้ง)] --> b[เสร็จ]
ถูก
flowchart TD
    a["ลองใหม่ (ไม่เกิน 5 ครั้ง)"] --> b[เสร็จ]

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

Parse error ในบรรทัดที่คุณตั้งชื่อโหนด

ทำไม

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

วิธีแก้

ให้โหนดมีตัวระบุคำเดียว แล้วใส่ข้อความที่อ่านได้ไว้ในป้ายกำกับ

ผิด
flowchart TD
    auth service --> user database
ถูก
flowchart TD
    auth[บริการยืนยันตัวตน] --> db[(ฐานข้อมูลผู้ใช้)]

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

Parse error ที่ลงท้ายด้วย: got 'end'

ทำไม

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

วิธีแก้

เขียนด้วยตัวพิมพ์ใหญ่ หรือให้โหนดมีตัวระบุอื่นแล้วย้ายคำนั้นไปไว้ในป้ายกำกับ ใช้ `done` ก็ไม่มีปัญหาใด ๆ

ผิด
flowchart TD
    begin[เริ่ม] --> end
ถูก
flowchart TD
    begin[เริ่ม] --> done[เสร็จสิ้น]

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

Parse error ในป้ายกำกับเส้นเชื่อมระหว่างขีดตั้ง

ทำไม

มีวงเล็บอยู่ภายในป้ายกำกับของเส้นเชื่อม ข้อความระหว่าง `|…|` อยู่ภายใต้ข้อจำกัดเดียวกับป้ายกำกับของโหนด คือวงเล็บที่นั่นก็เป็นไวยากรณ์ ไม่ใช่ข้อความ

วิธีแก้

ครอบป้ายกำกับของเส้นเชื่อมด้วยเครื่องหมายคำพูดเช่นกัน

ผิด
flowchart TD
    a -->|ใช่ (เสมอ)| b
ถูก
flowchart TD
    a -->|"ใช่ (เสมอ)"| b

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

Lexical error on line 1. Unrecognized text.

ทำไม

ทิศทางไม่ถูกต้อง ผังงานรับเฉพาะ TB, TD, BT, LR และ RL เท่านั้น อย่างอื่นล้มตั้งแต่ชั้นวิเคราะห์คำศัพท์ก่อนที่จะอ่านโหนดสักตัว จึงเป็นเหตุให้ข้อผิดพลาดชี้ไปที่บรรทัดที่ 1 ไม่ใช่ตำแหน่งที่พิมพ์ผิด

วิธีแก้

ใช้หนึ่งในห้าตัวนั้น TD กับ LR ครอบคลุมเกือบทุกกรณี

ผิด
flowchart BONLANGLANG
    A --> B
ถูก
flowchart TD
    A --> B

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

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

อักษรไทยใช้ในป้ายกำกับได้ทุกที่ แต่ใช้เป็นตัวระบุไม่ได้ในสองประเภท

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

ภาษาไทยตัดบรรทัดได้แม้ไม่มีช่องว่าง ซึ่งไม่มีภาษาอื่นในเว็บนี้ทำได้

นี่คือความประหลาดใจที่น่าพอใจ ป้ายกำกับในภาษาอื่นตัดบรรทัดที่ช่องว่างเท่านั้น คำยาวคำเดียวจึงไม่มีวันตัด และทะลุขอบเขตจนไดอะแกรมเสียรูป แต่ภาษาไทยเขียนติดกันโดยไม่เว้นวรรค แล้วก็ยังตัดบรรทัดได้อยู่ดี วัดแล้วว่าป้ายกำกับภาษาไทยยาว 52 อักขระที่ไม่มีช่องว่างเลย ตัดเป็นหลายบรรทัดที่ 276×222 เหตุผลคือป้ายกำกับเป็น HTML อยู่ใน `<foreignObject>` เบราว์เซอร์จึงใช้กฎการตัดคำแบบพจนานุกรมของภาษาไทยให้ ผลคือภาษาไทยแทบไม่เจอปัญหาไดอะแกรมยืดออกด้านข้างเลย ต่างจากภาษาดัตช์หรือเยอรมันอย่างสิ้นเชิง

การไม่เว้นวรรคยังช่วยให้เลี่ยงกับดักช่องว่างในตัวระบุไปได้ด้วย

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

ความสูงเพิ่มราว 105 พิกเซลต่อโหนด ส่วนความกว้างแทบหยุดนิ่ง

ในไดอะแกรมจากบนลงล่าง สามโหนดให้ viewBox ราว 126×278 พอเป็นสี่สิบโหนดกลายเป็น 135×4126 คือความกว้างเพิ่มขึ้น 9 พิกเซล ส่วนความสูงเพิ่มเป็นสิบห้าเท่า ไดอะแกรมที่ยาวจึงเป็นแถบแคบที่ไม่พอดีกับจอใด ปุ่มจัดกึ่งกลางในหน้าตัวอย่างมีไว้เพื่อการนี้ และเมื่อยาวเกินควร การเปลี่ยนไปใช้ `flowchart LR` มักลดอัตราส่วนด้านลงเกือบครึ่ง

การส่งออก PNG เคยพังเพราะป้ายกำกับเป็น HTML

ป้ายกำกับของผังงานถูกวาดเป็น HTML จริง ๆ ภายใน `<foreignObject>` ในไฟล์ SVG นี่คือเหตุผลที่ `<br>` และ Markdown บางส่วนใช้ได้ในป้ายกำกับ และด้วยเหตุผลเดียวกันเบราว์เซอร์จึงปฏิเสธที่จะวาด SVG นี้ลงบนแคนวาส การส่งออก PNG ของเว็บนี้จึงคืนไฟล์ SVG อย่างเงียบ ๆ อยู่นาน ตอนนี้ก่อนส่งออกไดอะแกรมจะถูกวาดใหม่ด้วยป้ายกำกับข้อความ SVG ล้วน แล้ว PNG ก็ออกมาถูกต้อง ราคาที่จ่ายคือการจัดวางตัวอักษรใน PNG ต่างจากบนจอเพียงเล็กน้อยมาก

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

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

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

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

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

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

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