AIエージェントが人間にとって理解しやすいシンプルなチャート仕様記述から表現力豊かで見栄えの良いグラフを確実に生成できる可視化中間言語「Flint」、50種類のチャートタイプをサポートしVega-Lite・ECharts・Chart.jsなどでレンダリング可能＆MCPサーバーあり

AIにグラフを生成させる場合、データだけでなく軸の範囲やラベル・余白・配色といった細かな指定まで生成させると仕様が長大になります。データが「年月」「利益」「順位」など何を意味するかと作りたいチャートだけを簡潔に指定し、細かな表示設定をコンパイラに任せられる可視化中間言語「Flint」が公開されています。

Flint: A Visualization Language for the AI Era
https://microsoft.github.io/flint-chart/

microsoft/flint-chart: Flint is a visualization language that lets AI agents reliably create expressive, good-looking charts from simple, human-editable chart specs.
https://github.com/microsoft/flint-chart

◆エディター
https://microsoft.github.io/flint-chart/#/editor

◆Flintでグラフを作成してみる
Flintがどのようにグラフを生成するのか公式サイトの「Editor」にアクセスし実際に試してみます。

今回はデモとして2026年1月から6月までの仮の売上を棒グラフにします。Flintでは「data」にグラフ化する値、「semantic_types」にデータの意味、「chart_spec」に作成するグラフと縦軸・横軸へ割り当てる項目を指定します。以下のJSONを左サイドにあるFLINT SPECに入力すると…

{
  "data": {
    "values": [
      {"month": "2026-01", "revenue": 120000},
      {"month": "2026-02", "revenue": 150000},
      {"month": "2026-03", "revenue": 135000},
      {"month": "2026-04", "revenue": 180000},
      {"month": "2026-05", "revenue": 210000},
      {"month": "2026-06", "revenue": 195000}
    ]
  },
  "semantic_types": {
    "month": "YearMonth",
    "revenue": "Price"
  },
  "chart_spec": {
    "chartType": "Bar Chart",
    "encodings": {
      "x": {"field": "month"},
      "y": {"field": "revenue"}
    },
    "baseSize": {
      "width": 480,
      "height": 320
    }
  }
}

PREVIEWに選択しているライブラリのグラフが表示され、OUTPUTにFLINT SPECのJSONから選択したライブラリ用のデータに変換されたデータが表示されます。

Chart.jsを選択した場合は以下のようになりました。

このようにFlint形式のデータを用意してFlintコンパイラを通すことで、Vega-LiteやEChartsなど各種グラフ生成ライブラリ向けの設定データへ簡単に変換できます。

◆Flintの特徴
・Semantic Types
各種データを単なる数値や文字列として扱うのではなく、「売上」「年月」「順位」「温度」などデータの意味を指定することで軸・表示形式・色・集計方法などをFlint側で判断できます。

・自動レイアウト
データ数や表示領域に応じて、ラベル・余白・棒の幅・凡例などを調整。

・複数のレンダリング先
Vega-Lite・ECharts・Chart.js・Plotly・Excelへ変換可能。

・50種類のチャート
Bar Chart・Heatmap・Waterfall・Gantt・Sankey・Sunburst・Candlestick・Mapなど50種類のチャートが扱えます。

・テーマ
The Economist、Nature、McKinseyなどのテーマで見た目を変更が可能。

◆AIエージェントからMCPで利用
Flintはユーザーが細かなグラフ設定をゼロから記述するための言語というより、AIエージェントがグラフを生成する際の中間言語として設計されています。AIエージェントはユーザーの指示から簡潔なFlint形式のデータを生成し、Flintコンパイラが軸・スケール・レイアウトなどの詳細を補完してVega-LiteやEChartsなど各種グラフ生成ライブラリ向けの設定へ変換します。

この仕組みをAIエージェントから利用するためにMCPサーバーも用意されており、以下のコマンドで起動できます。

npx -y flint-chart-mcp

今回は例としてClaude Codeを利用して以下のプロンプトを実行。

Flintを使って以下の月別売上をJSONにしてください。

2026年1月: 120万円
2026年2月: 150万円
2026年3月: 135万円
2026年4月: 180万円
2026年5月: 210万円
2026年6月: 195万円

結果として以下のJSONファイルが作成されました。

{
  "data": {
    "values": [
      { "月": "2026年1月", "売上（万円）": 120 },
      { "月": "2026年2月", "売上（万円）": 150 },
      { "月": "2026年3月", "売上（万円）": 135 },
      { "月": "2026年4月", "売上（万円）": 180 },
      { "月": "2026年5月", "売上（万円）": 210 },
      { "月": "2026年6月", "売上（万円）": 195 }
    ]
  },
  "chart_spec": {
    "chartType": "Bar Chart",
    "title": "月別売上推移",
    "subtitle": "2026年1月〜6月、万円",
    "encodings": {
      "x": { "field": "月" },
      "y": { "field": "売上（万円）" }
    },
    "chartProperties": {
      "showLabels": true
    },
    "baseSize": {
      "width": 500,
      "height": 350
    }
  },
  "options": {
    "addTooltips": true
  },
  "semantic_types": {
    "月": "Date",
    "売上（万円）": "Quantity"
  }
}

グラフ化すると以下のような出力になります。

プロンプトで「Vega-Lite用のデータに変換してください」を実行すると以下のデータが出力されました。

{
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "月",
      "type": "ordinal",
      "sort": null
    },
    "y": {
      "field": "売上（万円）",
      "type": "quantitative",
      "scale": { "zero": true },
      "axis": { "format": ",.12~g" }
    }
  },
  "config": {
    "view": { "continuousWidth": 500, "continuousHeight": 340 },
    "axisX": { "labelLimit": 100, "labelFontSize": 10, "titleFontSize": 11 },
    "axisY": { "labelFontSize": 10, "titleFontSize": 11, "labelSeparation": 6 },
    "legend": { "labelFontSize": 10, "titleFontSize": 11 },
    "facet": { "spacing": 34 }
  },
  "width": { "step": 33 },
  "title": {
    "text": "月別売上推移",
    "subtitle": ["2026年1月〜6月、万円"]
  },
  "data": {
    "values": [
      { "月": "2026年1月", "売上（万円）": 120 },
      { "月": "2026年2月", "売上（万円）": 150 },
      { "月": "2026年3月", "売上（万円）": 135 },
      { "月": "2026年4月", "売上（万円）": 180 },
      { "月": "2026年5月", "売上（万円）": 210 },
      { "月": "2026年6月", "売上（万円）": 195 }
    ]
  }
}

このようにFlintはAIエージェントが人の指示から簡潔な可視化仕様のデータを作成し、その内容をVega-LiteやEChartsなど各種グラフ生成ライブラリ向けのデータに変換することで、安定したグラフ生成を支援します。

◆Flintの評価
ソーシャル系ニュースサイトのHacker Newsでは、Flintについてさまざまな議論が行われており、「Semantic Typesは書式設定要素として非常に便利です」という仕様に対する評価や「正直なところ、この話の意図がよく分かりません。私はデータ可視化にLLMを幅広く使用してきましたが、問題に遭遇したことはありません。」とそもそも中間処理を行う必要があるのかという疑問などが寄せられていました。