デザイン
ainativelang
AI-native programming language for structured, repeatable agent workflows
★ 650 スターApache-2.0
ガイドを見る →// design · microsoft/flint-chart
flint-chart
flint-chartは、microsoftが公開しているオープンソースのデザインプロジェクトです（GitHub: microsoft/flint-chart）。GitHubスターは4,351、フォークは245で、MITライセンスの下で公開されています。GitHubでの最終更新は2026年10月8日です。
Flint compiles semantic chart specs into Vega-Lite, ECharts, Chart.js, Plotly — or native Excel charts
★ 4.4k スター⑂ 245 フォークMIT更新 2026年10月
▦ ビジュアル — このプロジェクトのREADMEには埋め込み可能なスクリーンショットがないため、
ここではプレースホルダーを表示しています。下のガイド自体は完全な内容です。
ここではプレースホルダーを表示しています。下のガイド自体は完全な内容です。
// プロジェクトの基本情報
プロジェクト基本情報
- GitHubスター
- 4,351
- フォーク
- 245
- ライセンス
- MIT
- GitHubでの最終更新
- 2026年10月8日
- カテゴリ
- デザイン
- 掲載タイプ
- 完全なインストールガイド
- 公式サイト
- Official site
// 仕組み
仕組み
- Frame your data semantically
Identify the semantic types behind your fields — measures like Price or Temperature, dimensions like Country or Rank.
- Install the library
Add flint-chart from npm (or connect the hosted/npx MCP server for agent use).
- Write a semantic spec
Describe the chart in Flint's compact spec format rather than low-level chart options.
- Compile and render
Assemble output for your target — Vega-Lite, ECharts, Chart.js, Plotly, or a native Excel chart — and iterate on the theme.
// 機能
選ばれる理由
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
// 自分で実行
自分で実行してみる
- 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 - Install the library
Add Flint Chart to your Node/TypeScript project.
npm install flint-chart - 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
// 活用例
作れるもの
- Generate consistent, publication-style charts from data in a TypeScript app
- Let an AI agent produce validated charts through the Flint MCP server
- Export analyst charts as native, editable Excel objects instead of images
- Enforce one visual identity across dashboards via a shared ThemeSpec
Advertisement
// よくある質問
よくある質問
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`.
// さらに探索
似ているツール
デザイン
vscode-drawio
This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.
★ 9.5k スターGPL-3.0
ガイドを見る →デザイン
network-sketcher
AI-ready network design tool — draw topologies, export PowerPoint and Excel
★ 400 スターApache-2.0
ガイドを見る →デザイン
beamer-academic
Turn your thesis into defense slides with one command.
★ 306 スターMIT
ガイドを見る →デザイン
design-md-figma
Figma plugin that turns your style guide into DESIGN.md and SKILL.md for AI
★ 153 スターMIT
ガイドを見る →デザイン
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.1k スターMIT
ガイドを見る →// 代替候補
代替候補： デザイン
LibreAIカタログに掲載されたデザインプロジェクトの中で最もスターの多いもの — flint-chartが合わなかった場合に検討したい、現実的な候補リストです。
- Excalidraw★ 134.0k
Excalidraw — the virtual whiteboard with the hand-drawn look: infinite canvas, real-time collaboration and end-to-end encrypted sharing, MIT-licensed
- Screenshot To Code★ 80.0k
Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)
- archify★ 79.8k
Turn any idea, plan or codebase into a beautiful interactive architecture diagram — an agent skill
- AFFiNE★ 73.2k
There can be more than Notion and Miro. AFFiNE(pronounced [ə‘fain]) is a next-gen knowledge base that brings planning, sorting and creating all together. Pri…
- draw.io Desktop★ 63.6k
draw.io Desktop — the official offline desktop app for diagrams.net: flowcharts, architecture diagrams and wireframes in an Electron app that never sends your diagram data anywhere, GPL-3.0
// さらに見る design
さらに見る： デザイン
カタログの中でflint-chartとスター数が近いデザインプロジェクト — 前後の棚もそのまま見て回れます。
- mirotalk★ 4.8k
🚀 Open-source, self-hosted P2P WebRTC video conferencing for fast, private real-time communication. Create browser-based meeting rooms with no downloads or t…
- SwanLab★ 4.2k
⚡️SwanLab - an open-source, modern-design AI training tracking and visualization tool. Supports Cloud / Self-hosted use. Integrated with PyTorch / Transforme…
- poster-design★ 4.9k
Open-source online poster and image designer with a full editor, admin backend, and built-in AI tools
- sumo★ 4.2k
Eclipse SUMO is an open source, highly portable, microscopic and continuous traffic simulation package designed to handle large networks. It allows for inter…
- rallly★ 5.3k
Rallly is an open-source scheduling and collaboration tool designed to make organizing events and meetings easier.
- dembrandt★ 3.6k
Extract any website's design system — logo, colours, typography and tokens — in one command.