Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
제작자가 쓴 설명(영어 원문)
Render and validate diagrams as code: Mermaid, PlantUML, C4, Graphviz, D2 and more.
이 세 가지는 절대 하나의 점수로 합치지 않아요. 의견, 측정, 인기는 서로 다른 것이니까요.
이 서버는 아직 쉬운 말로 된 요약을 쓰지 못했어요. 아래는 레지스트리에서 읽어 온 사실이에요.
쓰고 있는 AI 앱을 고른 다음 설정을 복사하세요.
KROKI_URL필요한 것
어떤 앱을 쓰세요?
위에서 앱을 고르세요. 기억해 두었다가 다음부터는 버튼에 “…에 설치”라고 표시해요.
Claude Desktop → Settings → Developer → Edit Config를 열고 claude_desktop_config.json에 이 내용을 붙여 넣으세요
{
"mcpServers": {
"archform": {
"command": "npx",
"args": [
"-y",
"@archform/mcp"
],
"env": {
"KROKI_URL": "your-value"
}
}
}
}터미널에서 이 명령어를 실행하세요
claude mcp add archform --env KROKI_URL=your-value -- npx -y @archform/mcp실행하기 전에 빈 값을 채워 주세요.
프로젝트의 .cursor/mcp.json 또는 ~/.cursor/mcp.json에 붙여 넣으세요
{
"mcpServers": {
"archform": {
"command": "npx",
"args": [
"-y",
"@archform/mcp"
],
"env": {
"KROKI_URL": "your-value"
}
}
}
}브라우저가 앱을 열지 물어본 다음, 앱이 설정을 보여 주고 확인을 요청해요. 키 값은 비워 두니 직접 입력하세요.
프로젝트의 .vscode/mcp.json에 붙여 넣으세요
{
"servers": {
"archform": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@archform/mcp"
],
"env": {
"KROKI_URL": "your-value"
}
}
}
}브라우저가 앱을 열지 물어본 다음, 앱이 설정을 보여 주고 확인을 요청해요. 키 값은 비워 두니 직접 입력하세요.
이 서버는 내 컴퓨터에서 실행되는데, ChatGPT는 인터넷에 있는 서버에만 연결할 수 있어요. 다른 앱을 고르세요.
선택한 앱은 이 기기의 쿠키에만 저장돼요. 계정은 필요 없어요.
KROKI_URL env이 설정은 제작자의 레지스트리 정보로 만들었어요. README와 다르면 README를 따르세요.
내 컴퓨터에서 실행돼요. 설치하면 AI 앱에 도구 목록이 나타나요.
누구나 볼 수 있는 정보를 점검했고, 코드는 읽지 않았어요. 해당하지 않는 항목은 개수에서 뺐어요. · 2026년 11월 8일 점검
레지스트리 이름이 GitHub 계정 himanshu-mamgain 기준으로 확인되었고, 이 계정이 저장소를 소유하고 있어요
아직 GitHub에서 이 저장소를 읽어 오지 않았어요
아직 GitHub에서 이 저장소를 읽어 오지 않았어요
내 컴퓨터에서 실행되는 서버라 인터넷 엔드포인트가 없어요
내 컴퓨터에서 실행되며, 대신 로컬 설정을 사용해요
내 컴퓨터에서 실행돼요. 도구 목록은 인터넷 엔드포인트가 있는 서버에서만 읽을 수 있어요
레지스트리에서 이 카테고리의 활성 서버 전체와 비교했어요. 스타는 게시자가 저장소를 소유한 경우에만 세요.
해당하는 기본 점검 1개 중 1개를 통과했어요. 코드는 읽지 않았어요. 키나 토큰을 넣기 전에 서버가 어떤 권한을 요구하는지 확인하고, 꼭 필요한 권한만 있는 키를 쓰세요.
레지스트리에 필수 키가 나와 있지 않아요. 다만 처음 쓸 때 로그인을 요구하는 서버도 있어요.
내 컴퓨터에서 실행돼요. AI 앱이 필요할 때 실행하고, 데이터는 제작자의 서버를 거치지 않아요(서버 자체가 온라인 서비스를 호출하는 경우는 제외).
GitHub 저장소는 마지막으로 – 변경됐고, 최신 버전(0.2.2)은 18일 전 레지스트리에 올라왔어요.
Claude Desktop, Claude Code, Cursor, VS Code처럼 MCP를 지원하는 앱에서 쓸 수 있어요. 내 컴퓨터에 Node.js도 있어야 해요.
같은 카테고리에는: Figma Context MCP, Claude Real Video, Figma MCP Server
같은 카테고리에서 다른 제작자가 만든 서버예요. 스타 순으로 정렬했어요.
카드 보는 법:★ 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, 이미지, 스크립트는 제거했어요. 링크를 누르면 이 사이트를 벗어나요.
An MCP server that lets AI assistants render and validate diagrams as code: Mermaid, PlantUML, C4-PlantUML, Graphviz, D2, Structurizr, BPMN and Excalidraw.
It works in Claude Desktop, Claude Code, Cursor and VS Code over stdio, and in ChatGPT developer mode as a remote Streamable HTTP endpoint.
The assistant writes diagram source like this D2:
direction: right
user: User {shape: person} ai: AI assistant mcp: Archform MCP kroki: Kroki {shape: cylinder} user -> ai: "draw our architecture" ai -> mcp: render_diagram mcp -> kroki: diagram source kroki -> mcp: SVG / PNG mcp -> ai: image + share link
render_diagram turns it into an image and a share link. The image below is that link:
Try it: once Archform is connected, ask your assistant:
Draw a C4 context diagram of a URL shortener.
Or *"Turn schema.prisma into an ER diagram"*, or *"Draw a sequence diagram of our login flow"*.
Privacy: rendering is done by Kroki. By default, diagram source is sent to the public kroki.io service. If your diagrams describe anything you would not paste into a public website, self-host Kroki and set
KROKI_URL.
All tools are read-only (readOnlyHint: true, openWorldHint: true).
| Tool | Input | Result |
|---|---|---|
list_formats | none | Every supported format with aliases, outputs, a docs link and a minimal valid example |
render_diagram | format, source (≤ 100 KB), output (svg default, or png) | SVG as an embedded image/svg+xml resource, or PNG as image content, plus a shareable kroki.io link. Invalid source returns isError: true with the parser message and line |
validate_diagram | format, source | { valid, errors: [{ line?, message }] }. An invalid diagram is a normal result, not a tool error |
| Format | Aliases | Outputs |
|---|---|---|
mermaid | svg, png | |
plantuml | svg, png | |
c4plantuml | svg, png | |
graphviz | dot | svg, png |
d2 | svg | |
structurizr | svg, png | |
bpmn | svg | |
excalidraw | svg |
Requires Node.js 22 or later.
Claude Desktop: add to claude_desktop_config.json:
{
"mcpServers": { "archform": { "command": "npx", "args": ["-y", "@archform/mcp"] } } }
Claude Code:
claude mcp add archform -- npx -y @archform/mcp
Cursor: add to ~/.cursor/mcp.json (or .cursor/mcp.json in a project):
{
"mcpServers": { "archform": { "command": "npx", "args": ["-y", "@archform/mcp"] } } }
VS Code: add to .vscode/mcp.json:
{
"servers": { "archform": { "type": "stdio", "command": "npx", "args": ["-y", "@archform/mcp"] } } }
To use your own Kroki, add "env": { "KROKI_URL": "https://kroki.internal.example.com" } to the server entry.
npx -y @archform/mcp --http --port 3000
POST /mcp: MCP traffic (stateless)GET /health: health checkBy default the server binds to 127.0.0.1 and rejects requests whose Host or Origin is not localhost (DNS rebinding protection). To expose it publicly, for example for ChatGPT developer mode, bind to all interfaces and name your public hostname:
HOST=0.0.0.0 ALLOWED_HOSTS=mcp.example.com TRUST_PROXY=1 RATE_LIMIT_PER_CLIENT=0 PORT=8080 npx -y @archform/mcp --http
Then add https://mcp.example.com/mcp as a connector in ChatGPT (Settings → Connectors, developer mode) with no authentication. Serve it behind HTTPS.
The HTTP endpoint limits request bodies to 512 KB and counts tool calls, not HTTP requests. A session's initialize and tools/list requests are not counted.
RATE_LIMIT (default 120 per minute) caps tool calls from all clients combined. Size it to what your Kroki backend can handle. The default is polite to the public kroki.io; raise it for a self-hosted Kroki.RATE_LIMIT_PER_CLIENT (default 60 per minute) stops one client from using the whole budget. ChatGPT calls your server from OpenAI's servers, so all ChatGPT users share a handful of IPs, and this limit applies to them together. On a deployment that mainly serves ChatGPT, set RATE_LIMIT_PER_CLIENT=0 (as in the example above) or make it equal to RATE_LIMIT, so ChatGPT users can use the whole overall budget.TRUST_PROXY=1 (the number of proxies in front of the server) so the limiter uses the address your proxy added to X-Forwarded-For. Leave it unset when clients connect directly. Clients can write anything into that header, so it is ignored unless TRUST_PROXY is set.When a single tool call is over a limit, the model gets a normal tool result with isError: true and a message like "Rate limit reached: … Retry in 42s.", so it can tell the user to wait. An HTTP 429 would show up only as a generic connector failure. Batched or malformed requests over the limit get 429 with Retry-After.
The counters are in memory, so each instance enforces its own limits.
| Flag / variable | Default | Meaning |
|---|---|---|
--http | off | Serve Streamable HTTP instead of stdio |
--port, PORT | 3000 | HTTP port |
--host, HOST | 127.0.0.1 | HTTP bind address |
ALLOWED_HOSTS | Comma-separated Host values accepted on a public bind | |
RATE_LIMIT | 120 | Tool calls per minute across all clients; 0 disables |
RATE_LIMIT_PER_CLIENT | 60 | Tool calls per minute per client IP; 0 disables |
TRUST_PROXY | 0 | Number of reverse proxies whose X-Forwarded-For entries are trusted (true = 1) |
KROKI_URL | https://kroki.io | Kroki server used for rendering and share links |
Kroki ships as Docker images. The core image covers PlantUML, C4-PlantUML, Graphviz, D2 and Structurizr; Mermaid, BPMN and Excalidraw each need a companion container:
# docker-compose.yml
services: kroki: image: yuzutech/kroki ports: ["8000:8000"] environment: KROKI_MERMAID_HOST: mermaid KROKI_BPMN_HOST: bpmn KROKI_EXCALIDRAW_HOST: excalidraw mermaid: image: yuzutech/kroki-mermaid bpmn: image: yuzutech/kroki-bpmn excalidraw: image: yuzutech/kroki-excalidraw
docker compose up -d
KROKI_URL=http://localhost:8000 npx -y @archform/mcp
Shareable links then point at your Kroki instance, so they only open for people who can reach it. See the Kroki installation docs for details.
pnpm install
pnpm test # unit + in-process integration tests (Kroki stubbed) KROKI_LIVE=1 pnpm test # also run the live tests against KROKI_URL pnpm build npx @modelcontextprotocol/inspector node dist/index.js # stdio node dist/index.js --http # then point the Inspector at http://127.0.0.1:3000/mcp
MIT