สกิลโอเพนซอร์สชื่อ Lieflat Charts เริ่มทำกราฟด้วยการอ่านโครงสร้างของข้อมูลก่อน แล้วค่อยเลือกชนิดกราฟ

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

สิ่งที่เข้ามาสลับลำดับขั้นตอนนี้คือสกิลเสริมสำหรับ AI Agent ที่ทำงานผ่านเครื่องมือช่วยเขียนและรันโค้ดอย่าง Claude Code และ Codex ตามมาตรฐาน Agent Skills เมื่อติดตั้งแล้ว AI จะรู้วิธีสร้างกราฟเป็นไฟล์ HTML ที่เปิดดูผ่านเบราว์เซอร์ได้ทันที และถ้าต้องการรายงานแบบเต็มหน้า ก็จัดหน้าประกอบเป็นรายงานฉบับสมบูรณ์ให้ได้

แต่สิ่งที่เราหยิบไปใช้ประโยชน์ได้ ไม่ได้มีเพียงแค่โค้ดหรือเทมเพลตที่แนบมา หัวใจสำคัญคือกระบวนการคิดและกติกาง่าย ๆ ไม่กี่ข้อที่คุณสามารถนำไปปรับใช้กับการทำกราฟครั้งถัดไปได้ทันที โดยไม่ต้องติดตั้งเครื่องมือใด ๆ เพิ่มเติม

ดัชนี 49 แบบ: เลือกกราฟตามโครงสร้างข้อมูล ไม่ใช่ตามความคุ้นเคย

เวลาทำกราฟ เรามักเลือกประเภทกราฟก่อน แล้วค่อยพยายามยัดข้อมูลลงไปให้เข้ากับกราฟที่เลือก กราฟแท่งจึงกลายเป็นตัวเลือกแรกเสมอเพียงเพราะเราเห็นบ่อยที่สุด ไม่ใช่เพราะข้อมูลชุดนั้นเหมาะกับกราฟแท่งจริง ๆ

Lieflat Charts สลับสองขั้นตอนนี้ใหม่ ก่อนจะวาดกราฟ ตัว AI จะเข้าไปวิเคราะห์โครงสร้างข้อมูลก่อนเสมอว่า ข้อมูลมีกี่ชุด เรียงลำดับตามเวลาได้ไหม เป็นข้อมูลจัดหมวดหมู่ หรือเป็นตัวเลขต่อเนื่อง จากนั้นจึงค่อยเลือกประเภทกราฟที่รองรับโครงสร้างแบบนั้นได้จริง เอกสารของโปรเจกต์เรียกขั้นตอนการตรวจสอบข้อมูลนี้ว่า Data Contract เพื่อดูให้ชัดเจนก่อนว่าข้อมูลชุดนี้บอกอะไรเราได้บ้าง แล้วค่อยเลือกวิธีสื่อสารที่เหมาะสม

AI ทำแบบนี้ได้เพราะในสกิลมีไฟล์ดัชนีชื่อ catalog.md ซึ่งรวบรวมรูปแบบกราฟไว้ล่วงหน้า 49 แบบ พร้อมระบุชัดเจนว่าข้อมูลต้องมีโครงสร้างแบบไหนจึงจะใช้กับกราฟแต่ละแบบได้ ตัว AI จึงไม่ต้องเดาจากความคุ้นเคย แต่จะเลือกกราฟที่ตอบโจทย์โดยเทียบกับโครงสร้างของข้อมูลตรงหน้า

วิธีคิดนี้ไม่ได้บอกว่ากราฟแท่งไม่ดี กราฟแท่งยังคงอยู่ในดัชนีเหมือนเดิม สิ่งที่เปลี่ยนไปคือเหตุผลในการเลือกใช้ เราเลือกเพราะโครงสร้างข้อมูลชี้ว่านี่คือตัวเลือกที่ดีที่สุด ไม่ใช่เลือกเพราะมันเป็นปุ่มแรกในแถบเครื่องมือ

ถ้าเราข้ามขั้นตอนการอ่านโครงสร้างข้อมูลไป ปัญหาจะไม่แสดงให้เห็นตอนสร้างภาพ เพราะกราฟที่เลือกผิดประเภทก็ยังอาจดูสวยงามได้ แต่ปัญหาจะไปโผล่ในห้องประชุม เมื่อกราฟสื่อสารไม่ตรงกับประเด็นสำคัญของข้อมูล จนคนฟังต้องเอ่ยปากถามซ้ำว่า "สรุปแล้วกราฟนี้ต้องการบอกอะไร"

หนึ่งภาพต่อหนึ่งข้อสรุป ไม่ใช่หนึ่งภาพต่อหนึ่งคอลัมน์

กติกาอีกข้อที่นำไปใช้ได้ทันทีคือ ให้กำหนดจำนวนกราฟตาม ข้อสรุปแต่ละเรื่องที่แตกต่างกันอย่างชัดเจน ไม่ใช่ตามจำนวนคอลัมน์ที่มีในตารางข้อมูล

• 1 คำถามที่ต้องการคำตอบ: ใช้ 1 ภาพ
• มี 2–3 ข้อสรุปสำคัญ: ใช้ 2–3 ภาพ
• บทความขนาดยาวหรือรายงานฉบับเต็ม: ใช้ 4–6 ภาพ
• รายงานหนึ่งหน้ากระดาษ: กำหนดค่าเริ่มต้นไว้ไม่เกิน 6 ภาพ

จุดเด่นของหลักการนี้คือ ถ้ามีกราฟใหม่ที่สื่อข้อสรุปซ้ำกับกราฟเดิม สกิลนี้จะตัดกราฟนั้นทิ้งทันที ไม่ใส่เพิ่มเข้าไปเพียงเพื่อให้มีกราฟเยอะ ๆ

ลองย้อนกลับไปเปิดสไลด์ชุดล่าสุดที่คุณทำ แล้วลองนับดูใหม่ ไม่ต้องนับว่ามีกราฟกี่รูป แต่นับว่ามีข้อสรุปที่แตกต่างกันจริง ๆ กี่เรื่อง ถ้าตัวเลขทั้งสองอย่างนี้ไม่ตรงกัน แสดงว่ากราฟส่วนที่เกินมานั้นกำลังแย่งเวลาของคนดู โดยไม่ได้ให้ข้อมูลใหม่ที่เป็นประโยชน์เลย

Lupi กับ Glance: ออกแบบมาสำหรับการอ่านคนละแบบ

อีกหนึ่งปัจจัยสำคัญที่สกิลนี้แยกไว้อย่างชัดเจน แต่เวลาทำสไลด์เรามักนำมาปนกัน คือ เวลาที่คนดูมีสำหรับภาพนั้น และความเร็วที่ต้องอ่านให้เข้าใจ

กลุ่มแรกคือสไตล์อ่านละเอียดอย่าง Lupi ที่ออกแบบมาเพื่อให้คนหยุดดูและพิจารณาข้อมูลอย่างถี่ถ้วน โดยเน้นแสดงข้อมูลอย่างละเอียดทีละรายการและไม่รีบรวบยอด พร้อมเว้นพื้นที่สำหรับใส่ข้อความอธิบายไว้ข้างภาพ เอกสารระบุว่าผู้อ่านมักใช้เวลาดูภาพกลุ่มนี้นานกว่า 30 วินาที จึงเหมาะสำหรับรายงานประจำปี บทความขนาดยาว และเอกสารวิชาการ

ส่วนกลุ่มที่สองอย่าง Glance เป็นสไตล์อ่านเร็วที่ออกแบบมาเพื่อให้ตัดสินใจได้ภายในไม่กี่วินาที โดยจะสรุปและจัดกลุ่มข้อมูลมาให้เรียบร้อยแล้ว เน้นแสดงตัวเลขขนาดใหญ่ การจัดอันดับ และจุดที่ผิดปกติ เหมาะสำหรับรายงานสรุปประจำสัปดาห์และหน้าแดชบอร์ด

ทั้งสองกลุ่มนี้ไม่ได้ต่างกันแค่ "แบบเต็ม" กับ "แบบย่อ" เอกสารระบุชัดเจนว่า Glance ไม่ใช่ Lupi ฉบับตัดทอน แต่เป็นรูปแบบที่สร้างขึ้นมาเพื่อบริบทการอ่านที่ต่างกันตั้งแต่แรก ภาพในรายงานประจำปีกับภาพบนหน้าแดชบอร์ดจึงไม่ควรใช้หน้าตาเดียวกัน

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

นอกจากสองกลุ่มหลักนี้ ยังมีกลุ่มย่อยชื่อ Lupi Basics ที่นำรูปแบบกราฟพื้นฐานที่เราคุ้นเคย เช่น กราฟแท่ง กราฟเส้น กราฟพื้นที่ โดนัทชาร์ต กราฟการกระจาย รวมถึงกราฟสะสมยอดอย่าง Waterfall และแผนภาพความร้อนอย่าง Heatmap มาออกแบบใหม่ ตัวกราฟใช้เส้นที่บางลง วางตัวอักษรให้อ่านง่ายเหมือนงานสิ่งพิมพ์ และจัดองค์ประกอบให้นับจำนวนแต่ละหน่วยได้ชัดเจน เหมาะสำหรับชุดข้อมูลขนาดเล็กที่ยังต้องการให้คนดูเห็นข้อมูลแต่ละรายการในภาพ

กราฟ 4 ตระกูล พร้อมเทมเพลตรายงานอีก 12 รูปแบบ

ดัชนีของสกิลแบ่งรูปแบบกราฟทั้งหมด 49 แบบออกเป็น 4 ตระกูลดังนี้:

ส่วนฝั่งรายงาน มีเทมเพลตสำหรับจัดหน้ารายงานแยกไว้อีก 12 รูปแบบ ใช้รหัส R01 ถึง R12 มีให้เลือกทั้งภาษาอังกฤษและภาษาจีน เทมเพลตเหล่านี้ครอบคลุมตั้งแต่รายงานวิจัย บทสรุปงานวิจัย รายงานผลประกอบการประจำเดือน บทวิเคราะห์เศรษฐกิจและการเงิน บันทึกการพัฒนาผลิตภัณฑ์ แดชบอร์ด โปสเตอร์ ไปจนถึงข้อมูลส่วนบุคคล เช่น การออกกำลังกาย การเดินทาง และบันทึกสรุปตลอดทั้งปี ชื่อของแต่ละเทมเพลตจะบอกสไตล์การจัดหน้า ไม่ได้จำกัดว่าต้องใช้กับงานประเภทเดียวเท่านั้น ถ้าโครงสร้างข้อมูลเข้ากันได้ ก็สามารถนำเทมเพลตเดิมไปปรับใช้กับเนื้อหาแบบอื่นได้ทันที

ตามค่าเริ่มต้น สกิลจะสร้างกราฟเดี่ยวออกมาให้ 1 ภาพ แต่ถ้าเราสั่งชัดเจนว่าต้องการทำ "รายงาน", "รายงานประจำปี", "รายงานประจำเดือน", เอกสารเชิงลึกอย่าง "White Paper", "โปสเตอร์" หรือ "บทสรุปย่อ" ตัวสกิลจะเปลี่ยนไปเลือกโครงสร้างหน้ารายงานจากไฟล์ report-catalog.md แล้วจึงนำกราฟจากดัชนี 49 แบบมาประกอบลงในแต่ละช่องของหน้าให้โดยอัตโนมัติ

ข้อดีอีกอย่างคือ เราสามารถเข้าไปเปิดดูตัวอย่างจริงได้ก่อนตัดสินใจติดตั้ง เพราะไฟล์เทมเพลตทั้งหมดเป็น HTML ที่เปิดผ่านเว็บเบราว์เซอร์ได้ทันที และมีหน้ารวมเทมเพลตรายงานให้ดูทั้งเวอร์ชันภาษาอังกฤษและภาษาจีน ตัวอย่างหนึ่งที่คุณเปิดลองเล่นได้คือกราฟความสัมพันธ์อย่าง Force Graph ที่เราสามารถคลิกลากจุดข้อมูลไปมาได้ ส่วนใครที่เป้าหมายปลายทางคือการสร้างสไลด์นำเสนอทั้งชุดมากกว่าการทำกราฟเดี่ยว นั่นคืองานอีกประเภทหนึ่งที่มีสกิลเฉพาะทางอยู่แล้ว ตามที่เคยเล่าไว้ในบทความ 2 สกิลฟรีสำหรับ Claude Code ทำสไลด์

สีในกราฟทำหน้าที่สื่อความหมาย ไม่ใช่แค่ตกแต่งให้สวยงาม

ค่าเริ่มต้นของสกิลนี้คือชุดสี Mono เป็นเฉดสีขาว-เทา-ดำล้วน ไล่ตั้งแต่สีเทากระดาษไปจนถึงสีดำสนิท โดยใช้น้ำหนักเข้มอ่อนของสีบอกระดับความสำคัญ ส่วนตัวข้อมูลจริงจะสื่อสารผ่านตำแหน่ง ความยาว ความหนาแน่น และรูปทรงของกราฟเป็นหลัก

ถ้าต้องการใช้สี สกิลมีชุดสีสำเร็จรูปให้เลือก 3 ชุด โดยแต่ละชุดจะผูกกับโครงสร้างข้อมูลที่ต่างกัน:

• Porcelain: โทนสีฟ้าอมเขียวเฉดเดียวแบบไล่น้ำหนัก เหมาะสำหรับข้อมูลที่มีชุดเดียวหรือข้อมูลที่มีการจัดเรียงลำดับ
• Palm: โทนสีเขียวอมเหลืองแบบความอิ่มสีต่ำ เหมาะสำหรับข้อมูลที่มีการแบ่งหมวดหมู่ไม่กี่กลุ่มและไม่มีลำดับตายตัว
• Wire: โทนสีดำ-เทา พร้อมจุดเน้นสีส้มสะท้อนแสง เหมาะสำหรับภาพที่ต้องการเน้นจุดสำคัญเพียงจุดเดียวให้เด่นชัด

ตัว AI Agent สามารถเลือกชุดสีที่เหมาะสมให้เราได้เอง โดยวิเคราะห์จากโครงสร้างข้อมูลและบริบทของงาน ถ้ายังไม่แน่ใจว่าชุดสีไหนเหมาะที่สุด ตัว Agent จะถอยกลับมาใช้ชุดสีเริ่มต้นคือ Mono เสมอ เราจึงไม่จำเป็นต้องระบุเรื่องสีก่อนสั่งงาน และถ้าคุณมีสีประจำแบรนด์หรือรหัสสีเฉพาะที่ต้องใช้ ก็ส่งให้ Agent สร้างเป็นชุดสีเฉพาะได้เช่นกัน

กฎสำคัญที่ต้องจำไว้คือ ในกราฟหนึ่งชุดหรือรายงานหนึ่งหน้า ต้องใช้ระบบสีเดียวกันตลอดทั้งงาน ไม่ผสมหลายชุดสีในหน้าเดียวกัน

3 เงื่อนไขที่ควรรู้ก่อนนำไปใช้งานจริง

1. สัญญาอนุญาตการใช้งาน: สกิลนี้เผยแพร่ภายใต้ PolyForm Noncommercial License 1.0.0 ซึ่งอนุญาตให้นำไปใช้เพื่อการศึกษา ปรับแต่ง แบ่งปัน และใช้งานที่ไม่ใช่เชิงพาณิชย์ได้ฟรี แต่หากนำไปใช้ในเชิงพาณิชย์ จะต้องขออนุญาตจากผู้พัฒนาเป็นกรณีพิเศษ และเนื่องจากเอกสารไม่ได้ระบุชัดเจนว่า การนำกราฟไปใส่ในรายงานภายในบริษัทนับเป็นเชิงพาณิชย์หรือไม่ จึงควรสอบถามผู้พัฒนาโดยตรง ไม่ควรคาดเดาเอาเอง นอกจากนี้ ไลบรารีช่วยวาดกราฟอย่าง Chart.js, Apache ECharts และฟอนต์ Inter ที่ตัวสกิลเรียกใช้ ก็ยังมีสัญญาอนุญาตแยกต่างหากตามปกติ

2. การรองรับภาษาไทย: เทมเพลตรายงานในปัจจุบันมีเฉพาะภาษาอังกฤษและภาษาจีน ในเอกสารยังไม่ได้พูดถึงภาษาไทย ดังนั้นก่อนนำไปใช้กับงานจริงหรือส่งให้ลูกค้า ควรทดสอบสั่งให้ AI สร้างกราฟด้วยข้อมูลภาษาไทยดูก่อน แล้วเปิดไฟล์ HTML ตรวจสอบว่าตัวอักษร สระ และวรรณยุกต์ แสดงผลถูกต้องและอ่านออกหรือไม่ การทดสอบล่วงหน้าจะช่วยป้องกันปัญหาในวันที่ต้องส่งงานด่วน

3. การเชื่อมต่ออินเทอร์เน็ต: ไฟล์ผลลัพธ์บางรูปแบบไม่สามารถแสดงผลแบบออฟไลน์ได้ครบถ้วน กราฟในกลุ่ม Lupi และ Lupi Basics ส่วนใหญ่จะวาดด้วยภาพเวกเตอร์แบบ SVG ฝังไว้ในตัวไฟล์ ทำให้เปิดดูได้โดยไม่ต้องใช้อินเทอร์เน็ต ยกเว้นเทมเพลตกราฟกล่อง Treemap รหัส F13 ขณะที่กลุ่ม Glance, กราฟเชิงโต้ตอบอย่าง Circular กับ Force รวมถึงเทมเพลตรายงานรหัส R11 และ R12 จำเป็นต้องโหลดไลบรารี Chart.js หรือ Apache ECharts ผ่านอินเทอร์เน็ตขณะเปิดไฟล์ ถ้าไม่ได้เชื่อมต่ออินเทอร์เน็ต ส่วนที่ต้องพึ่งไลบรารีเหล่านี้จะแสดงผลได้ไม่ครบ ยกเว้นว่าจะฝังไฟล์ไลบรารีลงไปในโค้ดเอง ดังนั้นถ้าต้องนำไฟล์ไปเปิดนำเสนอในห้องประชุมที่ไม่แน่ใจเรื่องสัญญาณเน็ต ควรเปิดไฟล์ทดสอบไว้ล่วงหน้า

วิธีติดตั้งใน Claude Code หรือ Codex และตัวอย่างการสั่งงาน

ติดตั้งได้ 2 วิธี:

วิธีแรก: ติดตั้งด้วยคำสั่งบรรทัดเดียว

npx skills add https://github.com/larashero3-dotcom/lieflat-charts --skill lieflat-charts

วิธีที่สอง: พิมพ์สั่งให้ AI Agent ติดตั้งให้อัตโนมัติ

คัดลอกข้อความคำสั่งตามที่เอกสารของโปรเจกต์ระบุไว้ไปสั่ง Agent ได้ทันที:

Install lieflat-charts. Clone https://github.com/larashero3-dotcom/lieflat-charts to ~/.claude/skills/lieflat-charts, then verify that SKILL.md, templates/, catalog.md, and mono-tokens.js are present. For Codex, replace the installation path with ~/.codex/skills/lieflat-charts.

ข้อความนี้สั่งให้ Agent ทำ 3 ขั้นตอนในคำสั่งเดียว คือ โคลนโปรเจกต์ลงมา นำไปวางไว้ที่ ~/.claude/skills/lieflat-charts และตรวจสอบว่ามีไฟล์สำคัญครบถ้วน ถ้าคุณใช้ Codex แทน Claude Code ให้เปลี่ยนโฟลเดอร์ปลายทางเป็น ~/.codex/skills/lieflat-charts ตามที่ระบุไว้ในบรรทัดสุดท้าย

เมื่อติดตั้งเสร็จแล้ว ก็นำตัวอย่างคำสั่งไปปรับใช้ได้ทันที:

แบบแรก: สั่งให้สรุปข้อมูลจากเอกสาร

Read this paper, identify the strongest data findings, and build a complete HTML chart page.

คำสั่งนี้เป็นการส่งไฟล์เอกสารให้ AI ค้นหาประเด็นสำคัญในข้อมูล แล้วนำไปสร้างเป็นหน้ารายงาน HTML ให้อัตโนมัติ

แบบที่สอง: สั่งตามบริบทและเวลาที่ผู้อ่านใช้ดู

This is weekly reporting data. Make the ranking, changes, and anomalies readable within ten seconds.

วิธีสั่งแบบนี้สะท้อนแนวคิดสำคัญของ Lieflat Charts เพราะเราไม่ได้สั่งว่าจะเอากราฟแท่งหรือกราฟเส้น แต่เราบอกว่า ข้อมูลชุดนี้เป็นงานอะไร ต้องอ่านให้เจออะไร และมีเวลาอ่านกี่วินาที จากนั้นปล่อยให้ Agent ทำหน้าที่เลือกประเภทกราฟที่เหมาะสมจากทั้ง 49 แบบให้เอง ส่วนการอัปเดตเวอร์ชันในอนาคต เอกสารก็แนะนำคำสั่งไว้เช่นกัน โดยสั่งให้เข้าไปยังโฟลเดอร์สกิล รัน git pull เพื่อดึงโค้ดใหม่ แล้วรายงานสถานะล่าสุดกลับมา

สิ่งที่ควรทำก่อนเริ่มสร้างกราฟครั้งถัดไป

แม้รายละเอียดทั้งหมดนี้จะระบุไว้ในเอกสารของโปรเจกต์ Lieflat Charts บน GitHub แต่สิ่งที่จะช่วยให้เห็นผลชัดเจนที่สุด คือสิ่งที่คุณเริ่มทำได้ทันทีโดยไม่ต้องรอติดตั้งอะไรเลย

ก่อนเปิดโปรแกรมทำกราฟครั้งถัดไป ลองเขียนข้อสรุปสำคัญที่อยากให้คนดูจำให้ได้ โดยย่อให้เหลือประโยคเดียว แล้วค่อยถามตัวเองว่า กราฟแบบไหนช่วยพิสูจน์ประโยคนั้นได้ชัดเจนที่สุด

กราฟที่ไม่สามารถพิสูจน์หรือสนับสนุนข้อสรุปใดได้เลย ไม่ใช่กราฟที่ออกแบบยังไม่สวยพอ แต่เป็นภาพที่ไม่จำเป็นต้องมีตั้งแต่แรก

ที่มา:

• บทความ GitHub - larashero3-dotcom/lieflat-charts: Data visualization Skill for AI Agents จาก GitHub
• บทความ lieflat-charts/README.en.md at main จาก GitHub