Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Descripción del creador (original en inglés)
Generate cloud architecture diagrams, flowcharts, and sequence diagrams.
Estos tres nunca se combinan en una sola puntuación: las opiniones, las mediciones y la popularidad son cosas distintas.
Todavía no escribimos un resumen sencillo para este. Abajo están los datos que leímos del registro.
Elige la app de IA que usas y copia la configuración.
Necesitas
¿Qué app usas?
Elige tu app arriba. La recordamos, así que la próxima vez el botón dirá “Instalar en …”.
Funciona en Claude para web, escritorio y móvil:
https://diagrams-mcp-production.up.railway.app/mcpAbre Claude Desktop → Settings → Developer → Edit Config y pega esto en claude_desktop_config.json
{
"mcpServers": {
"diagrams": {
"command": "uvx",
"args": [
"diagrams-mcp-server"
]
}
}
}Ejecuta esto en tu terminal
claude mcp add --transport http diagrams https://diagrams-mcp-production.up.railway.app/mcpclaude mcp add diagrams -- uvx diagrams-mcp-serverPégalo en .cursor/mcp.json de tu proyecto, o en ~/.cursor/mcp.json
{
"mcpServers": {
"diagrams": {
"url": "https://diagrams-mcp-production.up.railway.app/mcp"
}
}
}Pégalo en .cursor/mcp.json de tu proyecto, o en ~/.cursor/mcp.json
{
"mcpServers": {
"diagrams": {
"command": "uvx",
"args": [
"diagrams-mcp-server"
]
}
}
}Tu navegador te pide permiso para abrir la app; luego la app muestra la configuración y te pide confirmar. Los valores de las claves quedan vacíos para que los completes tú.
Pégalo en .vscode/mcp.json de tu proyecto
{
"servers": {
"diagrams": {
"type": "http",
"url": "https://diagrams-mcp-production.up.railway.app/mcp"
}
}
}Pégalo en .vscode/mcp.json de tu proyecto
{
"servers": {
"diagrams": {
"type": "stdio",
"command": "uvx",
"args": [
"diagrams-mcp-server"
]
}
}
}Tu navegador te pide permiso para abrir la app; luego la app muestra la configuración y te pide confirmar. Los valores de las claves quedan vacíos para que los completes tú.
ChatGPT solo se conecta a servidores en internet:
https://diagrams-mcp-production.up.railway.app/mcpLos nombres de los menús pueden variar un poco según el plan y con el tiempo.
Tu elección se guarda en una cookie en este dispositivo; no necesitas cuenta.
Esta configuración se genera a partir de la ficha del creador en el registro. Si el README dice otra cosa, sigue el README.
Todavía no hemos leído la lista de herramientas de este servidor; revisamos los endpoints por turnos.
Revisamos información que cualquiera puede ver; no hemos leído el código. Las revisiones que no aplican no se cuentan. · Revisado el 7 nov 2026
Quien lo publicó (mskry) no es el dueño del repo (ByteOverDev); puede que otra persona lo haya listado
Todavía no hemos leído este repo en GitHub
Todavía no hemos leído este repo en GitHub
Aún sin revisar; revisamos los endpoints por turnos
Aún sin revisar; revisamos los endpoints por turnos
Aún sin revisar; leemos la lista de herramientas cuando revisamos el endpoint
Comparado con todos los servidores activos de esta categoría en el registro. Las estrellas solo cuentan cuando quien lo publica es dueño del repo.
Superó 0 de 1 revisiones básicas aplicables. No hemos leído el código. Antes de agregar una clave o un token, revisa qué acceso pide el servidor y usa una clave que tenga solo los permisos que necesitas.
El registro no indica ninguna clave obligatoria, aunque algunos servidores te piden iniciar sesión la primera vez que los usas.
Funciona de las dos formas: instálalo en tu computadora o conéctate a la versión en la nube.
El repo de GitHub cambió por última vez –, y la última versión (0.1.2) llegó al registro hace 7 meses.
Las apps compatibles con MCP, como Claude Desktop, Claude Code, Cursor y VS Code. Se conecta por URL, así que también funcionan las apps que aceptan servidores MCP remotos, como ChatGPT en modo desarrollador.
En la misma categoría: Figma Context MCP, Claude Real Video, Figma MCP Server
Servidores de la misma categoría hechos por otros creadores, ordenados por estrellas.
Cómo leer una tarjeta:★ Estrellas de GitHubiTres pilares: reseñas · revisiones · usoiActualizado = fecha en que se publicó la última versión en el registroi
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.
Copiado tal cual del repo del creador. PopNx MCP no lo ha revisado ni lo respalda. Se quitaron HTML, imágenes y scripts. Los enlaces llevan fuera de este sitio.
MCP server for generating cloud architecture diagrams, flowcharts, sequence diagrams, and more — powered by three rendering engines: mingrammer/diagrams, Mermaid, and PlantUML.
Graphviz is required for the default local/in-process rendering mode. Mermaid CLI and PlantUML are optional — install them only if you need those specific rendering engines locally.
| Dependency | Required for | Install |
|---|---|---|
| Graphviz | render_diagram (cloud architecture) | brew install graphviz |
| Mermaid CLI | render_mermaid (flowcharts, sequence, etc.) | npm install -g @mermaid-js/mermaid-cli |
| Java + PlantUML | render_plantuml (UML diagrams) | brew install openjdk + download plantuml.jar |
Via uvx (recommended):
uvx diagrams-mcp-server
Via pip:
pip install diagrams-mcp-server
From source:
pip install git+https://github.com/ByteOverDev/diagrams-mcp.git
Claude Desktop
Add to your claude_desktop_config.json (Settings → Developer → Edit Config):
uvx (recommended):
{
"mcpServers": { "diagrams-mcp": { "command": "uvx", "args": ["diagrams-mcp-server"] } } }
pip:
{
"mcpServers": { "diagrams-mcp": { "command": "diagrams-mcp-server" } } }
Claude Code (CLI)
Run:
claude mcp add diagrams-mcp -- uvx diagrams-mcp-server
Or add to your .mcp.json:
uvx (recommended):
{
"mcpServers": { "diagrams-mcp": { "command": "uvx", "args": ["diagrams-mcp-server"] } } }
pip:
{
"mcpServers": { "diagrams-mcp": { "command": "diagrams-mcp-server" } } }
Cursor
Add to your .cursor/mcp.json:
uvx (recommended):
{
"mcpServers": { "diagrams-mcp": { "command": "uvx", "args": ["diagrams-mcp-server"] } } }
pip:
{
"mcpServers": { "diagrams-mcp": { "command": "diagrams-mcp-server" } } }
Windsurf
Add to your ~/.codeium/windsurf/mcp_config.json:
uvx (recommended):
{
"mcpServers": { "diagrams-mcp": { "command": "uvx", "args": ["diagrams-mcp-server"] } } }
pip:
{
"mcpServers": { "diagrams-mcp": { "command": "diagrams-mcp-server" } } }
VS Code
Add to your .vscode/mcp.json:
uvx (recommended):
{
"servers": { "diagrams-mcp": { "type": "stdio", "command": "uvx", "args": ["diagrams-mcp-server"] } } }
pip:
{
"servers": { "diagrams-mcp": { "type": "stdio", "command": "diagrams-mcp-server" } } }
list_providers() → list[str] — List all diagram providers (aws, gcp, k8s, azure, onprem, etc.)list_services(provider) → list[str] — List service categories within a provider (e.g. aws → compute, database, network)list_nodes(provider, service) → list[dict] — List node classes for a provider.service pair with import pathssearch_nodes(query) → list[dict] — Search for nodes by keyword across all providers (e.g. "postgres", "lambda")render_diagram(code) → Image (PNG) — Execute a Python script using mingrammer/diagrams in a sandboxed subprocess. Returns a rendered cloud architecture diagram.render_mermaid(definition) → Image (PNG/SVG) — Render a Mermaid diagram definition (flowcharts, sequence, class, ER, state, Gantt, and more).render_plantuml(definition) → Image (PNG) — Render a PlantUML diagram definition (sequence, class, component, activity, state, deployment).find_equivalent(node, target_provider?) → dict — Find equivalent services across cloud providers (e.g. EC2 → ComputeEngine on GCP).list_categories() → list[dict] — List all 30 infrastructure role categories with mapped nodes across providers.The server provides reference documentation accessible via MCP resource URIs:
| URI | Description |
|---|---|
diagrams://reference/diagram | Diagram constructor parameters, defaults, and usage |
diagrams://reference/edge | Edge operators, labels, styling, and chaining |
diagrams://reference/cluster | Cluster nesting, styling, and graph attributes |
diagrams://reference/mermaid | Mermaid syntax examples for 6 diagram types |
diagrams://reference/plantuml | PlantUML syntax examples for 6 diagram types |
"Draw an AWS architecture with an ALB routing to two ECS services, backed by RDS and ElastiCache"
from diagrams import Diagram, Cluster
from diagrams.aws.network import ALB from diagrams.aws.compute import ECS from diagrams.aws.database import RDS, ElastiCache
with Diagram("ECS Service", direction="LR"): lb = ALB("ALB")
with Cluster("ECS Cluster"): services = [ECS("Web"), ECS("API")]
lb >> services services[0] >> ElastiCache("Cache") services[1] >> RDS("Database")
"Create a flowchart showing a CI/CD pipeline"
"Show the authentication flow between a client, API gateway, and auth service"
@startuml
Client -> "API Gateway": POST /login "API Gateway" -> "Auth Service": Validate credentials "Auth Service" --> "API Gateway": JWT token "API Gateway" --> Client: 200 OK + token Client -> "API Gateway": GET /data (Bearer token) "API Gateway" -> "Auth Service": Verify token "Auth Service" --> "API Gateway": Valid "API Gateway" --> Client: 200 OK + data @enduml
# Clone and install
git clone https://github.com/ByteOverDev/diagrams-mcp.git cd diagrams-mcp pip install -e ".[dev]"
pytest
ruff check . ruff format .
diagrams-mcp-server
For hosted deployments, the MCP server can run as a lightweight facade that delegates render work to a separate renderer service. This keeps the always-on MCP process small while Graphviz, Chromium, Mermaid CLI, Java, and PlantUML live only in the renderer image.
# Terminal 1: renderer service
RENDERER_HOST=0.0.0.0 RENDERER_PORT=8001 diagrams-renderer-server
FASTMCP_TRANSPORT=http \ FASTMCP_HOST=0.0.0.0 \ FASTMCP_PORT=8000 \ DIAGRAMS_RENDERER_MODE=remote \ DIAGRAMS_RENDERER_URL=http://127.0.0.1:8001 \ diagrams-mcp-server
Docker/Railway examples are included:
| File | Purpose |
|---|---|
Dockerfile.facade | Slim MCP facade image without renderer-only binaries |
Dockerfile.renderer | Renderer image with Graphviz, Chromium, Mermaid CLI, Java, and PlantUML |
railway.facade.toml | Example Railway facade service config |
railway.renderer.toml | Example Railway renderer service config |
Key environment variables:
| Variable | Purpose |
|---|---|
DIAGRAMS_RENDERER_MODE=remote | Makes the facade use the HTTP renderer service |
DIAGRAMS_RENDERER_URL | Renderer base URL, for example http://diagrams-renderer.railway.internal:8080 |
DIAGRAMS_IMAGE_STORE_DIR | Optional file-backed temporary image store directory |
BASE_URL | Optional public base URL used when returning absolute download links |
The render_diagram tool supports all providers from the mingrammer/diagrams library, including:
AWS, GCP, Azure, Kubernetes, On-Premise, AlibabaCloud, OCI, OpenStack, DigitalOcean, Elastic, Outscale, Generic, and Custom nodes.
Use list_providers() and search_nodes(query) to discover available nodes.
MIT