diagram-design: Agent Skill วาดไดอะแกรม 44 แบบเป็น HTML+SVG ไฟล์เดียวตามสีแบรนด์ — ดาวทะลุ 50,000 ขึ้น GitHub Trending

ถ้าเคยขอให้ Claude หรือ Codex วาดไดอะแกรมสถาปัตยกรรม ส่วนใหญ่จะได้กล่องมุมมนพร้อมเงา สีฟ้าเทาแบบเดียวกันทุกครั้ง diagram-design แก้ปัญหานี้โดยเขียน “รสนิยม” ลงไปใน Agent Skill: ใช้สีเน้นแค่ 1–2 จุดที่ผู้อ่านควรมองก่อน ใช้เส้นบาง 1px ไม่มีเงา และวางทุกพิกัดบนกริด 4px ผลลัพธ์เป็น ไฟล์ .html ไฟล์เดียวที่ฝัง SVG ดับเบิลคลิกเปิดได้เลย ไม่ต้อง build ไม่มี JavaScript

รีโปนี้ไม่ใช่ของใหม่ เปิดมาตั้งแต่เมษายน 2026 แต่เราไม่เคยเขียนถึง ตอนนี้มีดาวกว่า 50,000 ดวง ติด GitHub Trending รายวัน และยังออกเวอร์ชันถี่มาก (manifest ล่าสุด 2.6.74 เมื่อ 10 ต.ค.) จึงเขียนถึงในฐานะข่าวตามหลัง ใช้ได้กับทุก host ที่อ่าน Agent Skills ได้ ทั้ง Claude Code, Codex, GitHub Copilot, Cursor, Gemini CLI, Cline, Windsurf, Factory Droid และ Pi ใช้สัญญาอนุญาต MIT

ทำอะไรได้บ้าง

• 44 ประเภทไดอะแกรม แต่ละแบบมี 3 สไตล์ (minimal light, minimal dark, full-editorial) ครอบคลุมงานวิศวกรรมอย่าง architecture, sequence, state machine, ER, deployment, dependency graph, UML class, database schema ไปจนถึงงานธุรกิจอย่าง quadrant, Wardley map, Sankey, waterfall, Gantt และแบบที่หาในเครื่องมืออื่นยากอย่าง architecture delta (แผง Before · Changes · After พร้อมรายการสิ่งที่เปลี่ยน) และ exploded axonometric
• Onboarding แบรนด์: สั่ง “Onboard diagram-design to https://yoursite.com” เอเจนต์จะดึงหน้าเว็บมาแยกพาเลตและฟอนต์ จับคู่กับบทบาท paper / ink / muted / accent / link แสดง diff ให้ดู แล้วค่อยเขียนลง references/style-guide.md เมื่อเรายืนยัน
• Import: แปลงไฟล์ Mermaid, draw.io หรือ Excalidraw ที่มีอยู่แล้วมาวาดใหม่ในสไตล์นี้
• Export: เป็น SVG แยกหรือ PNG (มีคำสั่ง /export-diagram, /import-mermaid, /profile, /doctor ในแพ็กเกจปลั๊กอิน)

ติดตั้ง

วิธีข้าม host คือ CLI ของ skills.sh:

npx skills add cathrynlavery/diagram-design

ใน Claude Code แนะนำให้ติดตั้งผ่าน plugin marketplace เพื่อให้ได้ slash command และอัปเดต:

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

Codex และ Copilot มีคำสั่ง codex plugin marketplace add ... / copilot plugin marketplace add ... แบบเดียวกัน README เตือนว่า Claude Code ปิด auto-update ของ marketplace ภายนอกไว้เป็นค่าเริ่มต้น ต้องเข้าไปเปิดเองใน /plugin → Marketplaces และการติดตั้งผ่าน npx skills add จะไม่ตามอัปเดตของ marketplace ต้องสั่ง npx skills update diagram-design เอง

สิ่งที่น่าสนใจในรีลีส 2.6

ชุด 2.6 (20 ส.ค.–9 ต.ค.) เพิ่มประเภทใหม่หลายแบบ (waterfall, heatmap, architecture delta, exploded axonometric, axonometric plan) รองรับ import จาก Excalidraw และเพิ่ม lint ที่เรนเดอร์ทุกไดอะแกรมใน Chromium เพื่อตรวจกล่องทับกันและข้อความล้น ส่วนด้านความปลอดภัย HTML ที่ดึงมาตอน onboarding ถูกกำหนดให้เป็น ข้อมูลที่ไม่น่าเชื่อถือ (กัน prompt injection จากเว็บ) มีเพดานขนาด input ตอน import (Mermaid ไม่เกิน 4,096 ตัวอักษรต่อ statement) และปฏิเสธการโหลด CSS ภายนอกผ่าน @import / url()

PRIVACY.md ระบุว่าตัวสกิลไม่มีเซิร์ฟเวอร์ ไม่มี telemetry แต่ไฟล์ที่สร้างจะ โหลดฟอนต์จาก Google Fonts ทุกครั้งที่เปิดในเบราว์เซอร์ ใน CHANGELOG ส่วน Unreleased มีตัวเลือก offline ที่ใช้ฟอนต์ระบบแทน แต่ยังไม่ออกเป็นเวอร์ชัน

มุมมอง AI Curator

diagram-design เป็นตัวอย่างที่ชัดว่าทำไม Agent Skills ถึงโตเร็ว: โมเดลเข้าใจเนื้อหาอยู่แล้ว สิ่งที่ขาดคือ มาตรฐานงาน และสกิลที่ดีคือการเขียนมาตรฐานนั้นให้เอเจนต์อ่านได้ ไม่ต้องเทรนโมเดลใหม่ ตัวเลข 50,000 ดาวของสกิลที่ “แค่วาดไดอะแกรม” แสดงว่าตลาดต้องการสกิลที่ทำงานแคบๆ งานเดียวให้ออกมาดีจริง มากกว่าเฟรมเวิร์กใหญ่

ผู้เขียนยอมรับข้อเสียไว้ใน README เอง ซึ่งควรถือเป็นเกณฑ์เลือกใช้: ผลลัพธ์ขึ้นกับโมเดลที่ใช้ prompt เดิมอาจวางเลย์เอาต์ต่างกันในแต่ละครั้ง และไม่มี source แบบข้อความให้ diff ใน pull request สำหรับเอกสารใน Git ที่แก้ทุก sprint Mermaid ยังเหมาะกว่า diagram-design เหมาะกับ “ไดอะแกรมที่จะเผยแพร่” เช่น บล็อก สไลด์ หรือเอกสารนำเสนอลูกค้า

สำหรับทีมไทยมีสองเรื่องที่ควรเช็กก่อนใช้จริง ข้อแรกคือฟอนต์ไทย CHANGELOG พูดถึงฟอนต์จีนตัวเต็ม CJK และ Cyrillic แต่ไม่พูดถึงภาษาไทย ควรลองใส่ label ภาษาไทยดูว่า fallback ออกมาอ่านได้ไหม ข้อสองคือองค์กรที่เปิดไฟล์ในเครือข่ายปิดหรือมีนโยบาย PDPA เข้มงวด การที่ไฟล์เรียก Google Fonts ทุกครั้งที่เปิดคือการส่ง IP ของผู้ชมออกไปภายนอก ถ้าต้องการให้ไม่มีการเรียกออกเลยต้องลบ link ฟอนต์ออกเองไปก่อน จนกว่าโหมด offline จะออก

---

แหล่งข่าว

• GitHub — cathrynlavery/diagram-design (README)
• diagram-design CHANGELOG
• Live gallery — 44 ประเภทไดอะแกรม
• skills.sh — diagram-design