Excalidraw Diagram Skill สำหรับ Claude Code: สร้างไดอะแกรมสถาปัตยกรรมสวยๆ ด้วย AI

Excalidraw Diagram Skill คืออะไร? (What is it?)

Excalidraw Diagram Skill เป็น Claude Code skill (ใช้ได้กับ coding agent ทุกตัวที่รองรับ skills) ที่สร้างไฟล์ Excalidraw diagram จากคำอธิบายภาษาธรรมชาติ แต่มันทำได้มากกว่าการสร้างไดอะแกรมทั่วไป:

• ไดอะแกรมที่ "อาร์กิวเมนต์" ไม่ใช่แค่ "แสดงผล" -- รูปร่างแต่ละอันสะท้อนแนวคิดที่มันเป็นตัวแทน เช่น Fan-out สำหรับความสัมพันธ์แบบ one-to-many, Timeline สำหรับลำดับ
• Evidence artifacts -- ไดอะแกรมเทคนิคมีโค้ดจริง, JSON payload จริง และตัวอย่างที่เป็นรูปธรรม
• Visual validation อัตโนมัติ -- ระบบ render ด้วย Playwright ให้ agent เห็นผลลัพธ์ ตรวจจับปัญหา layout และแก้ไขอัตโนมัติ
• ปรับแต่งแบรนด์ได้ -- สีและสไตล์ทั้งหมดอยู่ในไฟล์ color-palette.md เดียว

ปรัชญาหลัก (Core Philosophy)

ไดอะแกรมไม่ใช่ข้อความที่จัดรูปแบบ มันคือ visual argument ที่แสดงความสัมพันธ์ ความเป็นเหตุเป็นผล และ flow ที่คำเพียงอย่างเดียวไม่สามารถสื่อได้ รูปร่างควร "เป็น" ความหมายของมัน

สกิลนี้ใช้การทดสอบสองอย่าง:

1. Isomorphism Test: ถ้าลบข้อความทั้งหมดออก โครงสร้างเพียงอย่างเดียวจะสื่อสารแนวคิดได้ไหม?
2. Education Test: คนดูจะเรียนรู้อะไรที่เป็นรูปธรรมจากไดอะแกรมนี้ได้ หรือแค่ติดป้ายกล่อง?

การติดตั้งและตั้งค่า (Installation and Setup)

การตั้งค่าสกิลทำได้ง่าย:

จากนั้นตั้งค่า render pipeline สำหรับ visual validation:

เมื่อติดตั้งเสร็จ Claude Code จะตรวจจับและใช้สกิลโดยอัตโนมัติเมื่อคุณขอให้สร้างไดอะแกรม

วิธีการทำงาน: กระบวนการออกแบบ (Design Process)

สกิลนี้ทำงานตามกระบวนการ 6 ขั้นตอน:

ขั้นตอนที่ 1: ประเมินความลึก (Depth Assessment)

ก่อนสร้างอะไร agent จะกำหนดระดับรายละเอียดที่ต้องการ:

• Simple/Conceptual -- รูปทรงนามธรรมสำหรับ mental models
• Comprehensive/Technical -- ตัวอย่างที่เป็นรูปธรรมพร้อม code snippets สำหรับระบบจริง

ขั้นตอนที่ 2: แมปแนวคิดกับ Pattern (Concept-to-Pattern Mapping)

แต่ละแนวคิดจะถูกแมปกับ visual pattern ที่สะท้อนพฤติกรรมของมัน:

ขั้นตอนที่ 3: สร้างทีละ Section (Section-by-Section Generation)

สำหรับไดอะแกรมที่ซับซ้อน สกิลจะสร้าง JSON ทีละ section -- ไม่พยายามสร้างไฟล์ทั้งหมดในรอบเดียว วิธีนี้ให้คุณภาพที่ดีกว่าและหลีกเลี่ยง output token limits

ขั้นตอนที่ 4: Render-View-Fix Loop

หลังจากสร้าง JSON แล้ว agent จะ render เป็น PNG ด้วย Playwright ตรวจสอบผลลัพธ์ด้วยสายตา และแก้ไขปัญหา -- โดยทั่วไปจะวนซ้ำ 2-4 รอบจนกว่าไดอะแกรมจะผ่านการตรวจสอบคุณภาพ

ตัวอย่างจริง: สถาปัตยกรรม Frappe Framework (Real Example)

มาดูสกิลนี้ในการใช้งานจริงกัน นี่คือไดอะแกรมที่สร้างขึ้นเพื่อเอกสาร Frappe Framework architecture:

ไดอะแกรมนี้สร้างโดยบอก Claude Code ว่า:

"สร้างไดอะแกรม Excalidraw แสดง Frappe Framework architecture -- วิธีที่ apps อย่าง frappe, erpnext และ custom app เชื่อมต่อกับ framework layer ซึ่งให้บริการ ORM, REST API, WebSocket และ Background Jobs แสดงว่า sites เชื่อมต่อกับ databases อย่างไร รวมถึง evidence artifact แสดงตัวอย่างโค้ด hooks.py"

สังเกตว่าไดอะแกรมนี้ปฏิบัติตามหลักการของสกิล:

• โครงสร้างแบบ Layered สะท้อน architectural layers จริง (apps → framework → sites)
• สีมีความหมาย -- custom app ใช้สีเขียว (สำเร็จ/active), framework ใช้สีน้ำเงิน (primary), database ใช้สีเหลือง (decision/data)
• Evidence artifact -- บล็อกโค้ดสีเข้มด้านขวาแสดงเนื้อหา hooks.py จริง ไม่ใช่แค่ป้าย
• ขอบเขตแบบ dashed -- container frappe-bench/ แสดงขอบเขตระบบโดยไม่หนักเกินไปทางสายตา

ตัวอย่าง: Custom App Development Lifecycle

นี่คือไดอะแกรมอีกตัวที่แสดง development lifecycle แบบ timeline:

ไดอะแกรมนี้ใช้หลาย visual patterns:

• Timeline pattern (ด้านบน) -- จุดบนเส้นหลักแสดง 5 ขั้นตอนการพัฒนา
• Evidence artifacts -- แต่ละขั้นตอนมีบล็อกโค้ดสีเข้มพร้อมคำสั่งจริง
• Fan-out pattern (ด้านล่าง) -- แสดงว่าโครงสร้างไดเรกทอรีของ custom app แตกสาขาเป็น hooks.py, modules/, fixtures/ และ public/

Visual Pattern Library

สกิลมาพร้อม pattern library ที่ครอบคลุม:

Fan-Out (หนึ่งต่อหลาย)

ใช้สำหรับ: sources, root causes, central hubs -- เช่นวิธีที่ Frappe app แตกสาขาเป็นโครงสร้างไดเรกทอรี

Timeline (ลำดับ)

ใช้สำหรับ: development workflows, deployment pipelines, event sequences

Assembly Line (การแปลง)

ใช้สำหรับ: data transformations, build pipelines, API request/response flows

สีมีความหมาย (Color as Meaning)

สีไม่ใช่การตกแต่ง แต่เป็นการเข้ารหัสข้อมูลเชิงความหมาย:

เคล็ดลับสำหรับนักพัฒนา Frappe (Tips for Frappe Developers)

นี่คือไอเดียไดอะแกรมที่เหมาะกับสกิลนี้สำหรับโปรเจกต์ Frappe:

1. Custom App Hook Flow -- แสดงว่า doc_events ใน hooks.py เชื่อมต่อโค้ดของคุณกับ Frappe events หลักอย่างไร
2. Doctype Relationship Map -- แสดงความสัมพันธ์ระหว่าง Custom Doctypes ของคุณกับ core ERPNext Doctypes
3. Deployment Architecture -- ไดอะแกรม bench setup ที่มี Nginx, Gunicorn workers, Redis และ MariaDB
4. Data Migration Pipeline -- แสดง flow ของข้อมูลจากระบบเก่าไปยัง ERPNext ผ่าน Data Import หรือ custom scripts
5. Multi-site Architecture -- แสดงว่า Frappe Bench เดียวให้บริการหลาย sites ด้วย shared apps ได้อย่างไร

ระบบ Render Pipeline

หนึ่งในฟีเจอร์ที่น่าประทับใจที่สุดคือ visual validation อัตโนมัติ สกิลนี้รวมถึง:

• render_excalidraw.py -- สคริปต์ Python ที่ใช้ Playwright ในการ render ไฟล์ .excalidraw เป็น PNG
• render_template.html -- template เบราว์เซอร์ที่โหลด Excalidraw rendering engine
• การคำนวณ bounding box อัตโนมัติสำหรับ viewport ที่เหมาะสม

Agent ใช้ pipeline นี้ในลูป: สร้าง → render → ตรวจสอบ → แก้ไข → render ใหม่ จนกว่าไดอะแกรมจะผ่านมาตรฐานคุณภาพ

โครงสร้างไฟล์ (File Structure)

คำถามที่พบบ่อย (FAQ)

สามารถปรับแต่งสีให้เข้ากับแบรนด์ได้ไหม?

ได้ แก้ไขไฟล์ references/color-palette.md ด้วยสีแบรนด์ของคุณ ส่วนอื่นทั้งหมดในสกิลเป็น universal design methodology Agent จะใช้ palette ของคุณสำหรับไดอะแกรมในอนาคตทั้งหมด

ใช้ได้กับ coding agents อื่นนอกจาก Claude Code ไหม?

ได้ สกิลนี้เข้ากันได้กับ coding agent ทุกตัวที่รองรับ skills directory สำหรับ agents ที่อ่านจาก .claude/skills/ (เช่น Claude Code และ OpenCode) แค่วางลงไปก็ใช้ได้เลย

ไดอะแกรมใหญ่ขนาดไหนได้?

สกิลจัดการไดอะแกรมขนาดใหญ่โดยสร้างทีละ section ด้วย element IDs ที่แบ่ง namespace และ cross-section binding ที่ระมัดระวัง ไดอะแกรมเทคนิคที่ซับซ้อนพร้อม multiple zoom levels ทำงานได้ดี

สามารถแก้ไขไดอะแกรมที่สร้างขึ้นด้วยมือได้ไหม?

ได้แน่นอน ผลลัพธ์เป็น .excalidraw JSON มาตรฐานที่เปิดได้ใน excalidraw.com หรือ editor ที่เข้ากันได้ คุณสามารถปรับตำแหน่ง สี หรือข้อความหลังจากสร้างได้

เปรียบเทียบกับ Mermaid หรือ diagram format อื่นอย่างไร?

สกิลนี้สร้าง Excalidraw format โดยเฉพาะ ซึ่งให้การควบคุมทางภาพมากกว่า format แบบ text อย่าง Mermaid สำหรับ flowcharts ง่ายๆ Mermaid ก็ใช้ได้ดี แต่สำหรับไดอะแกรมเทคนิคที่ครอบคลุมพร้อม evidence artifacts และ visual arguments Excalidraw เหนือกว่ามาก

อ้างอิง (References)

• Excalidraw Diagram Skill (GitHub) -- สกิลต้นฉบับโดย Cole Medin
• Excalidraw -- Open-source virtual whiteboard
• Claude Code -- Anthropic's CLI coding agent
• Frappe Framework -- Full-stack web framework สำหรับสร้าง ERPNext apps
• Playwright -- Browser automation ที่ใช้สำหรับ rendering diagrams