ความท้าทายในการแสดงผลโค้ด Mermaid ที่สร้างโดย AI: เครื่องมือ beautiful-mermaid ช่วยให้ไดอะแกรม “มีชีวิต” ในเทอร์มินัลได้อย่างไร

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

ไม่ว่าจะเป็น ChatGPT, Claude หรือ Copilot หรือ Agent ประเภทต่างๆ แค่พูดประโยคเดียว ก็สามารถสร้างโค้ด Mermaid สำหรับผังงาน ไดอะแกรมลำดับเวลา หรือไดอะแกรมสถาปัตยกรรมระบบได้ — มีประสิทธิภาพสูงมาก

แต่ไม่นานก็จะเจอปัญหาจริง:

AI “เขียน” ไดอะแกรมออกมาแล้ว แต่คุณก็ยากที่จะ “แสดงผลให้สวยงาม” ได้

ปัญหาไม่ได้อยู่ที่การสร้าง แต่อยู่ที่การเรนเดอร์

• เอฟเฟกต์การเรนเดอร์เริ่มต้นของ Mermaid ค่อนข้างเรียบง่าย
• พึ่งพาเบราว์เซอร์หรือเครื่องมือแสดงตัวอย่าง Markdown อย่างมาก
• ในสภาพแวดล้อมเทอร์มินัล, CLI หรือ SSH เกือบจะไม่สามารถดูโดยตรงได้

สิ่งนี้เด่นชัดเป็นพิเศษในเวิร์กโฟลว์ของ “AI + อัตโนมัติ + เครื่องมือเทอร์มินัล”

beautiful-mermaid: เครื่องมือที่ออกแบบมาเพื่อปรับปรุงการเรนเดอร์ Mermaid โดยเฉพาะ

เมื่อเร็วๆ นี้พบโปรเจกต์ที่เพิ่งโอเพนซอร์สบน GitHub ชื่อ beautiful-mermaid ซึ่งมีจุดมุ่งหมายที่ชัดเจนมาก:

ไม่เปลี่ยนไวยากรณ์และความสามารถของ Mermaid เพียงมุ่งเน้นที่การทำขั้นตอนการเรนเดอร์ใหม่

มันแก้ไขปัญหาหลักสองประการ: ปรับปรุงเอฟเฟกต์ภาพ และรองรับการใช้ในสภาพแวดล้อมเทอร์มินัล

ความสามารถหลัก

• ✅ เรนเดอร์ แผนภูมิ SVG ที่มีสุนทรียภาพ
• ✅ เอาต์พุต ภาพวาดด้วยอักขระ ASCII ที่เป็นมิตรกับเทอร์มินัล
• ✅ ใช้ TypeScript ล้วน ในการพัฒนา
  • ไม่พึ่งพา DOM
  • ไม่พึ่งพาเบราว์เซอร์
• ✅ รองรับแผนภูมิประเภททั่วไป 5 ประเภทโดยธรรมชาติ:
  • ผังงาน
  • ไดอะแกรมสถานะ
  • ไดอะแกรมลำดับเวลา
  • ไดอะแกรมคลาส
  • ไดอะแกรม ER

เหมาะมากสำหรับใช้ร่วมกับสถานการณ์ที่ AI สร้างโค้ด Mermaid

การออกแบบระบบธีม “เป็นมิตรกับวิศวกร”

ในด้านสไตล์ beautiful-mermaid ก็ได้รับการออกแบบอย่างประณีต:

• มี ธีม 15 ชุด ในตัว
• สามารถกำหนดสีเน้น สีเส้นขอบ เส้นเชื่อมต่อ และรายละเอียดอื่นๆ ได้เอง
• รองรับ การใช้สีของธีม VS Code โดยตรง
• สีทั้งหมดควบคุมผ่าน ตัวแปร CSS
  • เปลี่ยนธีมโดยไม่ต้องเรนเดอร์ใหม่
  • แก้ไขตัวแปรแล้วจะมีผลทันที

ระบบนี้เป็นมิตรกับระบบเอกสาร เครื่องมือเทอร์มินัล และปลั๊กอิน IDE มาก

พูดถึงด้วย: เวอร์ชันที่ห่อหุ้มโดย skills

นอกจากนี้ยังมีเวอร์ชันที่ห่อหุ้มชื่อ skills:

• รองรับการติดตั้งด้วยคำสั่งเดียวผ่าน npx skills
• รวมความสามารถหลักทั้งหมดของ beautiful-mermaid ไว้โดยพื้นฐาน
• เน้นประสบการณ์ CLI ที่ “พร้อมใช้ทันที” มากขึ้น

จากการใช้งานจริงพบว่าประสบการณ์ดี โดยเฉพาะเมื่อใช้ร่วมกับการสร้างโค้ด Mermaid โดย AI

ที่อยู่โปรเจกต์

• beautiful-mermaid
  http://github.com/lukilabs/beautiful-mermaid
• skills
  https://github.com/imxv/Pretty-mermaid-skills

ติดตาม “Whale Habitat” Mini Program เพื่อรับข่าวสาร AI ล่าสุด

⚠️ หมายเหตุ: เนื้อหาได้รับการแปลโดย AI และตรวจสอบโดยมนุษย์ หากมีข้อผิดพลาดโปรดแจ้ง