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)
Mermaid to assets. Source code to maps. MCP for agents.
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": {
"vaults-diagram-tools": {
"command": "npx",
"args": [
"-y",
"vaults-diagram-tools"
]
}
}
}Run this in your terminal
claude mcp add vaults-diagram-tools -- npx -y vaults-diagram-toolsPaste into .cursor/mcp.json in your project, or ~/.cursor/mcp.json
{
"mcpServers": {
"vaults-diagram-tools": {
"command": "npx",
"args": [
"-y",
"vaults-diagram-tools"
]
}
}
}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": {
"vaults-diagram-tools": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"vaults-diagram-tools"
]
}
}
}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 Malnati, 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.1.4) reached the registry 6 months 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.
Mermaid to assets. Source code to maps. MCP for agents.
vaults-diagram-tools is a standalone toolkit for teams that need reproducible Mermaid SVG/JPEG assets, source-code diagrams, and agent-friendly diagram workflows without carrying Vault-specific content.
vaults-diagram-tools@0.1.4Vaults Diagram Tools (repo)io.github.Malnati/vaults-diagram-toolsquay.io/ricardomalnati/vaults-diagram-tools:v0.1.0io.github.Malnati/vaults-diagram-tools.Content-management workflows outside diagram generation are not part of this package.
Install in a project:
npm install -D vaults-diagram-tools
Render one Mermaid source to durable assets:
npx vaults-mermaid-render path/to/diagram.mmd --output-dir out --manifest out/manifest.json
Generate Mermaid diagrams from source code:
npx vaults-source-diagrams --source-dir src --output-dir diagrams
Run the MCP stdio server:
npx vaults-diagram-mcp
Use one-shot npx when the project should not keep a dependency:
npx --yes --package vaults-diagram-tools vaults-mermaid-render path/to/diagram.mmd --output-dir out
npx --yes --package vaults-diagram-tools vaults-source-diagrams --source-dir src --output-dir diagrams npx --yes --package vaults-diagram-tools vaults-diagram-mcp
| Command | Purpose |
|---|---|
vaults-mermaid-render | Render .mmd or .mermaid files to SVG/JPEG, manifests, and optional PNG/text sidecars. |
vaults-source-diagrams | Generate Mermaid diagrams from source-code structure, including focused selections and traceability metadata. |
vaults-diagram-mcp | Expose render_mermaid_text, render_mermaid_file, and generate_source_diagrams through MCP stdio. |
Additional package binaries are compatibility entrypoints for older Vaults paths, optional text renderers, and Podman workflows.
.mmd, render .svg and .jpg, and show source inline with a fenced mermaid block.0.1.4, and the Smithery server page is already published.Use the published npm package when you want the normal Node.js toolchain installation. Current npm latest is vaults-diagram-tools@0.1.4:
npm install -D vaults-diagram-tools
npx vaults-mermaid-render path/to/diagram.mmd --output-dir out --manifest out/manifest.json npx vaults-source-diagrams --source-dir src --output-dir diagrams npx vaults-diagram-mcp
npxUse --package when the project should not keep the dependency:
npx --yes --package vaults-diagram-tools vaults-mermaid-render path/to/diagram.mmd --output-dir out
npx --yes --package vaults-diagram-tools vaults-source-diagrams --source-dir src --output-dir diagrams npx --yes --package vaults-diagram-tools vaults-diagram-mcp
Use the dedicated Marketplace action when the diagram workflow should run inside GitHub Actions without adding project-local scripts:
steps:
v0.1.4; moving compatibility tag: v0.Use the GitHub package source when testing a commit before a registry release:
npm install github:malnati/vaults-diagram-tools
npx vaults-mermaid-render path/to/diagram.mmd --output-dir out
The latest GitHub Release, GHCR image, npm package, MCP Registry metadata, and VS Code VSIX are published at v0.1.4; the Quay.io Podman image remains at v0.1.0:
ghcr.io/malnati/vaults-diagram-tools:v0.1.4quay.io/ricardomalnati/vaults-diagram-tools:v0.1.0Use the checkout for development, validation, or release preparation:
git clone https://github.com/malnati/vaults-diagram-tools.git
cd vaults-diagram-tools npm ci npm test node packages/renderer/render-mermaid-assets.mjs examples/simple/flowchart.mmd --output-dir tmp/rendered node packages/source-diagrams/source-diagrams.mjs --source-dir packages/mcp --output-dir tmp/source-diagrams node packages/mcp/server.mjs
Build locally:
docker build -f containers/Containerfile -t vaults-diagram-tools:local .
podman build -f containers/Containerfile -t vaults-diagram-tools:local .
Run a render from the GHCR image:
docker run --rm \
-v "$PWD/examples/simple:/work/input:ro" \ -v "$PWD/tmp/container-output:/work/output:rw" \ ghcr.io/malnati/vaults-diagram-tools:v0.1.4 \ --output-dir /work/output /work/input/flowchart.mmd
Run the published Podman image from Quay.io:
podman run --rm \
-v "$PWD/examples/simple:/work/input:ro" \ -v "$PWD/tmp/container-output:/work/output:rw" \ quay.io/ricardomalnati/vaults-diagram-tools:v0.1.0 \ --output-dir /work/output /work/input/flowchart.mmd
Quay.io also exposes 0.1.0 and latest tags for the same published package line.
Podman helper scripts are available through vaults-mermaid-podman-build, vaults-mermaid-podman-render, and vaults-mermaid-podman-test.
The package is CLI-first. CDN endpoints expose browser-safe metadata/helpers only; SVG/JPEG rendering still runs through Node.js, MCP, or the container runtime.
https://cdn.jsdelivr.net/npm/vaults-diagram-tools/packaging/cdn/vaults-diagram-tools.mjs
https://unpkg.com/vaults-diagram-tools/packaging/cdn/vaults-diagram-tools.mjs
The desktop VS Code extension is published as malnati.vaults-diagram-tools and can also be installed directly from the GitHub Release VSIX. It uses a hybrid runtime: a bundled offline fallback plus a managed cache that can follow vaults-diagram-tools@latest without republishing the extension. It contributes:
vaults-diagram-tools stdio server.Install options after v0.1.4 is released:
Local package validation:
npm run vscode:install
npm run vscode:test npm run vscode:package code --install-extension dist/vaults-diagram-tools-vscode-0.1.4.vsix
Sequential local publication:
make auth
make publish-all
make publish-all runs local-terminal authentication first, validates guard-only release metadata, packages artifacts, creates the GitHub tag/release, publishes npm, VS Code Marketplace, Open VSX, GHCR, Quay.io, and MCP Registry, then verifies public availability. It fails when the current version/tag/npm package already exists; bump and commit release metadata before running.
After installing from npm, run public CLIs directly from node_modules/.bin, npm exec, or npx:
vaults-mermaid-render path/to/diagram.mmd --output-dir out --png --ascii --manifest out/manifest.json
vaults-source-diagrams --source-dir src --output-dir diagrams --langs auto --diagrams dependency,class vaults-diagram-mcp
One-shot examples:
npx --yes --package vaults-diagram-tools vaults-mermaid-render examples/simple/flowchart.mmd --output-dir tmp/vaults-diagram-tools
npx --yes --package vaults-diagram-tools vaults-source-diagrams --source-dir packages/mcp --output-dir tmp/source-di
Only the beginning is shown; read the rest in the repo