1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@daizou703

MS Research の Flint を試す — セマンティック型で「整ったグラフ」を AI に描かせる（Fabric: Power BI / Data Agent での活用）

1
Last updated at Posted at 2026-07-19

想定読者

  • 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" }
}

図1: Flint が生成した積み上げ棒グラフ（既定パレット・軸は生フィールド名）

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

  • 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 生成のまま
}

図2: 後処理でブランド配色＋日本語軸ラベルを当てた版

（別ルートとして、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. 参考リンク

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?