AI ทำ Flowchart สวยขึ้นทันตา ด้วยสกิล diagram-design
งานหลาย ๆ อย่างของผม ทั้งงานประจำและโปรเจกต์อื่น ๆ มักจะมีขั้นตอนเยอะ แล้วเวลาที่เราสรุปมันออกมาเป็น Flowchart เป็น Diagram หรือแผนผังสักอัน มันช่วยให้เข้าใจข้อมูลและ flow การทำงานง่ายขึ้นเยอะ
ที่ผ่านมาเวลาผมให้ Codex หรือ Claude ช่วยสรุปเป็น Diagram มันก็ทำออกมาได้อยู่ แต่หลาย ๆ ครั้งหน้าตามันยังไม่ค่อยสวย ไม่ค่อยเรียบร้อย เลยพยายามหาสกิลมาช่วยเรื่องนี้เรื่อย ๆ จนไปเจอตัวหนึ่งที่น่าสนใจชื่อ diagram-design — ลองแล้วรู้สึกว่ามันดีขึ้นชัดเจน เลยอยากเอามาเล่าให้ฟัง
diagram-design คืออะไร
diagram-design เป็น open source ตัวหนึ่งที่ผมไปเจอบน GitHub คนที่สร้างขึ้นมาคือ Cathryn Lavery ซึ่งเป็น founder ของ BestSelf Co. และเคยติด Forbes 30 Under 30 ตัว repo ปัจจุบันมีคนกด Star ไปแล้วมากกว่า 26,000 ดวง
ตัวสกิลนี้จะช่วยให้ AI วาด Diagram ออกมาเป็นไฟล์ HTML หรือ SVG ก็ได้ จุดเด่นคือมันมีรูปแบบให้เลือกเยอะมาก — มากถึง 39 ชนิด ตั้งแต่ flowchart, architecture, radar, sankey, timeline ไปจนถึงรูปแบบอื่น ๆ อีกเพียบ และที่สำคัญคือมันมี design system คุมความสวยไว้ให้ ไม่ปล่อยให้ออกมาแบบมั่ว ๆ
วิธีติดตั้ง
การติดตั้งมี 2 แบบ
แบบแรกคือติดตั้งเองตามที่ repo แนะนำ (official) ซึ่งจะมีขั้นตอนบอกไว้ว่า install ยังไง เปิด auto-update ยังไง รองรับได้หลายแพลตฟอร์ม ถ้าอยากชัวร์เข้าไปอ่านวิธีติดตั้งใน repo ได้เลย
แต่ปกติเวลาผมจะติดตั้งสกิลอะไรก็ตาม ส่วนตัวผมจะใช้วิธี บอก AI ที่ใช้งานอยู่ตอนนั้นให้ช่วยติดตั้งให้เลย เหตุผลหลัก ๆ คือ
- บางสกิลมันอาจจะซ้ำซ้อนหรือคล้ายกับสกิลที่เราเคยติดตั้งไว้ก่อนหน้า ผมเลยบอก AI ไว้ให้มันช่วยเช็คด้วยว่าตัวใหม่นี้ไปใกล้เคียงกับตัวไหน แล้วค่อยตัดสินใจว่าจะยกเลิกตัวเก่า ติดตั้งตัวใหม่ไหม
- ผมใช้ทั้ง Claude และ Codex เป็นประจำ เวลาติดตั้งสกิลทีก็ให้ AI ไปติดตั้งให้ทั้งสองฝั่งเลย
- โดยรวมมันสะดวกและละเอียดกว่าผมไล่เช็คเอง เพราะ AI เช็คได้ละเอียดกว่าผมแน่ ๆ
วิธีใช้งาน
พอติดตั้งเสร็จ วิธีใช้ก็เหมือนสกิลทั่ว ๆ ไป คือเราสั่งด้วยภาษาพูดคุยปกติได้เลย
อย่างในรอบนี้พอผมติดตั้งเสร็จ ผมก็ลองเอามาทดสอบกับงาน iampoom ดู โดยสั่งไปประมาณว่า "ผมเพิ่งติดตั้งสกิล diagram-design ลองเอามาใช้เป็นตัวอย่างให้ผมดูหน่อยว่ามันเป็นยังไงบ้าง"
มันตอบกลับมาว่าจะทดสอบยังไง — เลือกชนิดกับ pattern ให้เอง มีการกำหนดเรื่อง design system ก่อน แล้วก็ไปถอด token ของ iampoom เพื่อให้รู้ว่า mood, tone, สี, CI ควรใช้แบบไหน แล้วค่อยทำออกมาเป็น output แบบ HTML ให้ดู
แบบเดิม vs แบบใหม่
ถ้าปกติเราสั่ง AI ไม่ว่าจะ Claude หรือ Codex ให้สรุปอะไรบางอย่างเป็น Diagram มันมักจะออกมาแบบเพลน ๆ อย่างเช่นเป็น mermaid ที่โทนสีค่อนข้าง monotone โทนเดียว เป็น flow ตรง ๆ
แต่พอติดตั้ง diagram-design แล้วสั่งเรื่องเดียวกัน ผลลัพธ์ต่างออกไปเลย — มันมีเรื่องของสีที่สื่อความหมาย มีกล่องอธิบายเพิ่มในแต่ละขั้น มีไอคอนประกอบ อ่านง่ายและดูเป็นระบบขึ้นเยอะ
ลองจริง 10 รูปแบบ
ผมเอางานเกี่ยวกับ iampoom มาลองทำเป็น Diagram หลาย ๆ เรื่อง รวม 10 รูปแบบ เพื่อดูศักยภาพของสกิลนี้ เช่น
- Layer stack — เห็นระบบไล่ลงเป็นชั้น ๆ ใส่รายละเอียด ใส่ไอคอน แล้วยังใช้สีสื่อความหมายได้ (เช่น ฟ้า = ป้องกัน, แดง = ดักจับ)
- Process (swimlane) — flow ซ้ายไปขวา แยกเลนว่าใครเป็นเจ้าของงานในแต่ละขั้น
- Flowchart — เส้นทางการตัดสินใจ
- Radar / Spider — เหมาะกับการให้คะแนนเป็นแกน
- Architecture — สแตกที่มีหลายส่วนประกอบกัน เห็นว่าเริ่มตรงไหน ไปต่อยังไง
- Tree — โครงลำดับชั้น แตกกิ่งย่อยลงไป
- Sankey — ปริมาณไหลแตก/รวม เหมาะกับการโชว์สัดส่วน
- Timeline — ไล่จากซ้ายไปขวาเหมือน journey ว่ามีอะไรเกิดขึ้นบ้าง
(ที่เหลือรวมเป็น 10 แบบ ผมเปิดให้ดูของจริงในคลิป)
Q&A
เปลือง Token ขึ้นไหม? — รอบที่ผมทดสอบใช้ Claude Opus 4.8 และมีการใช้ subagent ช่วยด้วย มันประเมินมาว่าใช้ต่อ Diagram หนึ่งอันประมาณ 120,000–180,000 token ตรงนี้ต้องหมายเหตุว่าจริง ๆ แต่ละอันไม่เท่ากัน ขึ้นกับความละเอียดและข้อมูล
ใช้กับ AI ตัวไหนได้บ้าง? — Claude Code ได้, Codex ได้, Pi ก็ได้ รวมถึงตัวอื่น ๆ อย่าง Cursor, Antigravity ก็ค่อนข้าง support หมด
ต้องเก่ง design เองไหม? — ไม่จำเป็นเลย เพราะสกิลนี้ใช้ความสามารถของ AI model เป็นหลัก เราแค่บอกเนื้อหา (แต่ model ที่เราใช้ก็ควรเก่งพอสมควร ซึ่งทั้งฝั่ง Claude และ Codex ทำได้อยู่แล้ว)
ปรับให้เป็นแบรนด์เราได้ไหม? — ได้ ขั้นตอนแรกมันจะถามเราก่อนว่าอยากให้ไปแกะ identity แบบไหน สมมติให้แกะของ iampoom มันก็ไปอิงจากข้อมูลบนเว็บหรือในเครื่องว่าส่วนใหญ่ชอบใช้โทนฟ้า-ขาว แล้วเซฟไว้เป็น identity พอใช้ครั้งต่อไปมันจะจำได้เลย
Key Takeaway
- Diagram สวยขึ้นอย่างชัดเจนเมื่อเทียบกับแบบปกติ
- Layout ยืดหยุ่นขึ้นเยอะ จากที่ปกติอาจจะทื่อ ๆ บนลงล่าง ซ้ายไปขวา ก็มีรูปแบบหลากหลายขึ้น
- ที่ผมชอบสุดคือ มันทำออกมาได้พร้อมใช้ทันที งานที่ต้องกลับไปแก้น้อยลง ซึ่งทางอ้อมมันก็ช่วยลดเวลาและประหยัด token ไปด้วย (ไม่ต้องวน prompt แก้หลายรอบ)
- ถ้าใครต้องทำงานที่ต้องสรุปเป็น Flowchart, Diagram หรือ HTML บ่อย ๆ สกิลนี้เหมาะมาก ลองเอาไปเล่นดูได้