Microsoft เปิด Flint — ภาษากลางให้ AI เอเจนต์วาดกราฟให้ตรงและสวยด้วยสเปกไม่กี่บรรทัด
สารบัญ
สรุปให้ไว
Flint คือภาษากลางวาดกราฟ
Microsoft Research เปิดโอเพนซอร์สให้ AI เอเจนต์สร้างกราฟจากสเปกสั้น ๆ ที่คนก็แก้เองต่อได้
แยกความหมายออกจากเรขาคณิต
AI เขียนแค่ "คอลัมน์นี้คือรายได้ อันนี้คือ % เปลี่ยนแปลง" ส่วนแกน สเกล สี ปล่อยให้คอมไพเลอร์คิดเอง
ต่อ 1 บรรทัดผ่าน MCP
`claude mcp add flint` แล้ววาดกราฟได้ในแชต ประมวลผลในเครื่อง ข้อมูลไม่หลุดออกนอกเครื่อง
ออกได้หลาย backend
คอมไพล์เป็น Vega-Lite, ECharts, Chart.js, Plotly และกราฟ Excel ได้จากสเปกเดียว
01มันคืออะไร
Flint คือ "ภาษากลาง" (intermediate language) สำหรับสร้างกราฟที่ Microsoft Research ทำร่วมกับ IDEAS Lab ของ Renmin University แล้วเปิดเป็นโอเพนซอร์ส เป้าหมายคือแก้ปัญหาคลาสสิกเวลาให้ AI เอเจนต์วาดกราฟ คือมันขอ waterfall chart อันเดียว แต่ได้โค้ด Vega-Lite ร้อยกว่าบรรทัดที่เรนเดอร์ออกมาเป็นหน้าเปล่า
ไอเดียหลักคือมองว่าการสร้างกราฟมีสองงานซ่อนอยู่ งานแรกคือ "ความหมาย" เช่น คอลัมน์นี้คือเดือน อันนั้นคือรายได้ อีกอันคือเปอร์เซ็นต์การเปลี่ยนแปลง ซึ่ง LLM ทำได้ดีมาก งานที่สองคือ "เรขาคณิต" เช่น แกน ขนาดขั้น โดเมนของสเกล ระยะห่างป้ายกำกับ ไล่เฉดสี ซึ่ง LLM มักพลาดตรงนี้เอง ทีมงานเจอกำแพงนี้เองตอนสร้างเอเจนต์วิเคราะห์ข้อมูล วัดได้ว่ากราฟออกมาสวยราว 80% ฟังดูดีจนกระทั่งนึกถึงว่าผู้ใช้จริงเจอกราฟพังหนึ่งในห้าครั้ง
02มันทำงานยังไง
Flint แยกสองงานนี้ออกจากกัน โมเดลเขียนแค่ JSON สั้น ๆ ประมาณสิบบรรทัดที่บอกเฉพาะ "ความหมาย" ผ่าน semantic type เช่น quarter, price, rank, percentage change ซึ่งมีให้เลือกกว่า 70 แบบ จากนั้นคอมไพเลอร์แบบ deterministic จะรับช่วงต่อ ตัดสินใจเรื่องเรขาคณิตทั้งหมดเอง แล้วปล่อยออกมาเป็นสเปกจริงของ Vega-Lite, ECharts, Chart.js หรือ Plotly สรุปสั้น ๆ คือโมเดลรับผิดชอบความหมาย คอมไพเลอร์รับผิดชอบคณิตศาสตร์
จุดที่เห็นพลังชัดคือ พอเปลี่ยน semantic type แค่คำเดียว เช่นจาก quantity เป็น percentage change คอมไพเลอร์จะสลับชุดสีเป็นแบบ diverging เขียนรูปแบบตัวเลขใหม่ และปรับสเกลแกนให้เองทั้งหมด การติดตั้งก็สั้นบรรทัดเดียวคือ `claude mcp add flint` เป็น TypeScript ล้วนรันบน Node 18 เรนเดอร์ในเครื่อง ข้อมูลไม่ต้องออกไปไหน มีทูลชื่อ create chart view ที่เปิดพาเนลแก้กราฟแบบ interactive ต่อได้โดยไม่ต้องสั่ง prompt ใหม่และไม่เปลือง token เพิ่ม
Flint เด่นตรงไหน
- ★
สเปกสั้นกว่ามาก
waterfall chart ที่ Vega-Lite ต้องเขียนทะลุร้อยบรรทัด เหลือราวสิบบรรทัดใน Flint เพราะคอมไพเลอร์รับส่วนยากไปหมด
- ★
ไม่ผูกกับเจ้าใดเจ้าหนึ่ง
สเปกเดียวเลือก backend ได้หลายตัว และผลลัพธ์เป็นสเปก Vega-Lite/ECharts/Chart.js จริงที่เอาไปแก้มือต่อได้
- ★
ทำงานในเครื่อง ปลอดภัยกับข้อมูล
เรนเดอร์ locally มีแค่ 5 ทูล หนึ่ง schema ไม่ต้องส่งข้อมูลไปประมวลผลบนเซิร์ฟเวอร์คนอื่น
- ★
ต่อกับเอเจนต์ผ่าน MCP
มี flint-chart-mcp ให้เอเจนต์สร้าง ตรวจ และเรนเดอร์กราฟได้จากแชตหรือหน้าเขียนโค้ดโดยตรง
03จุดที่ต้องระวัง
ต้องเข้าใจก่อนว่านี่เป็นงานวิจัย ไม่ใช่โปรดักต์สำเร็จรูป โปรเจกต์อายุราวสองเดือน เวอร์ชันยังเป็น 0.28 มีผู้ร่วมพัฒนาราว 28 คน และยังไล่แก้บั๊กอยู่ เช่นเคสที่สเปกเดียวกันเรนเดอร์ออกมาไม่เหมือนกันระหว่าง Vega-Lite กับ ECharts ส่วนตัวเลขที่ฟังดูหวือหวาอย่าง "จากแสน token เหลือสองร้อยต่อกราฟ" ก็มีเงื่อนไขแฝงอยู่ ไม่ใช่ตัวเลขที่การันตีทุกกรณี
04เกี่ยวอะไรกับเรา
ฟันธง: คนที่ให้ AI ช่วยทำ dashboard หรือรายงานที่มีกราฟบ่อย ๆ ควรลองเลย โดยเฉพาะข้อดีเรื่องประมวลผลในเครื่อง เพราะข้อมูลบริษัทหรือลูกค้าไม่ต้องหลุดออกไปให้เซิร์ฟเวอร์ปลายทางเห็น นั่นตรงกับหลักที่เราย้ำเสมอเรื่องความปลอดภัยของข้อมูลอ่อนไหว ลองติดตั้ง MCP แล้วโยน CSV เข้าไปขอกราฟดูสักงานสองงานเพื่อวัดว่ามันเข้ากับ workflow เราไหม
แต่ยังไม่ควรเอาไปวางในงาน production ที่พลาดไม่ได้ตอนนี้ เพราะยังเป็นงานวิจัยและยังมีบั๊กข้ามเรนเดอร์เรอร์อยู่ ที่สำคัญคือ AI ยังเป็นคนใส่ semantic type ให้ ถ้ามันติดป้ายผิด เช่นบอกว่าคอลัมน์เป็นราคาแทนที่จะเป็นเปอร์เซ็นต์ กราฟก็เพี้ยนได้ ตั้ง Human Gate ให้คนตรวจว่ากราฟสื่อความหมายถูกก่อนส่งให้ลูกค้าหรือขึ้นรายงานจริงเสมอ
โปรเจกต์ open-source
อยากลองเองไหม? โปรเจกต์นี้เป็น open-source โหลด repo ทางการมาลองได้เลย
ดูบน GitHub → →