Microsoft、Flintで歪んだAI生成チャート問題をこうして解決
Claude、ChatGPT、ローカルモデルにEChartsやChart.jsを使ってチャートを生成させたことがある人なら、軸がぐちゃぐちゃでラベルの読みにくい経験をしたことがあるでしょう。モデルはJSON設定のキーを取り違えたり、レイアウトを壊したりするのに何時間も費やし、シンプルな棒グラフを描くためだけに大容量のシステムプロンプトを必要とします。
Microsoft Researchチームは、中国人民大学IDEASラボの研究者との協力により、flint-chartリポジトリをオープンソースとして公開しました。これはLLMやAIエージェントとの作業に特化した、コンパクトな中間言語兼コンパイラです。
なぜ別のビジュアライゼーションフォーマットなのか
D3、ECharts、Plotlyなどの人気ライブラリの 문제는、その複雑さにあります。EChartsで1つのチャートを設定するには、スケール、軸の間隔、パディング、凡例の書式設定、適応ルールなど、何十ものネストされたフィールドを持つ巨大なオブジェクトを渡す必要があります。LLMにとって、これは幻觉や構文エラーが発生しやすい、過度に複雑なタスクです。
Flintは異なるアプローチを取ります。中間表現（IR）の役割を果たします。ニューラルネットワークは、チャートタイプ、入力データ、フィールドマッピングのみを指定する簡潔な仕様を生成します。
Flintコンパイラは、このコンパクトなスキーマを受け取り、要素サイズの最適値を自動的に計算し、軸をフォーマットし、テキストの重なりを削除して、ターゲットグラフィックライブラリ用のネイティブコードに変換します。
内部構造
フィールドが文字列と数値に分割されている標準ライブラリとは異なり、Flintはセマンティックタイピングを使用します。システムには70以上のセマンティックタイプが組み込まれており、Rank、Temperature、Price、Country、Quantityなどが含まれています。
コンパイラがフィールドにPriceデータが含まれていることを認識すると、通貨のフォーマットルールを自動的に適用し、適切なスケール選択を行います。データが国や評価を指定している場合、Flintは重なりを防ぐために最適な軸ラベル配置を決定します。
現在、ライブラリはJS/TSエコシステムでメンテナンスされており、同じ仕様を5つの異なるターゲットに変換できます：
- Vega-Lite
- ECharts
- Chart.js
- Plotly
- Office.js経由のネイティブExcelチャート
以下は、仕様をVega-Liteにコンパイルする例です：
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 },
},
});
レンダリングエンジンをEChartsやPlotlyに切り替えることを決めた場合、仕様コード自体を変更する必要はありません。単にassembleECharts(input)またはassemblePlotly(input)を呼び出すだけです。
MCPによるAIエージェント統合
開発者は自律型エージェントワークフローへの対応を優先しました。リポジトリにはModel Context Protocolを実装したflint-chart-mcpサーバーが含まれています。
MCP対応の開発環境（CursorやClaude Desktopなど）では、エージェントはチャート生成のための готовыйツールキットを取得します。モデルは単にJSONをチャットにダンプするだけでなく、スキーマを検証し、タイプをチェックし、エディタインターフェースでインタラクティブなウィジェットをすぐにレンダリングします。
作業環境でサーバーを起動するのは1つのコマンドで完了します：
npx -y flint-chart-mcp
リポジトリの構造
プロジェクトはモノレポとして構成されています：
packages/flint-js— TypeScriptでのメインライブラリコード。packages/flint-mcp— エージェント向けのMCPサーバー実装。packages/flint-py— Pythonポートのプロトタイプ（現在ソースコードでのみ利用可能、パッケージはPyPIにまだ公開されていません）。site— エディタとギャラリーを備えたインタラクティブなデモサイト。
プロジェクトをローカルで探索して変更を加えたい場合、デプロイは数分で完了します：
git clone https://github.com/microsoft/flint-chart
cd flint-chart
npm install
npm run site
デモクライアントはhttp://localhost:5274/で起動します。ライブラリコードはサイトに直接リンクされているため、コンパイラロジックへの変更はパッケージを手動で再ビルドせずにリアルタイムで反映されます。
Flintは誰のためか
このツールは、狭いが的痛苦な問題に対処しています。AIアシスタント、リアルタイム生成によるダッシュボード、またはニューラルネットワークにデータ分析へのアクセスを与える場合、Flintはビジュアライゼーションの周りにNumerousバリデーターや回避策を書く必要性を排除します。
プロジェクトはまだ出たばかりですが、Microsoft Researchが背後にあり、定期的なアップデートが行われています。バージョン0.4.0では dozens of Plotlyテンプレートと編集可能なExcelチャートのサポートが追加されたため、ライブラリはぜひブックマークしておく価値があります。
関連プロジェクト