想定読者

Microsoft Fabric で BI レポートのたたき台（モックアップ＝作り込む前に見た目や項目をすり合わせる試作）や Data Agent を扱うエンジニア・情シス担当（AI は MCP・Claude Code などから使う想定）

「AI にグラフを描かせると毎回スタイルがブレる／設定が壊れる」に心当たりのある方

Fabric Data Agent の標準ビジュアル応答を、もう少し自由な見た目にしたい方

TL;DR

Flint は Microsoft Research が公開した「AI 時代の可視化のための中間言語」（MIT ライセンス・バージョン 0.2・研究段階）です。data + セマンティック型 + chart_spec の 3 点だけ書くと、コンパイラが軸・スケール・配色・書式・レイアウトを自動導出し、Vega-Lite / Apache ECharts / Chart.js の完成度の高い仕様に変換してくれます。
発想は「LLM に低レベル設定を数百個書かせると脆い → 意図（＝データの意味）だけ書かせて、詳細はコンパイラに委ねる」です。MCP サーバー flint-chart-mcp が付属し、Claude Code から直接呼べます。
私が使っている BI レポートのたたき台（HTML モックアップ） の生成は Chart.js で描画しています。Chart.js は Flint の 3 バックエンドの 1 つなので、描画方式を変えずに Flint を真下に差し込めます。
実際に 100% 積み上げ棒グラフを再現してみました。効いた点（Percentage 型 → Y 軸が自動で 0–100 / Ordinal 型 → 凡例が正しい順序 / 3 行の入力 → 完成した Chart.js 設定）と、落とし穴（Chart.js バックエンドは Vega-Lite より薄く、表示名と配色を落とす）を具体的に共有します。
おまけとして、Fabric Data Agent × Flint で「ポータルの外の Web でも整ったグラフを出す」使い方も紹介します。

1. Flint とは — 「可視化の中間言語」という立ち位置

グラフ描画ライブラリを AI に直接叩かせようとすると、だいたい次のジレンマに突き当たります。

簡潔に書かせる → デフォルト任せの、素っ気ないグラフになる
作り込ませる → 軸・目盛り・配色・余白などの低レベル設定が大量に必要で、指定漏れや形式エラーが起きやすい

Flint はこの中道を狙います。コンパクトな「意味の仕様」を書けば、コンパイラが詳細を自動導出するというアプローチです。入力は 3 つだけです。

data：グラフ化する値
semantic_types：各列が「何を表すか」を意味の型で記述（YearMonth / Percentage / Rank / Country など 70 種類以上）
chart_spec：チャート種別と、どの列をどのチャネル（x/y/color…）に割り当てるか

出力先は Vega-Lite / ECharts / Chart.js の 3 バックエンドです。同じ入力から切り替えられます。そして MCP サーバー flint-chart-mcp が付属し、render_chart（静的画像）/ compile_chart（バックエンド仕様の JSON）/ validate_chart / create_chart_view（対話ビュー）/ list_chart_types を提供します。

⚠️ 現状は バージョン 0.2・研究段階（MIT・Microsoft Research の IDEAS Lab）です。GA された製品ではありません。バックエンドごとの機能差や、出力仕様に混じる独自キーなどの但し書きがある前提で使います。

2. 設計思想 — 意味の推論は LLM、詳細はコンパイラに

ポイントは「LLM の得意・不得意」に沿っている点です。LLM はフィールド名や値のパターンから「これは日付か、価格か、割合か」といった意味を推論するのは比較的得意ですが、数百の低レベルパラメータを正確に並べるのは苦手です。Flint はセマンティック型の推論に寄せることで、その苦手な部分をコンパイラに肩代わりさせます。

Microsoft Research のベンチマークでも、Flint 経由の生成は「Vega-Lite 仕様を直接生成させる方式（DirectVL）」に対して、**LLM-judge による評価スコア（高いほど良い）**で、GPT-5.1 / GPT-5-mini / GPT-4.1 のいずれでも上回りました（例：GPT-5.1 で 16.27 対 15.91・Tidy Tuesday のデータを使用）。差は小さいものの、モデルを跨いで一貫して Flint 側が高くなっています。

3. セットアップ（Windows / Claude Code）

MCP サーバーはグローバルインストールしておくと安定します（npx 直叩きだと MCP 接続の 30 秒タイムアウトにかかることがあります）。

npm install -g flint-chart-mcp

.mcp.json に登録します。Windows では cmd /c ラッパーを噛ませるのが安全です。

"flint-chart": {
  "type": "stdio",
  "command": "cmd",
  "args": ["/c", "flint-chart-mcp"],
  "env": {}
}

登録後、サーバーの initialize 応答で backends: vegalite, echarts, chartjs が返ることを確認します。エディタ（Claude Code）を再起動するとツールがロードされます。

なお、以降の検証 — Flint の呼び出し、バックエンドごとの挙動の切り分け、後処理ヘルパーの作成まで — は、この Claude Code から MCP 経由で Flint を操作しながら進めました。

4. 実例 — BI ダッシュボードのたたき台（モックアップ）で使う積み上げ棒グラフを Flint で再現する

私は Fabric / Power BI で本番のレポートを作り込む前に、HTML モックアップ（＝見た目や項目を関係者とすり合わせるためのたたき台） を作ることが多いのですが、今回は経営ダッシュボードのモックアップ作成時のグラフ描画に Flint を使ってみる、という設定にしてみました。

具体的には「事業部 × 年齢層 × 構成比（%）」の 100% 積み上げ棒グラフの作成とします（以下は汎用のサンプルデータ）。作り方はシンプルで、Claude Code に「この積み上げ棒グラフを Flint で作って」と伝えると、Claude Code が下記のような**コンパクトな Flint 入力（＝データの"意味"だけを書いた仕様）**を組み立て、flint-chart MCP の compile_chart に渡します。渡す入力は、実質これだけです。

{
  "chartType": "Stacked Bar Chart",
  "encodings": {
    "x": { "field": "dept" },
    "y": { "field": "pct" },
    "color": { "field": "age" }
  },
  "semantic_types": { "pct": "Percentage", "age": "Ordinal", "dept": "Text" }
}

注目すべきは、こちらが一切書いていない設定が自動で導出されている点です。

pct に Percentage を与えただけで、Y 軸が自動で 0–100 になります（max: 100 は書いていません）
積み上げ（両軸 stacked: true）・5 系統の配色・凡例の位置・ツールチップもすべて自動です
age に Ordinal を与えたので、凡例が「20 代 → 60 代以上」の正しい順序で並びます

この入力を compile_chart に渡すと、Chart.js の設定オブジェクトがそのまま返ってきます（抜粋）。軸や配色、積み上げ設定は、こちらが指定していないのに埋まっています。

{
  type: "bar",
  data: { labels: [...], datasets: [
    { label: "20代", data: [...], backgroundColor: "rgba(54,162,235,0.6)", ... },
    // ...
  ]},
  options: { scales: {
    x: { stacked: true, title: { text: "dept" } },
    y: { stacked: true, beginAtZero: true, title: { text: "pct" } }
  }, plugins: { legend: { position: "right" }, tooltip: { enabled: true } } }
}

つまり、既存の mockup にある new Chart(ctx, config) にそのまま渡せます。描画エンジンを変えずに、AI の作図だけ Flint に置き換えられます。従来は 1 チャートごとに、データセット別の色・stacked・max: 100・フォントサイズ…を十数行かけて手書きしていた部分が、Flint では「意図 3 行」で済みます。

5. 落とし穴 — Chart.js バックエンドは Vega-Lite より「薄い」

ここが実務の勘所です。試すうちに、同じ Flint 入力でもバックエンドによって忠実度が違うことが分かりました。とくに Chart.js バックエンドは Vega-Lite より薄いマッピングで、2 つのものを落とします。

(1) 表示名（`field_display_names`）を落とす

field_display_names で軸ラベルを日本語にしても、Chart.js バックエンドでは軸タイトルが生のフィールド名（dept / pct）のままになります。同じ入力を Vega-Lite バックエンドで compile すると、軸タイトルも凡例タイトルもちゃんと日本語（会社／部門 / 構成比 / 年齢層）が入ります。＝これは Flint 全体ではなく Chart.js バックエンド側の限界です。

(2) 配色スキーム（`encodings.color.scheme`）を落とす

Flint はそもそも「色は入力で指定しない」設計です（公式ドキュメントいわく「色はコンパイラが導出、ユーザーは出力を微調整する」）。色を制御する正規ルートは encodings.color.scheme（Vega の名前付きスキーム）ですが、Chart.js バックエンドはこの scheme すら無視して既定パレットを使います（Vega-Lite バックエンドでは効きます）。

(3) 静的 PNG で日本語が豆腐化する

render_chart の PNG で日本語ラベルが □（豆腐）になります。Flint 内蔵のラスタライザに CJK フォントが無いためです。ただし mockup 用途では実害は小さいです：使うのは compile_chart の JSON で、実際の描画はブラウザ（フォントあり）が行うためです。PNG を直接使う経路（記事の図版を直出しする・エージェントが自分の出力を画像で自己検証する）でだけフォント対応が要ります。ラベルをローマ字にすると綺麗に出るので、フォント問題だと切り分けられます。

まとめると：構造は Flint、仕上げは後処理

私のたたき台（モックアップ）は Chart.js で描くので、(1)(2) は compile 後の設定を少し後処理することで解けます。構造（積み上げ・0–100 軸・凡例順）は Flint が正しく出してくれるので、「色」と「軸ラベル」だけを差し替える薄いヘルパーを噛ませれば十分です。そこで、compile 後の設定に色と軸ラベルを後注入する小さなヘルパーを Claude Code に書いてもらいました。実際のコードが次です。

// Flint が出した Chart.js 設定に、ブランド配色と日本語軸ラベルを後注入する
const BRAND = ["#FFBBBB", "#FF7171", "#CE0000", "#3599B8", "#168980"];

function finishChartjs(config, { palette = BRAND, axisTitles = {} } = {}) {
  // 色（Flint は age を順序どおり datasets 化するので index 一致で割当）
  config.data.datasets.forEach((d, i) => {
    const c = palette[i % palette.length];
    d.backgroundColor = c;
    d.borderColor = c;
  });
  // 軸ラベル（Chart.js backend が落とす表示名を補う）
  for (const [axis, text] of Object.entries(axisTitles)) {
    const s = config.options?.scales?.[axis];
    if (s) s.title = { display: true, text };
  }
  return config; // 構造・データ・積み上げ・0-100 軸は Flint 生成のまま
}

（別ルートとして、Vega-Lite バックエンドを使えば表示名も配色スキームもそのまま効きます。ただし mockup は Chart.js 前提なので、本記事では「Chart.js ＋薄い後処理」を採りました。用途に応じてバックエンドを選ぶのがよいでしょう。）

6. もう一つの使いどころ — Fabric Data Agent × Flint

Flint が刺さるのは mockup だけではありません。Fabric Data Agent は自然言語の質問にテキストとグラフで答えてくれますが、そのビジュアル応答は「ポータル内でのみ表示・グラフ種別が限定的・色/フォント/タイトルのカスタム不可」といった標準機能の範囲にあります。ここに Flint を挟むと、Data Agent はデータ取得と集計に集中し、可視化は Flint が受け持つという役割分離ができ、ポータルの外の Web アプリでも整ったグラフを出せます。

この組み合わせは既に実践している方がいて（下記参考リンク）、Data Agent の応答（集計結果）を Flint MCP に渡して検証・コンパイルし、任意のフロントで描画する構成が示されています。標準ビジュアルで足りるならそのままでよく、表現の自由度が要るときに Flint で拡張する、という位置づけです。

7. まとめ

「何を描くか（意味）」を AI に書かせ、「どう描くか（詳細）」はコンパイラに委ねる — これが Flint の要点です。
実務では 構造は Flint に任せ、色と軸ラベルは薄い後処理で仕上げる分担がうまくいきました。既存の Chart.js 資産（mockup）を壊さずに、AI 作図を底上げできます（置き換えではなく補完）。
ただし バージョン 0.2・研究段階です。バックエンドの忠実度差（Chart.js は Vega-Lite より薄い）・CJK フォント・色の管轄といった「作法」を押さえた上で使いたいところです。
Data Agent と組み合わせれば、AI 回答の可視化そのものを一段引き上げられます。

8. 参考リンク

Flint 紹介（Microsoft Research）: https://www.microsoft.com/en-us/research/blog/flint-a-visualization-language-for-the-ai-era/
リポジトリ（MIT）: https://github.com/microsoft/flint-chart
解説（gihyo.jp）: https://gihyo.jp/article/2026/07/flint
触ってみた（Zenn）: https://zenn.dev/michy/articles/e6942ea531be99
Fabric Data Agent × Flint（Qiita・@matayuuu）: https://qiita.com/matayuuu/items/be94bf823be597c0f2f2