Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
作者による説明(英語の原文)
Generate 40+ diagram types from text; render locally to SVG/PNG, open in the Diagrammo editor
この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。
このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。
使っているAIアプリを選んで、設定をコピーしてください。
必要なもの
どのアプリを使っていますか?
上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。
Claude Desktop → Settings → Developer → Edit Config を開き、claude_desktop_config.json にこれを貼り付けます
{
"mcpServers": {
"dgmo": {
"command": "npx",
"args": [
"-y",
"@diagrammo/dgmo-mcp"
]
}
}
}ターミナルでこれを実行します
claude mcp add dgmo -- npx -y @diagrammo/dgmo-mcpプロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます
{
"mcpServers": {
"dgmo": {
"command": "npx",
"args": [
"-y",
"@diagrammo/dgmo-mcp"
]
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
プロジェクトの .vscode/mcp.json に貼り付けます
{
"servers": {
"dgmo": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@diagrammo/dgmo-mcp"
]
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
これはパソコンで動くサーバーですが、ChatGPTがつなげるのはインターネット上のサーバーだけです。ほかのアプリを選んでください。
選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。
この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月7日にチェック
レジストリ名は、リポジトリを所有するGitHubアカウント diagrammo で確認済みです
このリポジトリはまだGitHubから読み取っていません
このリポジトリはまだGitHubから読み取っていません
これはパソコンで動くため、インターネット上のエンドポイントはありません
パソコンで動き、代わりにローカルの設定を使います
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック1項目のうち1項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。
あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません(サーバー自体がオンラインサービスを呼び出す場合を除きます)。
GitHubリポジトリの最終更新は–、最新バージョン(0.29.14)がレジストリに届いたのは5 日前です。
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.jsも必要です。
同じカテゴリには:Figma Context MCP, Claude Real Video, Figma MCP Server
同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。
カードの見方:★ 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、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
Turn a conversation into a real diagram — without leaving your AI tool.
This MCP server gives Claude (and any MCP-compatible AI tool) the ability to render sequence diagrams, flowcharts, ER diagrams, C4 architecture, gantt charts, and 40+ other chart types from concise text markup — then hand the result off to a full editor for refinement. Ask for a diagram in chat; get a real one back.
Ask in plain language — _"diagram the auth flow as a sequence"_, _"chart the Q3 plan as a gantt"_, _"draw our services as a C4 diagram"_ — and Claude writes the markup and renders it. The markup stays readable and diffable:
flowchart Mutiny Resolution
direction-tb
[Sail] Set sail under the captain {Trouble?} Discontent in the crew? {Vote} Crew vote called [Mutiny] Seize the ship
(Sail) -> (Trouble?) (Trouble?) -Yes-> (Vote) (Vote) -Mutiny-> (Mutiny)
→ renders to the flowchart above. All rendering happens locally — no diagram data leaves your machine.
| Tool | What it does | Over HTTP |
|---|---|---|
render_diagram | Render DGMO markup to SVG or PNG | yes |
validate_diagram | Check markup and report parse errors, without rendering | yes |
suggest_chart_type | Suggest the chart types that fit a description | yes |
list_chart_types | List all supported chart types, marking the beta ones | yes |
get_language_reference | Get DGMO syntax documentation for accurate generation | yes |
get_examples | Fetch worked examples for a chart type | yes |
| `share_diagram` | Get a shareable diagrammo.app URL — hand your diagram to the web editor | yes |
| `open_in_app` | Open the diagram straight into the Diagrammo desktop app for editing | no |
check_app_installed | Report whether the desktop app is installed | no |
preview_diagram | Render one or more diagrams and open an HTML preview in the browser | no |
generate_report | Build a polished multi-section HTML report with ToC and optional source | no |
put_space_diagram | Write a diagram into a Diagrammo Cloud space, by folder and title | yes |
get_space_diagram | Read a diagram from a Cloud space, by id or by folder and title | yes |
list_space_diagrams | List every diagram in a Cloud space | yes |
The three space tools send the diagram to Diagrammo Cloud. They need a space API key (minted on the Diagrammo account page) as DGMO_API_KEY in the server's environment — never as a tool argument, so the key stays out of the transcript.
share_diagram and open_in_app are the bridge out of chat: a diagram Claude generates becomes something you can refine, restyle, and embed — see below.
The four marked no open a browser or launch the desktop app. Over HTTP that would happen on the machine running the server rather than on yours, so they are not offered there — see Serving over HTTP.
The MCP server is one entry point into [Diagrammo](https://diagrammo.app) — a whole ecosystem built on the same DGMO markup. Generate in chat, refine in a real editor, embed anywhere:
open_in_app drops an AI-generated diagram straight into it, with live preview, palettes, and export.share_diagram URLs open right here.npx @diagrammo/dgmo-cli file.dgmo -o out.png, or install it with npm install -g @diagrammo/dgmo-cli (macOS and Linux).One markup, everywhere. A diagram you generate here renders identically in the
app, in your docs, and in Obsidian — because they all speak DGMO.
[→ Try it free at diagrammo.app](https://diagrammo.app)
Install the dgmo CLI and let it wire everything up:
npm install -g @diagrammo/dgmo-cli # macOS and Linux
dgmo install # auto-detects Claude Code, Codex, Claude Desktop, Cursor, …
Prefer Homebrew or pacman? See diagrammo.app/dev.
dgmo install configures each detected assistant non-interactively and points it at dgmo mcp, so there's no separate package to install or prompts to answer. Target one surface with dgmo install claude-code (or codex, claude-desktop, …).
Prefer to edit configs yourself? Point any MCP client at the server via npx (no global install needed):
Claude Code — .claude/settings.local.json; Claude Desktop — ~/Library/Application Support/Claude/claude_desktop_config.json:
{
"mcpServers": { "dgmo": { "command": "npx", "args": ["-y", "@diagrammo/dgmo-mcp"] } } }
If you have the dgmo CLI installed, { "command": "dgmo", "args": ["mcp"] } works too. Restart the client after saving — the tools appear automatically.
The setups above launch the server as a child process and talk to it over its standard input and output. That needs the server and the client on the same machine. Where they are not — a hosted agent platform, a container, one server shared by several people — start it as an HTTP endpoint instead. The same endpoint also suits one machine, when you want a single server always running for every AI tool you use:
dgmo mcp --http # with the dgmo CLI installed
npx -y @diagrammo/dgmo-mcp --http # http://127.0.0.1:3333/mcp MCP_TRANSPORT=http MCP_PORT=8080 npx -y @diagrammo/dgmo-mcp
Every option takes a flag or an environment variable, whichever your setup can express:
| Flag | Variable | Default | What |
|---|---|---|---|
--http | MCP_TRANSPORT=http | off | Serve streamable HTTP instead of stdio |
--port | MCP_PORT | 3333 | Port to listen on |
--host | MCP_HOST | 127.0.0.1 | Interface to bind |
--path | MCP_PATH | /mcp | Path the endpoint answers on |
--allow-host | MCP_ALLOWED_HOSTS | loopback | Extra Host headers to accept, repeatable |
--allow-origin | MCP_ALLOWED_ORIGINS | own origin | Origin headers to accept, repeatable |
Each request is served independently — no sessions, nothing kept between calls — so one endpoint can serve several clients at once.
The server has no authentication of its own. It binds loopback by default and
rejects requests carrying a
Hostheader it was not told to expect, or anOrigin
header other than its own unless
--allow-originnames it, which is enough
for a client on the same machine or inside the same container. Anything reachable from
a wider network needs your own authentication in front of it, and
--allow-hostfor
the hostname it will be reached by. Binding a non-loopback interface without naming a
host prints a warning saying so.
--help prints all of this from the installed version.
Run the server as a background service so it starts at login and restarts if it stops. Change the dgmo path to what which dgmo prints.
Linux — systemd user service, saved as ~/.config/systemd/user/dgmo-mcp.service:
[Unit]
Description=Diagrammo MCP server over HTTP After=network.target
[Service] ExecStart=%h/.local/bin/dgmo mcp --http Environment=PATH=%h/.local/bin:/usr/local/bin:/usr/bin:/bin Restart=on-failure RestartSec=3
[Install] WantedBy=default.target
systemctl --user daemon-reload
systemctl --user enable --now dgmo-mcp
macOS — launchd agent, saved as ~/Library/LaunchAgents/app.diagrammo.mcp.plist:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
Label app.diagrammo.mcp ProgramArguments
/opt/homebrew/bin/dgmo mcp --http
EnvironmentVariables PATH /opt/homebrew/bin:/usr/local/bin:/usr/bin:/bin RunAtLoad KeepAlive
launchctl bootstrap gui/$(id -u) ~/Library/LaunchAgents/app.diagrammo.mcp.plist
Then point each AI tool at http://127.0.0.1:3333/mcp as a streamable-HTTP MCP server.
All rendering is local. Your diagram markup and the images it produces never leave your machine, except when you explicitly call share_diagram (which encodes the diagram into a diagrammo.app URL). See the privacy terms.
pnpm hub
One command, one server, one browser tab. The hub opens a tabbed shell over the three AI-tuning dev tools — switch between them with the top tabs, no separate ports or commands to remember:
suggest_chart_type, score prompts live, save back to triggers.json.claude -p. blocks in dgmo's language-reference.md, sliced into get_language_reference): pick a type, edit how the AI is told to style it, run a prompt against a committed dataset fixture (so inputs never move between runs), and see the generated DGMO + rendered image side by side. The picker doubles as a coverage bar; "Compare 3×" renders no-guidance vs your冒頭だけを表示しています。続きはリポジトリで読めます