รีวิว Diagram Design — skill ให้ AI วาดไดอะแกรมสวยสไตล์งานบรรณาธิการ 44 แบบ

คืออะไร

cathrynlavery/diagram-design เป็น agent skill สำหรับวาดไดอะแกรมที่ตัวเองบอกไว้ว่าเป็น editorial diagram design — คือสไตล์แบบงานบทความ/นิตยสาร ไม่ใช่กล่องมนๆ ทั่วไป ของอยู่ใน skills/diagram-design/ และเป็น skill ล้วน ๆ ไม่มีขั้นตอน build ไม่ใช้ JavaScript ไม่พึ่งไฟล์รูปจากภายนอก

เจ้าของ repo เขียนไว้ว่าทุกไฟล์จะออกมาเป็น HTML ไฟล์เดียว ฝัง inline SVG เปิดด้วยการดับเบิลคลิกได้เลย และ export เป็น SVG หรือ PNG ได้

จุดเด่น

• 44 ประเภทไดอะแกรม แต่ละประเภทมี 3 แบบ: minimal light, minimal dark และ full-editorial (architecture, sequence, swimlane, quadrant, gantt, treemap, org chart ฯลฯ)
• มี design rules ฝังไว้ใน skill: accent สีเดียวสำหรับ 1–2 จุดที่สำคัญที่สุด, hairline 1px, ไม่ใช้เงา, ทุกพิกัดอยู่บนกริด 4px (เจ้าของบอกว่ามี CI เช็คเรื่องการซ้อนทับกับการถูกตัดขอบ)
• Onboarding แบบ "ยิง URL เว็บเราไป" เช่น "Onboard diagram-design to https://yoursite.com" — agent จะไปดึง palette กับฟอนต์ของเว็บมาใช้กับไดอะแกรมถัด ๆ ไป
• มี contrast checks อัตโนมัติ, รองรับฟอนต์แบบ offline และมี first-run gate ให้ตั้งค่าครั้งแรก
• import เข้ามาได้จาก Mermaid, draw.io และ Excalidraw ด้วย — เอาของเดิมมาวาดใหม่ในสไตล์เดียวกัน
• ใช้ได้กับ host ที่อ่าน Agent Skills ได้ ทั้ง Cursor, Claude Code, Codex, GitHub Copilot, Gemini CLI, Cline, Windsurf, Amp, Pi, Droid, Kiro, OpenCode ฯลฯ
• หน้า gallery: https://cathrynlavery.github.io/diagram-design/ (โปรเจกต์ไซต์ทางการคือ diagramdesign.dev)

เหมาะกับใคร

• คนที่เขียนบล็อก/เอกสารแล้วอยากได้ไดอะแกรมหน้าตาแบบเดียวกับเว็บ ไม่ใช่กล่องสี่เหลี่ยมมนๆ
• ทีมที่จะเอาไดอะแกรมไป publish เป็นรูป — README เขียนตรง ๆ ว่า "Diagram Design is for the diagram you are going to publish"
• คนที่เบื่อผลลัพธ์ Mermaid กับหน้าตาเรนเดอร์เริ่มต้น และไม่อยากไปลากกล่องใน draw.io เอง

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

แบบทั่วไป (Agent Skills CLI ครอบคลุม host หลายตัว):

npx skills add cathrynlavery/diagram-design

Claude Code (ผ่าน plugin marketplace — จะได้ slash commands ด้วย):

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

GitHub Copilot:

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

Codex:

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

Factory Droid:

droid plugin marketplace add https://github.com/cathrynlavery/diagram-design
droid plugin install diagram-design@diagram-design --scope user

Pi:

pi install https://github.com/cathrynlavery/diagram-design

อยากปรับ style guide เองใน clone:

git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design

ใครอยากลองก่อนใช้จริง เปิดดูไดอะแกรมทุกประเภทจาก cloned checkout ตามที่ README แนะนำ (Quickstart)

ข้อควรรู้

• License: MIT License — ใช้เชิงพาณิชย์ได้ แต่ต้องเก็บ copyright notice และ LICENSE ไว้ให้ครบตามเงื่อนไขของไฟล์จริง ๆ
• ความเป็นปัจจุบัน: push ล่าสุด 10 ต.ค. 2026 (ข้อมูล ณ 10 ต.ค. 2026) ตอนนี้มีดาวประมาณ 48.1k, fork 3,045, เปิด issue อยู่ 82, ยังไม่ถูก archive
• อายุโปรเจกต์: สร้างเมื่อ 16 เม.ย. 2026 — ยังใหม่อยู่ แต่โตเร็ว
• ข้อจำกัดที่เจ้าของยอมรับเอง: คุณภาพผลลัพธ์ขึ้นกับโมเดลที่ใช้ และพรอมต์เดิมสองครั้งอาจได้ layout ต่างกัน นอกจากนี้ไฟล์ที่ได้ไม่ใช่ editable source format — pull request ไม่มี text ให้ diff และก็ไม่มี canvas ให้ลากกล่อง
• README บอกตรง ๆ ว่า: ถ้าไดอะแกรมอยู่ใน Git และแก้ทุก sprint ใช้ Mermaid เหมาะกว่า เพราะ diff ได้และ GitHub เรนเดอร์ให้ ส่วนเครื่องมือนี้เหมาะกับไดอะแกรมที่จะเอาไปเผยแพร่
• เรื่อง path ของแต่ละ host ต่างกัน: npx skills add เป็นการติดตั้งแบบแยก ตาม README บอกว่ามันไม่ตามอัปเดตของ marketplace อัตโนมัติ ต้องใช้ npx skills update diagram-design เอง ส่วน Pi ก็ต้อง pi update --extensions เพราะ Pi ไม่มีระบบ refresh อัตโนมัติ
• Privacy: README ระบุให้ดูไฟล์ PRIVACY.md ว่า skill ส่งอะไรออกไปเครือข่าย
• แหล่งทางการ: เจ้าของระบุว่า official build มาจาก repo นี้ที่เดียว plugin directory ที่ชื่ออื่นถือเป็น unofficial copy (LittleMight บริษัทของ Cathryn Lavery เป็นผู้เผยแพร่ listing)

🔗 https://github.com/cathrynlavery/diagram-design

ข้อมูลจาก GitHub ณ 10 ต.ค. 2026: ⭐ 48,086 | ภาษา HTML | license MIT