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
这三项永远不会合并成一个分数:意见、测量和人气是不同的东西。
我们还没有为它写通俗的介绍。下面是我们从注册中心读取到的事实。
选择你使用的 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月8日
注册名称已通过 GitHub 账户 diagrammo 验证,该账户拥有此仓库
我们还没有从 GitHub 读取这个仓库
我们还没有从 GitHub 读取这个仓库
它在你的电脑上运行,没有互联网端点
在你的电脑上运行,改用本地设置
它在你的电脑上运行;我们只能读取互联网端点的工具列表
与注册中心里这个分类中所有活跃的服务器比较。只有当发布者拥有该仓库时,星标数才计入。
它在 1 项适用的基础检查中通过了 1 项。我们没有阅读代码。在添加密钥或令牌之前,请先看看这个服务器要求哪些权限,并使用只具备所需权限的密钥。
注册中心没有列出必需的密钥,不过有些服务器会在首次使用时要求你登录。
它在你的电脑上运行。你的 AI 应用会在需要时启动它,数据不会经过作者的服务器(除非它自己调用在线服务)。
GitHub 仓库最后更新于–,最新版本(0.29.14)于5天前进入注册中心。
支持 MCP 的应用,例如 Claude Desktop、Claude Code、Cursor 和 VS Code。你的电脑上还需要有 Node.js。
同一分类中有:Figma Context MCP, Claude Real Video, Figma MCP Server
同一分类中其他作者的服务器,按星标数排序。
如何看卡片:↓ 每周下载量i★ GitHub 星标i三大支柱:评价 · 检查 · 使用情况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只显示了开头部分;其余内容请在仓库中阅读