Wie Microsoft verzerrte KI-generierte Diagramme mit Flint löst

Wenn Sie jemals Claude, ChatGPT oder ein lokales Modell gebeten haben, ein Diagramm mit ECharts oder Chart.js zu erstellen, sind Sie wahrscheinlich auf ein Chaos aus Achsen und unlesbaren Beschriftungen gestoßen. Modelle verbringen Stunden damit, Schlüssel in JSON-Konfigurationen zu verwechseln, Layouts zu zerstören und benötigen umfangreiche System-Prompts, nur um ein einfaches Balkendiagramm zu zeichnen.

Das Microsoft Research-Team in Zusammenarbeit mit Forschern des IDEAS-Labors an der Renmin-Universität in China hat das Repository flint-chart als Open Source veröffentlicht. Dabei handelt es sich um eine kompakte Zwischensprache und einen Compiler, die speziell für die Arbeit mit LLMs und KI-Agenten entwickelt wurden.

Warum ein weiteres Visualisierungsformat

Das Problem bei beliebten Bibliotheken wie D3, ECharts oder Plotly ist ihre schiere Komplexität. Die Konfiguration eines einzelnen Diagramms in ECharts erfordert die Übergabe eines massiven Objekts mit Dutzenden verschachtelter Felder: Skalen, Achsenintervalle, Abstände, Legendenformatierung und adaptive Regeln. Für ein LLM ist dies eine übermäßig komplexe Aufgabe, bei der leicht Halluzinationen oder Syntaxfehler auftreten.

Flint funktioniert anders. Es übernimmt die Rolle einer Zwischendarstellung (IR). Das neuronale Netz generiert eine präzise Spezifikation, die nur das Wesentliche angibt: Diagrammtyp, Eingabedaten und Feldzuordnung.

Der Flint-Compiler nimmt dieses kompakte Schema, berechnet automatisch optimale Elementgrößen, formatiert Achsen, entfernt Textüberschneidungen und übersetzt das Ergebnis in nativen Code für die Ziel-Grafikbibliothek.

Unter der Haube

Im Gegensatz zu Standardbibliotheken, bei denen Felder in einfache Strings und Zahlen unterteilt sind, verwendet Flint eine semantische Typisierung. Das System verfügt über über 70 eingebaute semantische Typen, darunter Rank, Temperature, Price, Country und Quantity.

Wenn der Compiler weiß, dass ein Feld Price-Daten enthält, wendet er automatisch Währungsformatierungsregeln an und wählt die entsprechende Skala. Wenn die Daten Länder oder Bewertungen angeben, bestimmt Flint die beste Achsenbeschriftungsplatzierung, um Überschneidungen zu vermeiden.

Derzeit wird die Bibliothek im JS/TS-Ökosystem gepflegt und kann dieselbe Spezifikation in fünf verschiedene Ziele übersetzen:

• Vega-Lite
• ECharts
• Chart.js
• Plotly
• Native Excel-Diagramme über Office.js

Hier ist ein Beispiel für das Kompilieren einer Spezifikation nach 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 },
  },
});

Wenn Sie sich entscheiden, die Rendering-Engine auf ECharts oder Plotly umzustellen, müssen Sie den Spezifikationscode selbst nicht ändern. Rufen Sie einfach assembleECharts(input) oder assemblePlotly(input) auf.

KI-Agenten-Integration über MCP

Die Entwickler haben die Bereitschaft für autonome Agenten-Workflows priorisiert. Das Repository enthält einen flint-chart-mcp-Server, der das Model Context Protocol implementiert.

In einer MCP-fähigen Entwicklungsumgebung (wie Cursor oder Claude Desktop) erhält der Agent ein fertiges Toolkit zur Diagrammerstellung. Das Modell schüttet nicht einfach JSON in den Chat – es validiert das Schema, prüft Typen und rendert sofort ein interaktives Widget in der Editor-Oberfläche.

Der Server startet in Ihrer Arbeitsumgebung mit nur einem Befehl:

npx -y flint-chart-mcp

Repository-Struktur

Das Projekt ist als Monorepo strukturiert:

• packages/flint-js — der Hauptbibliothekscode in TypeScript.
• packages/flint-mcp — die MCP-Server-Implementierung für Agenten.
• packages/flint-py — ein Python-Port-Prototyp (derzeit nur als Quellcode verfügbar, das Paket wurde noch nicht auf PyPI veröffentlicht).
• site — eine interaktive Demo-Site mit Editor und Galerie.

Wenn Sie das Projekt lokal erkunden und Änderungen vornehmen möchten, dauert die Bereitstellung nur wenige Minuten:

git clone https://github.com/microsoft/flint-chart
cd flint-chart
npm install
npm run site

Der Demo-Client wird unter http://localhost:5274/ gestartet. Der Bibliothekscode ist direkt mit der Site verknüpft, sodass Änderungen an der Compiler-Logik ohne manuelles Neuerstellen von Paketen sofort übernommen werden.

Für wen ist Flint gedacht

Das Tool adressiert ein enges, aber schmerzhaftes Problem. Wenn Sie KI-Assistenten, Dashboards mit spontaner Generierung erstellen oder neuronalen Netzen Zugriff auf Datenanalysen gewähren, eliminiert Flint die Notwendigkeit, zahlreiche Validatoren und Workarounds für Visualisierungen zu schreiben.

Das Projekt ist noch frisch, aber es hat Microsoft Research dahinter, und Updates erscheinen regelmäßig. Version 0.4.0 fügte Unterstützung für Dutzende von Plotly-Vorlagen und bearbeitbare Excel-Diagramme hinzu, daher lohnt es sich definitiv, die Bibliothek zu bookmarken.