วิธีเปิดไฟล์ .mmd

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

วางไฟล์ .mmd ของคุณที่นี่

รับ .mermaid, .md และ .txt ด้วย ไฟล์ถูกอ่านในเบราว์เซอร์และไม่เคยถูกส่งออกไป

ไฟล์ .mmd คืออะไร

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

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

deploy.mmd — ทั้งไฟล์ หกบรรทัด

flowchart LR
    commit[พุชขึ้น main] --> build[รันการทดสอบ]
    build -->|สำเร็จ| deploy[นำขึ้นระบบจริง]
    build -->|ล้มเหลว| alert[แจ้งผู้เขียน]
    deploy --> smoke[ทดสอบอย่างเร็ว]
    smoke --> done[ปล่อยรุ่นเสร็จสิ้น]

เปิดไฟล์ .mmd ด้วยอะไร

กล่าวโดยย่อ แทบไม่มีอะไรเปิดไฟล์ .mmd ด้วยการดับเบิลคลิกได้ เพราะนามสกุลนี้ไม่ได้ผูกกับโปรแกรมใดเลย สิ่งที่คุณต้องการจริง ๆ คือบางอย่างที่วาด Mermaid ได้ ด้านล่างคือสิ่งที่ผมทดสอบแล้ว และจุดที่มันใช้ไม่ได้

เว็บนี้เปิดได้

วาดไฟล์ให้ทันที

วางไฟล์ลงบนกรอบด้านบนแล้วคุณจะได้ไดอะแกรมทันที ไม่มีขั้นตอนอัปโหลด ไฟล์ถูกอ่านในเบราว์เซอร์ผ่าน File API แล้ววาดในเครื่อง จึงใช้ได้กับไดอะแกรมที่คุณไม่ได้รับอนุญาตให้ส่งออกไปข้างนอกด้วย

ถ้าคุณอยากแก้ไดอะแกรม ไม่ใช่แค่ดู ให้ใช้ลิงก์ใต้ภาพตัวอย่างเพื่อเปิดมันในตัวแก้ไข

โปรแกรมแก้ไขข้อความใดก็ได้เปิดได้

แสดงต้นฉบับ ไม่ใช่ไดอะแกรม

Notepad, Notepad++, vim อะไรก็ได้ ไฟล์ .mmd เป็นข้อความ UTF-8 คุณจึงเห็นต้นฉบับทันที คุณจะไม่เห็นไดอะแกรม และไม่มีอะไรเสียหาย เพราะในไฟล์ไม่มีภาพให้แสดงอยู่แล้ว

นี่เป็นวิธีเร็วที่สุดในการตรวจว่าไฟล์ที่มีคนส่งมาเป็น Mermaid จริงหรือไม่ เปิดขึ้นมาแล้วดูว่าบรรทัดแรกที่ไม่ว่างเป็นคำสำคัญของไดอะแกรมหรือเปล่า เช่น flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram หรือ gantt

GitHubเปิดไม่ได้

วาดบล็อก ```mermaid ใน Markdown แต่ไม่วาดไฟล์ .mmd

GitHub วาด Mermaid ภายในบล็อกโค้ดที่มีรั้วกำกับ เอกสารระบุไว้ชัดเจนว่าที่ไหนบ้าง ได้แก่ issue, Discussions, pull request, wiki และไฟล์ Markdown ไฟล์ .mmd ที่อยู่เดี่ยว ๆ ไม่อยู่ในรายการนั้น และการเปิดมันในหน้าเรียกดูไฟล์ของที่เก็บจะเห็นเป็นข้อความต้นฉบับ

ดังนั้นถ้าคุณอยากให้ไดอะแกรมปรากฏบน GitHub มันต้องอยู่ในบล็อก ```mermaid ภายในไฟล์ .md ไม่ใช่อยู่ในไฟล์ .mmd ของตัวเอง การเก็บ .mmd ไว้เป็นต้นฉบับแล้วทำซ้ำเนื้อหาเดียวกันใน README เป็นการทำซ้ำที่พบบ่อยและสมเหตุสมผล

GitLabเปิดไม่ได้

วาดบล็อก ```mermaid แต่ไม่วาดไฟล์ .mmd และยังใช้ Mermaid รุ่นเก่ากว่า

รูปแบบเดียวกับ GitHub คือ Mermaid ถูกวาดในบล็อกที่มีรั้วภายใน Markdown, issue, merge request และ wiki แต่ไม่มีที่ใดระบุว่าไฟล์ .mmd ที่อยู่เดี่ยว ๆ จะถูกวาด

ยังมีอีกเรื่องที่ควรรู้ เพราะมันสร้างความสับสนจริง ๆ GitLab.com ระบุว่ารองรับ Mermaid รุ่นที่ 10 ส่วนเว็บนี้ทำงานบนรุ่น 11.12.2 ไวยากรณ์ที่เพิ่มเข้ามาหลังรุ่น 10 จึงแสดงผลได้ที่นี่และล้มที่นั่น ซึ่งมักเป็นคำอธิบายของอาการ «ในเบราว์เซอร์ใช้ได้แต่บน GitLab ของเราใช้ไม่ได้» สำหรับ GitLab ที่ติดตั้งเองยังมีกับดักที่สาม เมื่อส่วนหัว Cross-Origin-Resource-Policy ถูกตั้งเป็น same-site หรือ same-origin ไดอะแกรม Mermaid จะล้มอย่างเงียบ ๆ ไม่มีข้อผิดพลาดและไม่มีไดอะแกรม

.mmd, .mermaid และ .md

.mmd กับ .mermaid คือสิ่งเดียวกัน ทั้งคู่บรรจุเฉพาะต้นฉบับ Mermaid และเครื่องมือทุกตัวที่ผมรู้จักซึ่งรับอย่างหนึ่งก็รับอีกอย่างด้วย .mmd สั้นกว่าและพบบ่อยกว่า เครื่องมือบรรทัดคำสั่งอย่างเป็นทางการก็ใช้มันเป็นค่าตั้งต้น เลือกอย่างหนึ่งแล้วใช้ให้ตรงกันทั้งโครงการ การเลือกนี้ไม่มีผลทางเทคนิคใด ๆ

.md ต่างชนิดกันโดยสิ้นเชิง ไฟล์ Markdown คือเอกสารที่อาจมีไดอะแกรม Mermaid อยู่ข้างใน ห่อด้วยบล็อกที่ขึ้นต้นด้วยเครื่องหมายกราฟสามตัวและคำว่า mermaid ไดอะแกรมจึงเป็นชิ้นส่วนหนึ่งภายในข้อความที่ใหญ่กว่า

ความต่างข้อนี้คือสาเหตุที่พบบ่อยที่สุดของการที่ไฟล์ไม่แสดงผล และมันทำงานทั้งสองทิศทาง วางเนื้อหาไฟล์ .md ลงในโปรแกรมดู Mermaid แล้วมันจะล้ม เพราะบรรทัดรั้วไม่ใช่ไวยากรณ์ของ Mermaid ในทางกลับกัน บันทึกไดอะแกรม Mermaid เปล่า ๆ ลงในไฟล์ .md โดยไม่มีรั้ว แล้ว GitHub จะแสดงมันเป็นย่อหน้าข้อความ กฎง่าย ๆ คือไฟล์ .mmd ต้องขึ้นต้นด้วยคำสำคัญของไดอะแกรม ส่วนไฟล์ .md ต้องมีไดอะแกรมอยู่ในบล็อกที่มีรั้ว

โปรแกรมดูนี้รับ .mmd, .mermaid, .md และ .txt แต่ถือว่าทุกอย่างที่อ่านเข้ามาเป็น Mermaid ดิบ ถ้าคุณวางไฟล์ Markdown ที่มีข้อความอื่นล้อมรอบไดอะแกรมอยู่ ให้ลบทุกอย่างที่ไม่ใช่ไดอะแกรมออกก่อน

ไม่แสดงผล — จริง ๆ แล้วอะไรผิด

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

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

No diagram type detected matching given configuration for text: ```mermaid

ทำไม

คุณคัดลอกไดอะแกรมมาจากไฟล์ Markdown หรือจากแชทแล้วติดรั้วมาด้วย เครื่องหมายกราฟสามตัวเป็น Markdown ไม่ใช่ Mermaid ตัวแจงจึงไปไม่ถึงไดอะแกรมเลย

วิธีแก้

ลบบรรทัดเปิด ```mermaid และบรรทัดปิด ``` ออก ไฟล์ต้องขึ้นต้นด้วยคำสำคัญของไดอะแกรม

ผิด

```mermaid
flowchart TD
    A[เริ่ม] --> B[จบ]
```

ถูก

flowchart TD
    A[เริ่ม] --> B[จบ]

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

Lexical error on line N. Unrecognized text.

ทำไม

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

วิธีแก้

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

ผิด

flowchart TD
    คำสั่งซื้อ --> ชำระเงิน

ถูก

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

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

ตั้งชื่อคลาสเป็นภาษาไทยแล้วได้ Lexical error

ทำไม

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

วิธีแก้

ใช้ชื่อในวงเล็บเหลี่ยม คือ `class Order["คำสั่งซื้อ"]` ตัวระบุภายในยังเป็น `Order` ส่วนบนจอแสดงว่า `คำสั่งซื้อ` ในไดอะแกรมสถานะสิ่งที่เทียบเท่ากันคือ `state "ป้ายกำกับ" as ตัวระบุ`

ผิด

classDiagram
    class คำสั่งซื้อ {
        +String เลขที่
    }

ถูก

classDiagram
    class Order["คำสั่งซื้อ"] {
        +String เลขที่
    }

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

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

ทำไม

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

วิธีแก้

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

ผิด

gantt
    dateFormat DD/MM/YYYY
    section ส
    ออกแบบ :a1, 01/03/2569, 10d

ถูก

gantt
    title แผนงานปี 2569
    dateFormat DD/MM/YYYY
    section ส
    ออกแบบ :a1, 01/03/2026, 10d

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

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

ข้อผิดพลาดลงท้ายด้วย: got 'PS'

ทำไม

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

วิธีแก้

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

ผิด

flowchart TD
    a[เรียกเก็บเงิน(คำสั่งซื้อ)] --> b[เสร็จ]

ถูก

flowchart TD
    a["เรียกเก็บเงิน(คำสั่งซื้อ)"] --> b[เสร็จ]

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

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

ข้อผิดพลาดลงท้ายด้วย: got 'end'

ทำไม

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

วิธีแก้

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

ผิด

flowchart TD
    a[เริ่ม] --> end

ถูก

flowchart TD
    a[เริ่ม] --> done[เสร็จสิ้น]

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

แสดงผลได้ แต่ในไดอะแกรม ER มีเอนทิตีที่คุณไม่ได้เขียน

ทำไม

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

วิธีแก้

ใส่เครื่องหมายคำพูดให้ทุกป้ายกำกับความสัมพันธ์ที่มีช่องว่าง

ผิด

erDiagram
    ลูกค้า ||--o{ คำสั่งซื้อ : สั่งซื้อ สินค้า

ถูก

erDiagram
    ลูกค้า ||--o{ คำสั่งซื้อ : "สั่งซื้อ สินค้า"

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

No diagram type detected matching given configuration for text: sequencediagram

ทำไม

คำสำคัญของไดอะแกรมสะกดผิดหรือใช้ตัวพิมพ์ใหญ่เล็กผิด คำสำคัญของ Mermaid แยกตัวพิมพ์ใหญ่เล็ก sequenceDiagram ใช้ได้ ส่วน sequencediagram ใช้ไม่ได้ เช่นเดียวกับ stateDiagram-v2 และ erDiagram

วิธีแก้

แก้ตัวพิมพ์ใหญ่เล็กให้ถูก และสังเกตว่า graph ยังถูกรับเป็นชื่อเก่าของ flowchart อยู่ ไวยากรณ์เก่านั้นจึงไม่ใช่ปัญหาของคุณ

ผิด

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

ถูก

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

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

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

ทำไม

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

วิธีแก้

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

ผิด

flowchart TD
    a -->|ใช่ (เสมอ)| b

ถูก

flowchart TD
    a -->|"ใช่ (เสมอ)"| b

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

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

ทำไม

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

วิธีแก้

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

ผิด

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

ถูก

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

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

Lexical error on line 1. Unrecognized text.

ทำไม

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

วิธีแก้

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

ผิด

flowchart XY
    A --> B

ถูก

flowchart TD
    A --> B

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

ที่นี่แสดงผลได้ แต่บน GitLab, Confluence หรือเครื่องมือเก่ากลับไม่ได้

ทำไม

ความต่างของรุ่น โปรแกรมดูนี้ทำงานบน Mermaid 11.12.2 ส่วน GitLab.com ระบุรุ่นที่ 10 และ wiki ที่ติดตั้งเองอาจล้าหลังหลายปี ไวยากรณ์ที่เพิ่มเข้ามาหลังรุ่นของอีกเครื่องมือหนึ่งจะแจงได้ที่นี่และล้มที่นั่น

วิธีแก้

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

ถูก

info

เรื่องการเข้ารหัสอักขระควรพูดถึงสักหน่อย เพราะในไฟล์ภาษาไทยยังสร้างความประหลาดใจได้อยู่ เว็บนี้และตัวแก้ไขอ่านไฟล์เป็น UTF-8 และตัดเครื่องหมาย BOM ออกให้ถ้ามี ไฟล์ที่บันทึกจาก Notepad ของ Windows แบบ «UTF-8 with BOM» จึงเปิดได้ไม่มีปัญหา แต่ไฟล์ที่บันทึกเป็น TIS-620 หรือ Windows-874 ซึ่งเครื่องมือรุ่นเก่าบางตัวยังผลิตอยู่ จะมาถึงพร้อมอักษรไทยที่เสียหาย ถ้าคุณเห็นสัญลักษณ์แปลก ๆ แทนที่จะเป็นตัวอักษรไทย ให้บันทึกไฟล์ใหม่เป็น UTF-8 จากโปรแกรมแก้ไขของคุณ

และมีอีกเรื่องที่ไม่ให้ข้อผิดพลาดใด ๆ เลย บน GitLab ที่ติดตั้งเอง ส่วนหัว Cross-Origin-Resource-Policy ที่ตั้งเป็น same-site หรือ same-origin จะทำให้ไดอะแกรม Mermaid ล้มอย่างเงียบ ๆ ไม่มีข้อความ ไม่มีไดอะแกรม ไม่มีอะไรบนหน้าเลย ถ้าไดอะแกรมหนึ่งแสดงผลได้ทุกที่ยกเว้นการติดตั้งแห่งเดียว ที่นั่นแหละคือจุดที่ต้องไปดู

แปลงเป็น PNG, SVG หรือ PDF

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

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

สำหรับทุกงานที่ต้องทำซ้ำ เช่น ขั้นตอนการบิลด์ ไฟล์เป็นชุด หรือ pre-commit hook มีเอนจินบรรทัดคำสั่งอย่างเป็นทางการชื่อ @mermaid-js/mermaid-cli มันรับไฟล์ .mmd เดียวกันนี้แล้วเขียนภาพออกมาโดยตรง โดยไม่ต้องใช้เบราว์เซอร์

คำถามที่พบบ่อย

เปิดไฟล์ .mmd ออนไลน์อย่างไร

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

โปรแกรมไหนเปิดไฟล์ .mmd ได้

ต้นฉบับนั้นโปรแกรมแก้ไขข้อความใดก็แสดงได้ เพราะไฟล์เป็นข้อความธรรมดา แต่ถ้าอยากเห็นไดอะแกรม คุณต้องมีบางอย่างที่วาด Mermaid ได้ เช่น เว็บนี้ ตัวแก้ไขที่นี่ หรือเครื่องมือบรรทัดคำสั่ง mermaid-cli ไม่มีโปรแกรมเดสก์ท็อปตัวใดที่เป็นเจ้าของนามสกุล .mmd

ไฟล์ .mmd กับ .mermaid เหมือนกันไหม

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

ทำไมไฟล์ .mmd ของผมไม่แสดงผลบน GitHub

เพราะ GitHub วาด Mermaid เฉพาะภายในบล็อก ```mermaid ที่มีรั้ว ในไฟล์ Markdown, issue, Discussions, pull request และ wiki เท่านั้น ไฟล์ .mmd ที่อยู่เดี่ยว ๆ จะแสดงเป็นข้อความต้นฉบับ ให้นำไดอะแกรมเดียวกันไปใส่ในบล็อกที่มีรั้วภายในไฟล์ .md เพื่อให้เห็นบน GitHub

เปิด .mmd โดยไม่ติดตั้งอะไรเลยได้ไหม

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

ทำไมตั้งชื่อเป็นภาษาไทยแล้วได้ Lexical error

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

แผนภูมิแกนต์ของผมไปโผล่ปี 2569 ต้องทำอย่างไร

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

อักษรไทยแสดงเป็นสัญลักษณ์แปลก ๆ

ไฟล์ไม่ได้เป็น UTF-8 เว็บนี้อ่านไฟล์เป็น UTF-8 และรับมือกับเครื่องหมาย BOM ได้ แต่ไฟล์ที่บันทึกเป็น TIS-620 หรือ Windows-874 จะมาถึงพร้อมอักษรไทยที่เสียหาย ให้บันทึกใหม่เป็น UTF-8 จากโปรแกรมแก้ไขของคุณ

ประเภทของไดอะแกรมที่คุณเปิดที่นี่ได้

เขียนโดย Dominik Malsch · อัปเดตล่าสุด: 27 กรกฎาคม 2569

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