Flint ของ Microsoft: ภาษากลางสำหรับให้ AI agent วาดกราฟให้สวยได้จริง — MCP server 5 tool เรนเดอร์ในเครื่อง ไม่ส่งข้อมูลออก

ใครที่เคยสั่ง AI agent ว่า “ทำกราฟจากข้อมูลชุดนี้ให้หน่อย” จะรู้ปัญหานี้ดี — มันวาดออกมาได้ แต่แกน y เริ่มที่ค่าประหลาด ป้ายชื่อทับกัน สีชนกันจนอ่านไม่ออก หรือไม่ก็พ่น Vega-Lite spec ยาวเป็นร้อยบรรทัดที่พัง ๆ ถูก ๆ แล้วต้องนั่งไล่แก้เอง

Flint จาก Microsoft Research (ร่วมกับ IDEAS Lab มหาวิทยาลัย Renmin ของจีน) พยายามแก้ปัญหานี้ที่รากด้วยแนวคิดง่าย ๆ: อย่าให้ agent เขียน chart config โดยตรง ให้มันเขียนสเปกที่สั้นและมีความหมายเชิงความหมาย แล้วปล่อยให้คอมไพเลอร์เป็นคนตัดสินใจเรื่องสวยงาม

โปรเจกต์นี้เปิดสาธารณะมาตั้งแต่ปลายมิถุนายน (รีลีสแรก 0.1.1 วันที่ 28 มิถุนายน 2026, ล่าสุด 0.4.0 วันที่ 24 กรกฎาคม / npm 0.4.1 วันที่ 27 กรกฎาคม) แต่เพิ่งขึ้นหน้าแรก Hacker News วันที่ 1 สิงหาคม 2026 และมีดาวสะสมแล้วราว 2,700 ดวง — เขียนด้วย TypeScript สัญญาอนุญาต MIT

แนวคิด: intermediate language ไม่ใช่ chart library อีกตัว

Flint ไม่ได้แข่งกับ Vega-Lite หรือ ECharts แต่วางตัวเป็น ชั้นกลาง ที่ compile ลงไปหาพวกนั้นอีกที รองรับ backend: Vega-Lite, ECharts, Chart.js, Plotly และ Excel-native

สเปกหนึ่งชุด (ChartAssemblyInput) ประกอบด้วยสามส่วน:

{
  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 }
  }
}

หัวใจอยู่ที่ semantic_types — Flint มี semantic type กว่า 70 แบบ (เช่น Rank, Temperature, Price, Country) การบอกว่าคอลัมน์นี้คือ “ประเทศ” ไม่ใช่แค่ “สตริง” ทำให้คอมไพเลอร์รู้เองว่าควรใช้ชุดสีแบบ categorical ควรเรียงยังไง และควรจัดวางป้ายแบบไหน สิ่งที่ปกติ agent ต้องเดาและเดาผิดบ่อย — scale, axis, spacing, label — ถูกอนุมานจากข้อมูลกับ semantic type แทน

เบื้องหลังมีเปเปอร์รองรับ: Flint: A Semantics-Driven Data Visualization Intermediate Language โดย Yunhai Wang, Kecheng Lu, Junhao Chen, Alper Sarikaya และ Chenglong Wang ส่งขึ้น arXiv เมื่อ 22 กรกฎาคม 2026

MCP server: 5 tool แทน 26+ และไม่ส่งข้อมูลออกนอกเครื่อง

ส่วนที่นักพัฒนาไทยน่าจะได้ใช้จริงที่สุดคือแพ็กเกจ flint-chart-mcp ซึ่งรันได้ทันทีโดยไม่ต้องติดตั้ง:

npx -y flint-chart-mcp

README ของมันชี้ปัญหาของ chart MCP server เจ้าอื่นไว้ตรงมาก: ส่วนใหญ่ เปิด tool หนึ่งตัวต่อกราฟหนึ่งชนิด รวมกันเกิน 26 ตัว เพราะแต่ละกราฟมี schema ต่างกัน และหลายตัว อัปโหลด config ของคุณไปเรนเดอร์ที่เซิร์ฟเวอร์ระยะไกล Flint มี schema เดียวครอบกราฟราว 40 ชนิดข้ามทุก backend จึงเหลือ tool แค่ห้าตัว:

Tool	ทำอะไร
render_chart	คืน PNG อินไลน์ หรือ SVG
compile_chart	คืน spec ดิบของ backend นั้น ๆ พร้อม warning
validate_chart	ตรวจว่าสเปกใช้ได้ไหม พร้อมขนาดที่คำนวณได้
list_chart_types	ลิสต์ชนิดกราฟและ encoding channel ต่อ backend
create_chart_view	เปิด MCP App แบบอินเทอร์แอกทีฟ (พรีวิว SVG สด + แผงปรับแต่ง)

การเรนเดอร์เกิดขึ้นในโปรเซสเดียวกันบนเครื่องคุณ ข้อมูลไม่ออกจากโฮสต์ ซึ่งเป็นเรื่องใหญ่สำหรับใครที่ต้องทำกราฟจากข้อมูลลูกค้าหรือข้อมูลภายใน และเซิร์ฟเวอร์ไม่ดึง URL ระยะไกลให้เลย — data.url อ่านได้เฉพาะไฟล์ในเครื่อง (.json, .csv, .tsv) ถ้าจะเอาไปวางบนเซิร์ฟเวอร์ที่ไม่ไว้ใจ agent มีแฟล็ก --disable-file-reference ให้ปิดการอ่านไฟล์ทิ้งทั้งหมด เหลือแค่ข้อมูลที่ inline มาใน data.values

อีกจุดที่ออกแบบมาดี: Flint แถม agent skill มาในตัว เปิดเป็น MCP resource ชื่อ flint://agent-skill และ prompt ชื่อ author_flint_chart — README แนะนำให้ client โหลด skill นี้ก่อนสั่ง agent เรียก tool เพราะ skill คือส่วนที่ สอนวิธีเขียนสเปก ส่วน MCP server คือส่วนที่ คอมไพล์และเรนเดอร์ แยกหน้าที่กันชัดเจน

ข้อจำกัดที่ควรรู้: backend chartjs เรนเดอร์ได้เฉพาะ PNG เท่านั้น (เอนจินมันไม่มี SVG output)

รีลีส 0.3 และ 0.4 เพิ่มอะไร

• 0.3.0 (19 ก.ค.) — MCP App สลับชนิดกราฟและแก้ property ได้ในที่ โดยสเปก Flint ต้นทางยังสั้นเหมือนเดิม เช่นเปลี่ยน Line Chart ที่แน่นเกินไปเป็นแถว Sparkline ได้โดยไม่ต้องสร้างกราฟใหม่ พร้อมเว็บไซต์และเอกสารภาษาจีน
• 0.4.0 (24 ก.ค.) — เพิ่ม backend Plotly (กราฟ 38+ ชนิด) และ backend Excel (เทมเพลตเนทีฟ 18 แบบ) พร้อม widget สลับชนิดกราฟใน MCP server

นอกจาก flint-js ในรีโปยังมี flint-py สำหรับฝั่ง Python ด้วย

มุมมอง AI Curator

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

ความต่างระหว่าง “26 tool” กับ “5 tool” ไม่ใช่แค่เรื่องความสวยงามของ API มันคือเรื่องความน่าเชื่อถือโดยตรง ทุก tool ที่เพิ่มเข้าไปคือ schema ที่โมเดลต้องเลือกให้ถูกและ token ที่กินพื้นที่ context — และอัตราการเลือก tool ผิดจะแย่ลงตามจำนวน tool เสมอ การยุบให้เหลือ schema เดียวที่ครอบกราฟ 40 ชนิด คือการย้ายความซับซ้อนจาก “สิ่งที่โมเดลต้องตัดสินใจ” ไปเป็น “สิ่งที่คอมไพเลอร์ตัดสินใจ” ซึ่งเป็นทิศทางที่ถูก ใครกำลังเขียน MCP server ของตัวเองอยู่ ควรอ่านหัวข้อ “Why a small tool surface” ใน README ของมันสักรอบ

เรื่องเรนเดอร์ในเครื่องก็ตรงกับบริบทไทยพอดี องค์กรไทยจำนวนมาก โดยเฉพาะสายการเงิน สาธารณสุข และหน่วยงานรัฐ ติดอยู่ตรงที่ว่าเครื่องมือ AI ที่ใช้งานง่ายมักต้องส่งข้อมูลออกไปประมวลผลข้างนอก ซึ่งชน PDPA และนโยบายภายในเต็ม ๆ MCP server ที่บอกได้ว่า “ข้อมูลไม่ออกจากโฮสต์” และมีแฟล็กปิดการอ่านไฟล์ให้ด้วย คือของที่ผ่านฝ่าย compliance ได้ง่ายกว่ามาก

สิ่งที่ผมยังตั้งข้อสังเกต: เปเปอร์เคลมว่า Flint “ทำให้การสร้างกราฟง่ายขึ้นโดยไม่เสียคุณภาพเชิงภาพ” แต่บทคัดย่อบน arXiv ไม่ได้ให้ตัวเลขเปรียบเทียบตรง ๆ ว่า agent ที่ใช้ Flint ทำกราฟถูกต้องกว่า agent ที่เขียน Vega-Lite เองกี่เปอร์เซ็นต์ ซึ่งเป็นตัวเลขที่คนจะตัดสินใจรับไปใช้อยากเห็นที่สุด และเวอร์ชันยังเป็น 0.4.x — API ยังมีสิทธิ์ขยับ อย่าเพิ่งฝัง ChartAssemblyInput ลึกเข้าไปในระบบโปรดักชันโดยไม่มีชั้นห่อของตัวเอง

แต่สำหรับการใช้งานที่ตรงไปตรงมา — ต่อเข้ากับ agent ที่ทำรายงานหรือวิเคราะห์ข้อมูล — npx -y flint-chart-mcp บรรทัดเดียวแล้วลองดูเลย ต้นทุนการทดลองแทบเป็นศูนย์

แหล่งข่าว

• microsoft/flint-chart — GitHub (MIT)
• Flint: A Visualization Language for the AI Era — เว็บไซต์และเอกสาร
• Flint: A Semantics-Driven Data Visualization Intermediate Language — arXiv:2607.20775
• Flint 0.4 release notes — Plotly และ Excel backend