Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
作者による説明(英語の原文)
Publish drill-down diagrams from an agent; every Mermaid subgraph becomes a level you enter.
この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。
このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。
使っているAIアプリを選んで、設定をコピーしてください。
DRILLFLOW_TOKEN, DRILLFLOW_API_URL「秘密」と表示された値は、あなたのアカウントの鍵です。絶対に人に教えたり、チャットに貼り付けたりしないでください。
必要なもの
どのアプリを使っていますか?
上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。
Claude Desktop → Settings → Developer → Edit Config を開き、claude_desktop_config.json にこれを貼り付けます
{
"mcpServers": {
"drillflow": {
"command": "npx",
"args": [
"-y",
"drillflow-mcp"
],
"env": {
"DRILLFLOW_TOKEN": "your-value",
"DRILLFLOW_API_URL": "your-value"
}
}
}
}ターミナルでこれを実行します
claude mcp add drillflow --env DRILLFLOW_TOKEN=your-value --env DRILLFLOW_API_URL=your-value -- npx -y drillflow-mcp動かす前に、空欄の値を入力してください。
プロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます
{
"mcpServers": {
"drillflow": {
"command": "npx",
"args": [
"-y",
"drillflow-mcp"
],
"env": {
"DRILLFLOW_TOKEN": "your-value",
"DRILLFLOW_API_URL": "your-value"
}
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
プロジェクトの .vscode/mcp.json に貼り付けます
{
"servers": {
"drillflow": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"drillflow-mcp"
],
"env": {
"DRILLFLOW_TOKEN": "your-value",
"DRILLFLOW_API_URL": "your-value"
}
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
これはパソコンで動くサーバーですが、ChatGPTがつなげるのはインターネット上のサーバーだけです。ほかのアプリを選んでください。
選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。
DRILLFLOW_API_URL envこの設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月8日にチェック
レジストリ名はドメイン drillflow.de で確認済みです(レジストリがドメインの所有を確認しています)
このリポジトリはまだGitHubから読み取っていません
このリポジトリはまだGitHubから読み取っていません
これはパソコンで動くため、インターネット上のエンドポイントはありません
パソコンで動き、代わりにローカルの設定を使います
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック1項目のうち1項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
入力が必要なもの:DRILLFLOW_TOKEN
あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません(サーバー自体がオンラインサービスを呼び出す場合を除きます)。
GitHubリポジトリの最終更新は–、最新バージョン(1.0.96)がレジストリに届いたのは3 日前です。
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.jsも必要です。
同じカテゴリには:Figma Context MCP, Claude Real Video, Figma MCP Server
同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。
カードの見方:↓ 週あたりのダウンロードi★ GitHubスターi3つの柱:レビュー · チェック · 利用状況i更新=最新バージョンをレジストリに公開した日i
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Let any LLM watch a video locally — and search everything it has ever watched.
The Figma MCP server brings Figma design context directly into your AI workflow.
作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
Generated. Do not edit here. Every file in this repository is copied from
the DrillFlow source repository on each release; changes made here are
overwritten by the next sync. Please open issues rather than pull requests.
An MCP server for DrillFlow — the diagram editor built around drill-down, where a node can own a whole sub-diagram you navigate *into*.
With this server an agent can turn a Mermaid flowchart into a real hierarchical diagram, publish it to a shareable read-only link, and read published diagrams back. Every subgraph becomes a subflow a reader can actually open, which is what a flat picture cannot do.
Claude Desktop (claude_desktop_config.json) or any MCP host:
{
"mcpServers": { "drillflow": { "command": "npx", "args": ["-y", "drillflow-mcp"], "env": { "DRILLFLOW_TOKEN": "dfp_…" } } } }
Claude Code:
claude mcp add drillflow --env DRILLFLOW_TOKEN=dfp_… -- npx -y drillflow-mcp
Node 20 or newer.
| Tool | What it does |
|---|---|
publish_diagram | Publishes a DrillFlow document, returns the share URL. |
publish_mermaid | Converts a Mermaid flowchart (subgraphs → subflows) and publishes it. |
read_diagram | Reads a published diagram back as its document — share URL, @handle/name address or slug. |
Publishing puts the diagram on a public read-only URL that anyone holding the link can open. Nothing is published without the host asking you first.
| Variable | Meaning |
|---|---|
DRILLFLOW_TOKEN | An API token from Your account → API tokens at app.drillflow.de. Optional. |
DRILLFLOW_API_URL | Defaults to https://api.drillflow.de. |
Without a token the server publishes anonymously, and says so in every result: nobody owns the link, it cannot be listed or revoked, and it stops working after 72 hours (the result names the exact time). With a token the link belongs to your account — listed under *My shared links*, renameable, revocable, no expiry.
The document format is documented at https://drillflow.de/en/format/, with a JSON Schema at https://drillflow.de/schema/drillflow-document.schema.json. There is also a Claude Skill for generating DrillFlow diagrams: capydev42/drillflow-skill.
This repository holds the server's own sources, which is what the MIT licence below covers. It is not a standalone build: the package bundles a few modules from the (closed-source) DrillFlow editor — the Mermaid importer and the document validator — so the published drillflow-mcp on npm is built from the DrillFlow repository, not from here. Install it with npx; read it here.
MIT — see LICENSE. This covers the MCP server in this repository, not the DrillFlow application.
Bug reports are welcome in this repository's issue tracker, or by mail to .