Flint ของ Microsoft Research ให้เอเจนต์ AI สร้างกราฟใน Excel ที่เปิดไฟล์แล้วแก้ตัวเลขต่อได้จริง

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

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

Flint เป็นผลงานร่วมของ Microsoft Research กับ IDEAS Lab จากมหาวิทยาลัย Renmin ในจีน โค้ดใช้สัญญาอนุญาต MIT ต้นเดือนสิงหาคม 2026 มีคนกดดาวบน GitHub ราว 3,400 ดวง

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

สเปกกราฟยิ่งยาว เอเจนต์ยิ่งพลาด

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

คนที่เคยแก้กราฟใน Excel จนเหนื่อยน่าจะเห็นภาพ ต่างกันตรงที่ในโค้ดต้องพิมพ์ค่าพวกนี้ออกมาทุกตัว

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

ผลคือกราฟหน้าตาแปลกโดยไม่รู้ว่าพลาดตรงไหน เพราะสเปกยาวเกินกว่าจะไล่อ่านไหว

รีโป microsoft/flint-chart ซึ่งเป็นหน้าเก็บโค้ดของ Flint บน GitHub บอกไว้ตรงๆ ว่าไม่ต้องให้เอเจนต์หรือโปรแกรมเมอร์ตั้งค่าละเอียดพวกนี้เอง คอมไพเลอร์ของ Flint จะคำนวณค่าที่เหมาะสมให้ โดยดูจากข้อมูลจริง ความหมายของข้อมูล ชนิดกราฟ และการจับคู่คอลัมน์กับแกน

งานวิจัยของ Flint ที่เผยแพร่บนเว็บไซต์ arXiv อธิบายอีกมุมว่า ระบบทำกราฟรุ่นก่อนเดาค่าตั้งต้นจากลักษณะคร่าวๆ ของข้อมูล วิธีนี้พลาดง่าย ถ้าข้อมูลจริงไม่ตรงกับที่เดา หน้าตากราฟก็ผิดไปจากที่ควรเป็นทันที

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

semantic type บอกว่าคอลัมน์คือราคาหรืออันดับ

Flint ย้ายสิ่งที่ต้องบอกไปอีกชั้น เราไม่สั่งว่ากราฟต้องหน้าตาแบบไหน แต่เลือก semantic type เพื่อบอกว่าข้อมูลหมายถึงอะไร

Flint เตรียม semantic type ไว้ให้เลือกเกิน 70 แบบ เช่น Rank ใช้กับอันดับ · Price ใช้กับราคา · Temperature ใช้กับอุณหภูมิ · Country ใช้กับชื่อประเทศ

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

โค้ดตัวอย่างในรีโปสั้นแค่นี้

import { assembleVegaLite } from 'flint-chart';

const spec = assembleVegaLite({
  data: { values: myData },
  semantic_types: { weight: 'Quantity', mpg: 'Quantity', origin: 'Country' },
  chart_spec: {
    chartType: 'Scatter Plot',
    encodings: { x: { field: 'weight' }, y: { field: 'mpg' }, color: { field: 'origin' } },
    baseSize: { width: 400, height: 300 },
  },
});

แม้ไม่เขียนโปรแกรมก็พออ่านได้ บรรทัดกลางบอกว่าน้ำหนักกับอัตราสิ้นเปลืองเป็นปริมาณ ต้นทางเป็นชื่อประเทศ

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

ตัวอย่างในเอกสารของโปรเจกต์ใช้ข้อมูลผู้ใช้ใหม่รายเดือนของเกมหลายสิบเกม

สเปก Flint ทางซ้ายบอกสั้นๆ ว่า game เป็นหมวดหมู่ period เป็นเดือนปี และ newUsers เป็นตัวเลขกำไรขาดทุนที่ขึ้นลงได้สองทาง จากนั้นสั่งให้ทำฮีตแมปเป็นตารางสี

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

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

สเปกเดียวส่งออกได้ห้าแบบ รวมกราฟ Excel ที่แก้ต่อได้

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

import { assembleECharts, assembleChartjs, assemblePlotly, assembleExcel } from 'flint-chart';

const echartsOption = assembleECharts(input);
const excelArtifact = assembleExcel(input);

ปลายทางเว็บมีสี่ตัว ได้แก่ Vega-Lite, ECharts, Chart.js และ Plotly ทั้งหมดใช้วาดกราฟบนเว็บหรือแอป ทีมพัฒนาใช้ตัวไหนก็เลือกตัวนั้น

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

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

กราฟ Excel แก้ตัวเลขในตาราง เปลี่ยนสี ย้ายป้าย หรือส่งให้คนอื่นแก้ต่อได้เลย

เวอร์ชัน 0.4.0 วันที่ 24 กรกฎาคม 2026 เพิ่มกราฟ Plotly อีก 38 แบบ พร้อมเทมเพลต Excel ที่เปิดแก้ได้อีก 18 แบบ

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

ต่อ Flint กับเอเจนต์ผ่าน MCP server

Flint ติดตั้งได้สองแบบ ขึ้นกับว่าใครเป็นคนเรียกใช้

# ใช้เป็นไลบรารีในโปรเจกต์ JavaScript หรือ TypeScript
npm install flint-chart

# ใช้เป็น MCP server ให้เอเจนต์เรียก
npx -y flint-chart-mcp

บรรทัดล่างเหมาะกับคนที่ไม่ได้เขียนโปรแกรมเอง เพราะ Model Context Protocol เป็นมาตรฐานกลางที่ให้เอเจนต์เรียกเครื่องมือภายนอกได้จากในบทสนทนา

วิธีนี้คล้าย LINE Bot MCP Server ที่ให้ AI สั่ง LINE OA ส่งข้อความ แต่ Flint ส่งกราฟกลับมาแทน

ตั้งค่าเสร็จก็สั่งเอเจนต์วาดกราฟผ่านแชทได้เลย

เราแปะข้อมูลเป็นแถวๆ เข้าไปตรงๆ ผ่าน data.values หรือชี้ไปที่ไฟล์ในเครื่องอย่าง JSON, CSV หรือ TSV ผ่าน data.url ก็ได้ ผลลัพธ์เลือกได้ว่าจะเป็นหน้ากราฟที่กดปรับได้ ภาพ PNG หรือ SVG หรือสเปกดิบของระบบวาดกราฟปลายทาง

ถ้าเครื่องมือยังไม่รองรับ MCP รีโปมี agent skill สำรองอยู่ที่ agent-skills/flint-chart-author/SKILL.md นำไปให้เอเจนต์อ่านก่อนทำงานได้ แนวคิดเดียวกับ สกิลเสริมที่ทำให้เอเจนต์ออกไปค้นเว็บได้เอง

ถ้าอยากเห็นของจริงก่อนตัดสินใจ เว็บโปรเจกต์ของ Flint มีแกลเลอรีกราฟและตัวแก้สเปกให้ลอง

สิ่งที่ต้องมี และเรื่องที่รีโปยังไม่ตอบ

Flint ไม่ใช่แอปที่สมัครแล้วใช้ได้ทันที ต้องติดตั้งเองในเครื่องหรือโปรเจกต์ และต้องติดตั้ง Node เวอร์ชัน 18 ขึ้นไปไว้ในเครื่องก่อน

คนที่ไม่เคยติดตั้งของผ่านหน้าต่างคำสั่งจะเจอความยากตั้งแต่ต้น ก่อนเห็นกราฟใบแรก

ฝั่ง Python ยังไม่มีชุดติดตั้ง ในรีโปมีเพียงโค้ดเวอร์ชัน Python ที่ทำไว้ให้ดูใน packages/flint-py/

คนที่ใช้ Python ทำข้อมูลเป็นหลักจึงยังต้องรอ ส่วนงานวิจัยเบื้องหลังยังเป็นฉบับบน arXiv ลงวันที่ 22 กรกฎาคม 2026

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

ถ้าต้องการให้กราฟออกมาตรงตามแบบทุกมิลลิเมตร ต้องปรับคุณสมบัติกราฟหรือแก้สเปกปลายทางเอง

กราฟที่แก้ไม่ได้ ราคาของมันมาทีหลัง

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

พอทำถึงใบที่สิบ ก็จะเห็นเวลาที่ประหยัดได้ชัดขึ้น

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

ที่มา:

• โปรเจกต์ microsoft/flint-chart บน GitHub
• เปเปอร์ Flint: A Semantics-Driven Data Visualization Intermediate Language บน arXiv