Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Description from the maker (original English)
Generate 40+ diagram types from text; render locally to SVG/PNG, open in the Diagrammo editor
These three are never merged into one score: opinions, measurements and popularity are different things.
We have not written a plain-language summary for this one yet. Below are the facts we read from the registry.
Pick the AI app you use, then copy the settings.
You need
Which app do you use?
Pick your app above. We remember it, so next time the button says “Install in …”.
Open Claude Desktop → Settings → Developer → Edit Config, and paste this into claude_desktop_config.json
{
"mcpServers": {
"dgmo": {
"command": "npx",
"args": [
"-y",
"@diagrammo/dgmo-mcp"
]
}
}
}Run this in your terminal
claude mcp add dgmo -- npx -y @diagrammo/dgmo-mcpPaste into .cursor/mcp.json in your project, or ~/.cursor/mcp.json
{
"mcpServers": {
"dgmo": {
"command": "npx",
"args": [
"-y",
"@diagrammo/dgmo-mcp"
]
}
}
}Your browser asks to open the app, then the app shows the settings and asks you to confirm. Key values are left empty for you to fill in.
Paste into .vscode/mcp.json in your project
{
"servers": {
"dgmo": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@diagrammo/dgmo-mcp"
]
}
}
}Your browser asks to open the app, then the app shows the settings and asks you to confirm. Key values are left empty for you to fill in.
This one runs on your computer, and ChatGPT can only connect to servers on the internet. Pick another app.
Your choice stays on this device in a cookie; no account needed.
These settings are generated from the maker’s registry entry. If the README says otherwise, follow the README.
Runs on your computer; the tool list appears in your AI app after you install it.
We check information anyone can see; we have not read the code. Checks that do not apply are left out of the count. · Checked Nov 8, 2026
The registry name was verified with the GitHub account diagrammo, which owns the repo
We have not read this repo from GitHub yet
We have not read this repo from GitHub yet
This one runs on your computer; there is no internet endpoint
Runs on your computer and uses local settings instead
Runs on your computer; we can only read tool lists from internet endpoints
Compared with every active server in this category in the registry. Stars count only when the publisher owns the repo.
It passed 1 of 1 applicable basic checks. We have not read the code. Before adding a key or token, see what access the server asks for and use a key with only the permissions you need.
The registry does not list a required key, though some servers ask you to sign in on first use.
It runs on your computer. Your AI app starts it when needed, and data does not pass through the maker’s servers (unless it calls an online service itself).
The GitHub repo last changed –, and the latest version (0.29.14) reached the registry 5 days ago.
Apps that support MCP, such as Claude Desktop, Claude Code, Cursor and VS Code. You also need Node.js on your computer.
In the same category: Figma Context MCP, Claude Real Video, Figma MCP Server
Servers in the same category from other makers, sorted by stars.
Reading a card:★ GitHub starsiThree pillars: reviews · checks · usageiUpdated = latest version published to the registryi
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.
Figma’s official server gives AI your design data so it can turn designs into code or describe them accurately. Connects to Figma’s cloud.
Copied from the maker’s repo as written. PopNx MCP has not reviewed or endorsed it. HTML, images and scripts are removed. Links lead off this site.
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 yourOnly the beginning is shown; read the rest in the repo