LibreAI / Design / flint-chart
// design · microsoft/flint-chart

flint-chart

flint-chart ist ein Open-Source-Projekt aus der Kategorie Design von microsoft (microsoft/flint-chart auf GitHub). Es hat 4.351 Sterne auf GitHub und 245 Forks, wird unter der Lizenz MIT veröffentlicht und wurde zuletzt am 8. Oktober 2026 auf GitHub aktualisiert.

Flint compiles semantic chart specs into Vega-Lite, ECharts, Chart.js, Plotly — or native Excel charts

★ 4,4 Tsd. Sterne⑂ 245 ForksMITaktualisiert Okt 2026
▦ Visual — das README dieses Projekts enthält keinen einbettbaren Screenshot,
darum hier ein Platzhalter. Die Anleitung unten ist trotzdem vollständig.
// projektdaten

Projektdaten

GitHub-Sterne
4.351
Forks
245
Lizenz
MIT
Zuletzt auf GitHub aktualisiert
8. Oktober 2026
Kategorie
Design
Eintragstyp
Vollständige Installationsanleitung
Offizielle Website
Official site
// so funktioniert es

So funktioniert es

  1. Frame your data semantically

    Identify the semantic types behind your fields — measures like Price or Temperature, dimensions like Country or Rank.

  2. Install the library

    Add flint-chart from npm (or connect the hosted/npx MCP server for agent use).

  3. Write a semantic spec

    Describe the chart in Flint's compact spec format rather than low-level chart options.

  4. Compile and render

    Assemble output for your target — Vega-Lite, ECharts, Chart.js, Plotly, or a native Excel chart — and iterate on the theme.

// funktionen

Warum es so beliebt ist

Semantic typing system

70+ semantic types let the compiler choose sensible encodings, scales, and formatting for your data.

Five output targets

Compile one spec to Vega-Lite, ECharts, Chart.js, Plotly, or native editable Excel charts.

Formal visual themes

Ten built-in presets plus custom ThemeSpec definitions with inheritance for house styles.

MCP server for agents

`npx flint-chart-mcp` (or the hosted endpoint) lets agents create, validate, and render charts, including PNG/SVG output.

Automatic layout

Layout and labeling are handled by the compiler rather than hand-tuned per chart.

Compact specs

Specifications stay short and data-focused compared with hand-writing Vega-Lite or ECharts options.

Advertisement
// selbst ausführen

Führe es selbst aus

  1. Clone the repository

    Clone the project and enter its directory (library users can install from npm instead).

    git clone https://github.com/microsoft/flint-chart.git
    cd flint-chart
  2. Install the library

    Add Flint Chart to your Node/TypeScript project.

    npm install flint-chart
  3. Compile your first chart

    Assemble a chart spec into Vega-Lite (or another target) as shown in the README examples.

    import { assembleVegaLite } from 'flint-chart'
    // build a semantic spec and pass it to assembleVegaLite({...}) — see README examples
// anwendungsfälle

Was du damit bauen kannst

Advertisement
// häufige fragen

Häufige Fragen

Who maintains Flint Chart?

Microsoft Research publishes Flint Chart (the hosted MCP demo is at flint.data-formulator.ai).

Is Flint Chart free?

Yes, MIT-licensed, including the npm library and the local MCP server.

Does it need a paid API key?

No. The library and MCP server run locally; agents connecting to them use their own model access.

How does it compare to writing Vega-Lite directly?

Vega-Lite is one of Flint's output targets. Flint adds a semantic layer on top — types, themes, and layout — so one compact spec can target Vega-Lite, ECharts, Chart.js, Plotly, or Excel.

How do I get started?

Run `npm install flint-chart` and follow the README's assemble examples, or connect an agent with `npx -y flint-chart-mcp`.

// weiter entdecken

Ähnliche Tools

Design

ainativelang

AI-native programming language for structured, repeatable agent workflows

★ 650 SterneApache-2.0
Anleitung ansehen →
Design

vscode-drawio

This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.

★ 9,5 Tsd. SterneGPL-3.0
Anleitung ansehen →
Design

network-sketcher

AI-ready network design tool — draw topologies, export PowerPoint and Excel

★ 400 SterneApache-2.0
Anleitung ansehen →
Design

beamer-academic

Turn your thesis into defense slides with one command.

★ 306 SterneMIT
Anleitung ansehen →
Design

design-md-figma

Figma plugin that turns your style guide into DESIGN.md and SKILL.md for AI

★ 153 SterneMIT
Anleitung ansehen →
Design

ui

Open-source components, blocks, and AI agents designed to speed up your workflow. Import them seamlessly into your favorite tools through Registry and MCPs.

★ 12,1 Tsd. SterneMIT
Anleitung ansehen →
// alternativen

Alternativen im Bereich Design

Die anderen Projekte der Kategorie Design mit den meisten Sternen im LibreAI-Katalog — die realistische Auswahl, falls flint-chart nicht das Richtige ist.

// mehr in design

Mehr in Design

Verwandte Projekte der Kategorie Design im Katalog, die flint-chart bei den Sternen am nächsten stehen — zum Weiterstöbern auf beiden Seiten.

Hol dir flint-chart

Kostenlos und offen — hol dir den Quellcode, gib dem Repository einen Stern und leg los.