แผนผัง (Mermaid)

Markdown สามารถใช้ไวยากรณ์ Mermaid เพื่อสร้างผัง/ไดอะแกรมหลายชนิด เพิ่มความเข้าใจผ่านภาพได้อย่างมีประสิทธิภาพ

Mermaid คืออะไร

Mermaid เป็นเครื่องมือสร้างไดอะแกรมจากข้อความ รองรับประเภทหลัก ๆ เช่น Flowchart, Sequence Diagram, Gantt, Class Diagram, State Diagram, Pie, User Journey, Git Graph เป็นต้น

ไวยากรณ์พื้นฐาน

Flowchart

```mermaid
flowchart TD
    A[เริ่ม] --> B{ล็อกอินแล้วหรือไม่?}
    B -->|ใช่| C[หน้าแรก]
    B -->|ไม่| D[หน้าเข้าสู่ระบบ]
    C --> E[จบ]
    D --> F[ผู้ใช้ล็อกอิน]
    F --> G{สำเร็จหรือไม่?}
    G -->|ใช่| C
    G -->|ไม่| H[แสดงข้อผิดพลาด]
    H --> D

### Sequence Diagram

```markdown
```mermaid
sequenceDiagram
    participant ผู้ใช้
    participant หน้าเว็บ
    participant เซิร์ฟเวอร์
    participant ฐานข้อมูล
    
    ผู้ใช้->>หน้าเว็บ: คำขอล็อกอิน
    หน้าเว็บ->>เซิร์ฟเวอร์: ตรวจสอบข้อมูลผู้ใช้
    เซิร์ฟเวอร์->>ฐานข้อมูล: คิวรีผู้ใช้
    ฐานข้อมูล-->>เซิร์ฟเวอร์: ส่งข้อมูลผู้ใช้
    เซิร์ฟเวอร์-->>หน้าเว็บ: ส่งผลตรวจสอบ
    หน้าเว็บ-->>ผู้ใช้: ตอบกลับการล็อกอิน

## ตัวอย่างที่มีประโยชน์

### ประเภทโหนด (Flowchart)

```markdown
```mermaid
flowchart LR
    A[สี่เหลี่ยม] --> B(มุมโค้ง)
    B --> C((วงกลม))
    C --> D{ขนมเปียกปูน}
    D --> E[[ซับโปรแกรม]]
    E --> F[(ฐานข้อมูล)]

### ประเภทเส้นเชื่อม (Flowchart)

```markdown
```mermaid
flowchart TD
    A --> B
    C --- D
    E -.-> F
    G ==> H
    I --o J
    K --x L

### ทิศทางของกราฟ

```markdown
```mermaid
flowchart TD
  A --> B  %% บนลงล่าง

flowchart LR
  A --> B  %% ซ้ายไปขวา

### ตัวอย่าง Sequence Diagram พร้อมเงื่อนไข

```markdown
```mermaid
sequenceDiagram
    participant U as ผู้ใช้
    participant S as ระบบ
    U->>S: คำขอล็อกอิน
    alt มีชื่อผู้ใช้
        S->>S: ตรวจรหัสผ่าน
        alt รหัสถูกต้อง
            S-->>U: สำเร็จ
        else รหัสผิด
            S-->>U: ผิดรหัสผ่าน
        end
    else ไม่มีชื่อผู้ใช้
        S-->>U: ไม่พบผู้ใช้
    end

### Class Diagram

```markdown
```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +eat()
        +sleep()
    }
    class Dog { +String breed +bark() +wagTail() }
    class Cat { +String color +meow() +purr() }
    Animal <|-- Dog
    Animal <|-- Cat
    class Owner { +String name +feedPet() }
    Owner --> Animal : owns

### State Diagram

```markdown
```mermaid
stateDiagram-v2
    [*] --> ว่าง
    ว่าง --> ทำงาน : เริ่ม
    ทำงาน --> พัก : หยุดชั่วคราว
    ทำงาน --> เสร็จ : จบงาน
    พัก --> ทำงาน : ทำต่อ
    พัก --> หยุด : หยุด
    หยุด --> ว่าง : รีเซ็ต
    เสร็จ --> ว่าง : รีเซ็ต

### Gantt Chart

```markdown
```mermaid
gantt
  title ไทม์ไลน์การพัฒนา
  dateFormat  YYYY-MM-DD
  section วิเคราะห์
  เก็บความต้องการ :done, a1, 2024-01-01,2024-01-05
  วิเคราะห์        :done, a2, after a1, 5d
  รีวิวความต้องการ:done, a3, after a2, 2d

### Git Graph

```markdown
```mermaid
gitgraph
  commit id: "init"
  branch feature/auth
  commit id: "login"
  checkout main
  commit id: "fix home"
  merge feature/auth

## แพลตฟอร์มที่รองรับ

- GitHub: รองรับ Mermaid โดยตรง
- VitePress: เปิดใช้ผ่านการตั้งค่า `markdown.mermaid: true`
- แพลตฟอร์มเอกสารอื่น ๆ: ตรวจสอบปลั๊กอิน/ธีม

## แนวปฏิบัติที่ดี

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

## ไวยากรณ์ที่เกี่ยวข้องและแหล่งข้อมูล

- [การฝัง HTML](/th/advanced/html)
- [สูตรคณิตศาสตร์](/th/advanced/math)
- [แนวปฏิบัติที่ดีที่สุด](/th/advanced/best-practices)