Mermaid Diagrams

Mermaid คืออะไร?

Mermaid เป็นภาษา diagramming แบบ text-based แทนที่จะลาก shapes รอบในเครื่องมือภาพ คุณเขียนคำอธิบายสั้นๆ ของ diagram และ Mermaid เรนเดอร์มันเป็นกราฟิกภาพ มันออกแบบมาเพื่ออยู่คู่กับโค้ด — ภายในไฟล์ Markdown, wikis หรือเอกสาร — ดังนั้น diagrams ของคุณยังคง version-controlled และอัปเดตง่าย

Mermaid รองรับ diagram types หลายแบบ:

• Flowcharts — decision trees และ process flows
• Sequence diagrams — ระบบหรือบริการเรียกกันอย่างไรตามเวลา
• Entity-relationship (ER) diagrams — database schemas
• Architecture diagrams — components และความสัมพันธ์
• Gantt charts — timelines และตารางเวลาโปรเจกต์

การเรนเดอร์ Diagram แบบ Live

เปิดไฟล์ .md ใดๆ ใน IDE Strip ที่มีบล็อกโค้ด Mermaid บล็อก Mermaid มีลักษณะดังนี้:

```mermaid graph TD A[User] --> B[API Gateway] B --> C[Auth Service] B --> D[User Service] D --> E[(Database)] ```

เมื่อ IDE Strip ตรวจจับบล็อก Mermaid มันจะเรนเดอร์ panel diagram ภาพคู่กับ source คุณเห็นทั้งคู่พร้อมกัน: คำอธิบาย text ด้านซ้ายและ diagram ที่เรนเดอร์ด้านขวา แก้ไข text และ diagram อัปเดตทันที — ไม่ต้องขั้นตอน save-and-reload

การแก้ไขแบบ Interactive

นี่คือจุดที่การรองรับ Mermaid ของ 1DevTool เกินกว่า renderer มาตรฐาน คุณสามารถลาก nodes ใน diagram ภาพ และ source code อัปเดตอัตโนมัติเพื่อสะท้อน layout ใหม่ นี่ทำงานทั้งสองทิศทาง:

• แก้ไข text → diagram อัปเดต — เปลี่ยน label หรือเพิ่ม connection ใหม่ใน source และดู diagram วาดใหม่
• ลาก node → source อัปเดต — ย้าย node ใน diagram ภาพ และข้อมูลตำแหน่งที่เกี่ยวข้องใน source code ปรับให้ตรงกัน

คุณยังสามารถปรับขนาด nodes และ reconnect edges โดยการลากจาก edge ของ node หนึ่งไปยังอีก node Source ยังคง sync ตลอด

นี่ทำให้ Mermaid diagrams รู้สึกน้อยลงเหมือนประสบการณ์ "เขียนแล้วหวังว่าจะได้" คุณสามารถได้โครงสร้างคร่าวๆ ใน text แล้วปรับแต่ง layout แบบภาพ

ใช้กับ AI Agents

หนึ่งใน combination ที่มีพลังที่สุดใน 1DevTool คือการขอให้ AI agent สร้าง Mermaid diagram แล้วจัดเรียงผลลัพธ์แบบภาพ ตัวอย่าง เปิด Claude Code terminal และถาม:

"Generate a Mermaid diagram showing how the main components in this codebase interact with each other."

Agent อ่าน codebase ของคุณและเขียนไฟล์ .md ที่มี Mermaid diagram เปิดไฟล์นั้นใน IDE Strip และ diagram เรนเดอร์แบบภาพ หาก layout อ่านยาก ลาก nodes ไปเป็นการจัดที่ชัดเจนกว่า Source อัปเดตอัตโนมัติ ดังนั้นคุณสามารถ commit diagram ที่ปรับปรุงแล้ว

นี่ยังทำงานได้ดีสำหรับ database schemas, API call sequences และ deployment architecture diagrams

เคล็ดลับ: ถาม Claude Code: "Draw a Mermaid diagram showing how the components in this repo interact." แล้วเปิดไฟล์ .md ที่สร้างเพื่อดูและจัดเรียง diagram ใหม่แบบภาพ