Diagram Design: Skill ฟรีให้ AI วาดแผนภาพ ติดตั้งและใช้ยังไง

ใครต้องวาด architecture diagram, flowchart หรือ sequence ไปใส่เอกสารหรือสไลด์ มักเสียเวลาลากกล่องใน Figma หรือยอมใช้รูปหน้าตาทั่วไปที่ไม่เข้ากับงาน Diagram Design เป็น skill สำหรับเอเจนต์อย่าง Claude Code และ Codex ที่ให้คุณบรรยายสิ่งที่อยากได้เป็นภาษาธรรมดา แล้วได้ไฟล์ .html ไฟล์เดียวที่เปิดด้วยการดับเบิลคลิกได้เลย

บทความนี้เขียนจากเอกสาร README และนโยบายความเป็นส่วนตัวในรีโพของ Diagram Design ที่อ่านเมื่อ 10 ต.ค. 2026 ยังไม่ได้ติดตั้งเพื่อเขียนบทความนี้ ทุกขั้นตอนจึงเป็นไปตามเอกสาร ไม่ใช่สิ่งที่รันแล้วเห็นผลจริง

Diagram Design เป็นโอเพนซอร์สแบบ MIT ทำโดย Cathryn Lavery (LittleMight) ตอนตรวจวันที่ 10 ต.ค. 2026 repo มี 48,635 ดาวบน GitHub

Diagram Design คืออะไร

ลองนึกถึงนักออกแบบที่ได้โจทย์ว่า "วาดภาพระบบของเราให้หน่อย" เขาเลือกรูปแบบที่เหมาะ วางแผนก่อน แล้วค่อยวาด Diagram Design ทำงานแบบนั้น agent เลือกประเภทของแผนภาพ วางตำแหน่งบนตารางขนาด 4px แล้วเขียนออกมาเป็นไฟล์ HTML ที่มี SVG อยู่ข้างใน

README ระบุว่ามี 44 ประเภท ตั้งแต่ architecture, flowchart, sequence, ER ไปจนถึง gantt, sankey และ kanban แต่ละประเภทมีสามรูปแบบคือ minimal light, minimal dark และ full-editorial ไฟล์เดียวจบในตัว ไม่ต้องมี build step, JavaScript หรือรูปภาพภายนอก

สิ่งที่ต้องมีก่อนเริ่ม

• Claude Code หรือ Codex หรือ host อื่นที่ README ระบุว่าอ่าน Agent Skills ได้ เช่น Cursor, GitHub Copilot, Gemini CLI และ Windsurf
• ใช้คำสั่งในเทอร์มินัลได้
• ไม่ต้องมีบัญชี เอกสาร PRIVACY ระบุว่า Diagram Design ไม่มี accounts
• ถ้าจะส่งออก PNG ต้องติดตั้ง Playwright ตามคำสั่งใน README คือ pip install playwright && playwright install chromium เอกสารไม่ได้ระบุเรื่องค่าใช้จ่าย

ติดตั้งยังไง

README มีสองทางหลัก ทางแรกคือ plugin marketplace ของ Claude Code ซึ่งได้ slash command มาด้วย ทางที่สองคือ npx skills ที่ใช้ได้กับ host ที่อ่าน Agent Skills

ทางที่ 1: ติดตั้งผ่าน Claude Code marketplace

เปิด Claude Code แล้วพิมพ์สองบรรทัดนี้ทีละบรรทัด

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

README แนะนำให้เปิด auto-update ด้วย รัน /plugin เลือก Marketplaces เลือก diagram-design แล้วเลือก Enable auto-update README ระบุว่า Claude Code ปิด auto-update เป็นค่าเริ่มต้นสำหรับ marketplace ของบุคคลที่สาม เมื่อเปิดแล้วระบบจะรีเฟรชเบื้องหลังหลังเริ่มโปรแกรม

ทางที่ 2: ติดตั้งด้วย npx สำหรับ host อื่น

สำหรับ Cursor, Cline, Gemini CLI หรือ host อื่นที่ README ระบุ รันคำสั่งนี้ในเทอร์มินัล

npx skills add cathrynlavery/diagram-design

CLI จะติดตั้งทั้งโฟลเดอร์ references/, assets/ และ scripts/ ลงในโฟลเดอร์ของ host ที่เลือก README เตือนว่าการติดตั้งแบบนี้ไม่ตาม marketplace updates โดยอัตโนมัติ ให้รัน npx skills update diagram-design เพื่อรับการอัปเดต และให้เฉพาะ Agent Skill จึงไม่มี slash command อย่าง /export-diagram ถ้า host มี marketplace ให้ใช้ marketplace ตามที่ README แนะนำ

ทางที่ 3: ติดตั้งสำหรับ Codex

รันสองคำสั่งนี้ในเทอร์มินัลทีละบรรทัด

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

Codex รีเฟรช Git marketplace ตอนเริ่มโปรแกรม ถ้าอยากดึงทันทีให้รัน codex plugin marketplace upgrade diagram-design แล้วเปิดเซสชันใหม่

เปรียบเทียบวิธีติดตั้ง

วิธีติดตั้ง	คำสั่ง	อัปเดตอัตโนมัติไหม	หมายเหตุ
Claude Code marketplace	/plugin marketplace add cathrynlavery/diagram-design แล้ว /plugin install diagram-design@diagram-design	ได้ ถ้าเปิด Enable auto-update ใน /plugin	มี slash command อย่าง /diagram-design:export-diagram
npx skills	npx skills add cathrynlavery/diagram-design	ไม่ได้ ต้องรัน npx skills update diagram-design	ใช้กับ host ที่อ่าน Agent Skills ได้ ให้เฉพาะ Agent Skill
Codex marketplace	codex plugin marketplace add cathrynlavery/diagram-design แล้ว codex plugin add diagram-design@diagram-design	ได้ Codex รีเฟรชตอนเริ่มโปรแกรม	ดึงทันทีด้วย codex plugin marketplace upgrade diagram-design

ลองใช้จริงด้วยตัวอย่างจาก README

README ยกตัวอย่างประโยคที่พิมพ์ให้ agent ได้เลย ดังนี้

• "Make me an architecture diagram of my app: frontend, backend, database, Redis cache."
• "I need a quadrant showing Q2 projects by impact vs effort."
• "Give me a sequence of a bearer call with token refresh on 401."

agent จะเลือกประเภท บอกแผนของตัวเองก่อนวาด แล้วเขียนไฟล์ .html ดับเบิลคลิกเปิดในเบราว์เซอร์ได้เลย

ทำให้แผนภาพตรงกับแบรนด์ของคุณ

ค่าเริ่มต้นเป็นโทนดำกับส้ม ใช้ได้ทันที แต่ README บอกว่า onboarding ใช้เวลาประมาณหนึ่งนาทีและทำให้ทุกแผนภาพใหม่ใช้สีและฟอนต์ของเว็บคุณ พิมพ์ประโยคนี้ในแชต

Onboard diagram-design to https://yoursite.com

agent จะดึงหน้าแรกของเว็บ หาสีหลักและฟอนต์ แล้วแมปเข้ากับบทบาท paper, ink, muted, accent และ link จากนั้นแสดง diff ให้ดู เมื่อคุณตอบว่าใช่ จะเขียนค่าลงใน references/style-guide.md README ระบุว่าพื้นหลังของ <body> กลายเป็น paper, ปุ่ม CTA หรือลิงก์ที่ใช้มากที่สุดกลายเป็น accent และฟอนต์ของ <h1> กลายเป็นฟอนต์หัวข้อ

ก่อนเขียนค่า skill จะตรวจ contrast ตามมาตรฐาน WCAG AA ถ้าสีไม่ผ่านที่ขนาดตัวอักษรในแผนภาพ จะเสนอค่าที่ปรับแล้วพร้อมเหตุผล ค่าที่ได้บันทึกเป็นโปรไฟล์ได้ที่ ~/.diagram-design/profiles/ ถ้ามีหลายลูกค้า onboard ครั้งเดียว บันทึกเป็นโปรไฟล์ที่มีชื่อ แล้วใส่ไฟล์ marker .diagram-design ที่มีข้อความ profile: <slug> ในแต่ละโปรเจกต์

ตอนใช้ครั้งแรกในโปรเจกต์ใหม่ skill จะถามก่อนว่า

"This is your first diagram in this project. The style guide is still at the default. Want to run onboarding, paste tokens manually, or proceed with default?"

ส่งออกและนำเข้าไฟล์

ส่งออกเป็น PNG หรือ SVG

ถ้าต้องการนำแผนภาพไปใส่ Figma สไลด์หรือการ์ดโซเชียล ใช้คำสั่งนี้ใน Claude Code

/diagram-design:export-diagram path/to/diagram.html
/diagram-design:export-diagram path/to/diagram.html --svg-only
/diagram-design:export-diagram path/to/diagram.html --png-only --scale=3

SVG ฝังลิงก์ Google Fonts ให้แสดงผลได้เองในเบราว์เซอร์, Figma และ Illustrator ใส่ --system-fonts ถ้าไม่ต้องการลิงก์ฟอนต์ PNG เรนเดอร์ที่ 2 เท่าเป็นค่าเริ่มต้น

นำเข้าจาก draw.io, Mermaid หรือ Excalidraw

README บอกว่า skill จะ วาดใหม่ จากไฟล์เดิมด้วยสไตล์ของตัวเอง โดยเนื้อหาเดิมยังอยู่

• draw.io: ไฟล์ .drawio, .drawio.xml, .drawio.png ที่ฝังแผนภาพ และ .drawio.svg เช่น /diagram-design:import-drawio platform.drawio
• Mermaid: ไฟล์ .mmd, .mermaid หรือบล็อก fenced mermaid ใน Markdown เช่น /diagram-design:import-mermaid README.md --diagram=all
• Excalidraw: ไฟล์ .excalidraw และ .excalidraw.json ไม่รองรับไฟล์ export .excalidraw.png หรือ .excalidraw.svg เช่น /diagram-design:import-excalidraw whiteboard.excalidraw --size=slide-16x9 --detail=simplified

ทุกการนำเข้าจบด้วย fidelity ledger ที่บอกว่าโหนดไหนถูกรวม ยุบ หรือตัดออก

ความเป็นส่วนตัว

เอกสาร PRIVACY ระบุว่า Diagram Design เป็นชุดคำสั่ง เทมเพลต HTML และสคริปต์เล็ก ๆ ที่รันในเอเจนต์ที่คุณติดตั้ง ไม่มีเซิร์ฟเวอร์ ไม่มีบัญชี ไม่มี analytics และไม่มี telemetry ผู้ทำไม่ได้รับข้อมูลจากการใช้งาน

สิ่งที่ออกไปข้างนอกมีดังนี้

• ผู้ให้บริการ AI ของเอเจนต์คุณ เช่น OpenAI สำหรับ ChatGPT และ Codex ข้อความและไฟล์ถูกประมวลผลตามนโยบายของผู้ให้บริการนั้น
• Google Fonts เมื่อเปิดแผนภาพในเบราว์เซอร์ จะโหลดจาก fonts.googleapis.com และ fonts.gstatic.com Google จะได้ IP address และรายละเอียดเบราว์เซอร์ของผู้เปิด แต่คำขอบอกแค่ชื่อฟอนต์ ไม่มีเนื้อหาแผนภาพ
• เว็บไซต์ที่คุณให้ onboarding จะถูกดึงเฉพาะเมื่อคุณขอ

ถ้าไม่อยากให้มีคำขอไป Google Fonts ให้ขอ system fonts หรือตั้ง font source เป็น system ในไฟล์ style guide หรือลบลิงก์ฟอนต์ออกจากไฟล์ แผนภาพจะใช้ฟอนต์ของระบบแทน

ข้อควรระวัง

• ข้อความและไฟล์ที่ส่งให้ agent ถูกประมวลผลโดยผู้ให้บริการของ agent นั้น อย่าใส่ข้อมูลที่ไม่ควรส่งออกไป
• การ onboarding จะดึงหน้าจากเว็บที่คุณระบุ ใช้เฉพาะเว็บที่คุณมีสิทธิ์
• ผลลัพธ์ขึ้นกับโมเดลที่ใช้ README เตือนว่า prompt เดิมอาจได้การจัดวางต่างกันในแต่ละครั้ง
• ไฟล์ไม่ใช่ไฟล์ต้นฉบับที่แก้ง่าย ไม่มี text ให้ diff ใน pull request README ระบุว่าถ้าแผนภาพอยู่ใน Git และเปลี่ยนทุกสปรินต์ Mermaid เหมาะกว่า

วิธีถอนการติดตั้ง

README ไม่ได้ให้คำสั่งถอนการติดตั้ง ถ้าติดตั้งผ่าน Claude Code marketplace ให้จัดการ plugin ผ่าน /plugin ตามที่ PRIVACY ระบุว่าถอนการติดตั้งจาก agent ได้ทุกเมื่อ ส่วนไฟล์แผนภาพและโปรไฟล์ใน ~/.diagram-design/profiles/ เป็นไฟล์ธรรมดาในเครื่อง ลบเองได้ทุกเมื่อ ก่อนลบให้ตรวจก่อนว่าไม่มีโปรไฟล์ที่ยังต้องใช้

ลิงก์

• รีโพ cathrynlavery/diagram-design บน GitHub
• diagramdesign.dev เว็บโปรเจกต์
• แกลเลอรีแผนภาพสดทั้งหมด
• skills.sh ตัว skills CLI ที่ README ใช้ติดตั้งแบบ cross-agent

คอร์สทั้งหมด