คู่มือฉบับสมบูรณ์สำหรับไดอะแกรม Mermaid.js

Mermaid.js คืออะไร?

ทำไมต้องใช้ Mermaid.js?

• การควบคุมเวอร์ชัน: ไดอะแกรมเป็นไฟล์ข้อความ จึงสามารถติดตามใน Git ควบคู่กับโค้ดได้
• อัปเดตได้รวดเร็ว: เปลี่ยนเพียงไม่กี่บรรทัดแทนการวาดใหม่ทั้งหมด
• ความสม่ำเสมอ: Mermaid จัดการเลย์เอาต์และสไตล์อัตโนมัติ เพื่อให้ไดอะแกรมมีความสม่ำเสมอ
• ไม่ต้องใช้เครื่องมือออกแบบ: ไม่จำเป็นต้องใช้ Visio, Lucidchart หรือเครื่องมือราคาแพงอื่นๆ
• เอกสารเป็นโค้ด: เก็บไดอะแกรมไว้ในรีโปเดียวกับเอกสารของคุณ
• ข้ามแพลตฟอร์ม: ทำงานได้ทั้งในเบราว์เซอร์และ Node.js และเชื่อมต่อได้กับหลายแพลตฟอร์ม
• ฟรีและโอเพนซอร์ส: ไม่มีค่าไลเซนส์ ชุมชนแอคทีฟ
• รองรับไดอะแกรมหลายประเภท: รองรับผังงาน ไดอะแกรมลำดับ ไดอะแกรมคลาส และอื่นๆ

ประเภทไดอะแกรมที่รองรับ

Mermaid รองรับไดอะแกรมหลากหลายประเภทเพื่อตอบโจทย์งานเอกสารที่แตกต่างกัน:

flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Process]
    B -->|No| D[Alternative]
    C --> E[End]
    D --> E

sequenceDiagram
    participant User
    participant API
    participant DB
    User->>API: Request data
    API->>DB: Query
    DB-->>API: Results
    API-->>User: Response

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +bark()
    }
    Animal <|-- Dog

stateDiagram-v2
    [*] --> Idle
    Idle --> Loading: Start
    Loading --> Success: Complete
    Loading --> Error: Fail
    Success --> [*]
    Error --> Idle: Retry

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    CUSTOMER {
        int id
        string name
        string email
    }

gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Phase 1
    Design :a1, 2024-01-01, 30d
    Development :a2, after a1, 45d

pie title Distribution
    "Category A" : 42
    "Category B" : 30
    "Category C" : 28

gitGraph
    commit
    branch develop
    checkout develop
    commit
    checkout main
    merge develop

เริ่มต้นใช้งาน Mermaid

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

• ให้ไดอะแกรมโฟกัสที่แนวคิดหรือเวิร์กโฟลว์เดียว
• ใช้ป้ายกำกับที่มีความหมายและอธิบายตรรกะธุรกิจจริง
• แยกไดอะแกรมที่ซับซ้อนเป็นไดอะแกรมย่อยที่เชื่อมโยงกัน
• เพิ่มความคิดเห็นด้วย %% เพื่ออธิบายส่วนที่ซับซ้อน
• ใช้รูปแบบการตั้งชื่อที่สอดคล้องกันทั่วทั้งไดอะแกรม
• ทดสอบไดอะแกรมในสภาพแวดล้อมเป้าหมายก่อนสรุป
• ใส่คำใบ้ทิศทาง (TD, LR) เพื่อควบคุมเลย์เอาต์เมื่อจำเป็น
• ใช้ subgraph เพื่อจัดกลุ่มโหนดที่เกี่ยวข้องในผังงาน
• ใช้ตัวเลือกสไตล์อย่างพอเหมาะเพื่อรักษาความอ่านง่าย
• จัดการเวอร์ชันไฟล์ซอร์สของไดอะแกรมร่วมกับโค้ดของคุณ

กรณีใช้งานที่พบบ่อย

แหล่งข้อมูลเพิ่มเติม

• เอกสารอย่างเป็นทางการของ Mermaid
• ที่เก็บ Mermaid บน GitHub
• อ้างอิงไวยากรณ์ Mermaid