Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
作者による説明(英語の原文)
Generate cloud architecture diagrams, flowcharts, and sequence diagrams.
この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。
このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。
使っているAIアプリを選んで、設定をコピーしてください。
必要なもの
どのアプリを使っていますか?
上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。
ウェブ、デスクトップ、モバイルのClaudeで使えます:
https://diagrams-mcp-production.up.railway.app/mcpClaude Desktop → Settings → Developer → Edit Config を開き、claude_desktop_config.json にこれを貼り付けます
{
"mcpServers": {
"diagrams": {
"command": "uvx",
"args": [
"diagrams-mcp-server"
]
}
}
}ターミナルでこれを実行します
claude mcp add --transport http diagrams https://diagrams-mcp-production.up.railway.app/mcpclaude mcp add diagrams -- uvx diagrams-mcp-serverプロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます
{
"mcpServers": {
"diagrams": {
"url": "https://diagrams-mcp-production.up.railway.app/mcp"
}
}
}プロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます
{
"mcpServers": {
"diagrams": {
"command": "uvx",
"args": [
"diagrams-mcp-server"
]
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
プロジェクトの .vscode/mcp.json に貼り付けます
{
"servers": {
"diagrams": {
"type": "http",
"url": "https://diagrams-mcp-production.up.railway.app/mcp"
}
}
}プロジェクトの .vscode/mcp.json に貼り付けます
{
"servers": {
"diagrams": {
"type": "stdio",
"command": "uvx",
"args": [
"diagrams-mcp-server"
]
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
ChatGPTがつなげるのは、インターネット上のサーバーだけです:
https://diagrams-mcp-production.up.railway.app/mcpメニューの名前は、プランや時期によって少し違うことがあります。
選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。
この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
このサーバーのツール一覧はまだ読み取っていません。エンドポイントは順番にチェックしています。
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月7日にチェック
公開者(mskry)がリポジトリの所有者(ByteOverDev)ではありません。別の人が登録した可能性があります
このリポジトリはまだGitHubから読み取っていません
このリポジトリはまだGitHubから読み取っていません
まだチェックしていません。エンドポイントは順番にチェックしています
まだチェックしていません。エンドポイントは順番にチェックしています
まだチェックしていません。エンドポイントをチェックするときにツール一覧を読み取ります
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック1項目のうち0項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。
どちらでも使えます。パソコンにインストールしても、クラウド版につないでもかまいません。
GitHubリポジトリの最終更新は–、最新バージョン(0.1.2)がレジストリに届いたのは7 か月前です。
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。URLでつながるので、リモートMCPサーバーに対応したアプリ(開発者モードのChatGPTなど)でも使えます。
同じカテゴリには: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、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
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