Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Create editable Draw.io architecture diagrams from prompts and reference images.
Wähle die KI-App, die du nutzt, und kopiere die Einstellungen.
3/3 Prüfungen bestanden · Läuft auf deinem Computer
Zuerst: Welche KI nutzt du?
Wähle deine App, dann erscheinen die Schritte unten.
Klappt mit Claude, aber erst etwas vorbereiten
Installiere zuerst Node.js auf deinem Computer (nur einmal) · Nur in der Claude-App für den Computer (Windows oder Mac), nicht im Web oder auf dem Handy
Nur einmal; gilt für alle Server, die Node.js brauchen
SettingsDeveloperEdit Config
{
"mcpServers": {
"drawarch": {
"command": "npx",
"args": [
"-y",
"drawarch-mcp"
]
}
}
}Nutze Drawarch und sag mir, was du für mich tun kannst; zeig mir dann eine Sache✓ Wenn Claude sagt, dass es Drawarch nutzt, oder ein Werkzeug von Drawarch in der Antwort zeigt, bist du verbunden
Menünamen am 11. Nov. 2026 mit der Hilfe von Anthropic abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen
ChatGPT kann Drawarch noch nicht verbinden
Drawarch läuft auf deinem Computer, aber ChatGPT verbindet nur Server, die im Web laufen
A · Eine App nutzen, die Drawarch verbinden kann
B · Andere in Design, Bilder & Audio, die mit ChatGPT funktionieren
Aus den meistgenutzten derselben Kategorie, nur solche, die per Adresse ohne Schlüssel verbinden
Klappt mit Claude Code, aber erst etwas vorbereiten
Installiere zuerst Node.js auf deinem Computer (nur einmal)
Nur einmal; gilt für alle Server, die Node.js brauchen
Mac: Command+Leertaste drücken und Terminal tippen · Windows: PowerShell öffnen
claude mcp add --scope user drawarch -- npx -y drawarch-mcpDrawarch sollte in der Liste als verbunden erscheinen
Nutze Drawarch und sag mir, was du für mich tun kannst; zeig mir dann eine Sache✓ Wenn Claude Code sagt, dass es Drawarch nutzt, oder ein Werkzeug von Drawarch in der Antwort zeigt, bist du verbunden
Menünamen am 11. Nov. 2026 mit der Hilfe von Anthropic abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen
Klappt mit Cursor, aber erst etwas vorbereiten
Installiere zuerst Node.js auf deinem Computer (nur einmal)
Nur einmal; gilt für alle Server, die Node.js brauchen
Nutze Drawarch und sag mir, was du für mich tun kannst; zeig mir dann eine Sache✓ Wenn Cursor sagt, dass es Drawarch nutzt, oder ein Werkzeug von Drawarch in der Antwort zeigt, bist du verbunden
Menünamen am 11. Nov. 2026 mit der Hilfe von Cursor abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen
Klappt mit VS Code, aber erst etwas vorbereiten
Installiere zuerst Node.js auf deinem Computer (nur einmal)
Nur einmal; gilt für alle Server, die Node.js brauchen
VS Code fragt nach einer Bestätigung; klicke Install
Nutze Drawarch und sag mir, was du für mich tun kannst; zeig mir dann eine Sache✓ Wenn VS Code sagt, dass es Drawarch nutzt, oder ein Werkzeug von Drawarch in der Antwort zeigt, bist du verbunden
Menünamen am 11. Nov. 2026 mit der Hilfe von VS Code abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen
Claude Code
claude mcp add --scope user drawarch -- npx -y drawarch-mcpClaude Desktop (claude_desktop_config.json)
{
"mcpServers": {
"drawarch": {
"command": "npx",
"args": [
"-y",
"drawarch-mcp"
]
}
}
}Cursor (~/.cursor/mcp.json)
{
"mcpServers": {
"drawarch": {
"command": "npx",
"args": [
"-y",
"drawarch-mcp"
]
}
}
}VS Code (mcp.json)
{
"servers": {
"drawarch": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"drawarch-mcp"
]
}
}
}Diese Einstellungen werden aus dem Registry-Eintrag des Entwicklers erzeugt. Wenn in der README etwas anderes steht, folge der README.
Basierend darauf, wie sich dieser Server verbindet, und auf der eigenen Doku jeder App, geprüft am 10. Nov. 2026.
Laufen auf deinem Computer in
ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatRaycast
Läuft auf deinem Computer; die Tool-Liste erscheint nach der Installation in deiner KI-App.
Wir prüfen Informationen, die jeder sehen kann; den Code haben wir nicht gelesen. Checks, die nicht zutreffen, werden nicht mitgezählt. · Geprüft am 12. Nov. 2026
Der Registry-Name wurde mit dem GitHub-Konto Ajey95 bestätigt, dem das Repo gehört
Code zuletzt geändert: vor 9 Tagen
Nutzt MIT
Dieser Server läuft auf deinem Computer; es gibt keinen Endpunkt im Internet
Läuft auf deinem Computer und nutzt stattdessen lokale Einstellungen
Läuft auf deinem Computer; Tool-Listen können wir nur von Endpunkten im Internet lesen
Fragen, Tipps teilen oder melden, dass etwas nicht geht. Sortiert nach „hilfreich“.
Noch keine Beiträge. Stell die erste Frage oder teile einen Tipp.
Beiträge hier stammen von Nutzern, nicht vom PopNx-Team.
Noch keine Bewertungen
Verglichen mit allen aktiven Servern dieser Kategorie in der Registry. Sterne zählen nur, wenn dem Herausgeber das Repo gehört.
Er hat 3 von 3 zutreffenden Basischecks bestanden. Den Code haben wir nicht gelesen. Bevor du einen Schlüssel oder Token hinzufügst, sieh nach, welche Zugriffe der Server verlangt, und nutze einen Schlüssel, der nur die Berechtigungen hat, die du brauchst.
Die Registry nennt keinen erforderlichen Schlüssel, manche Server bitten dich aber bei der ersten Nutzung, dich anzumelden.
Er läuft auf deinem Computer. Deine KI-App startet ihn bei Bedarf, und die Daten laufen nicht über die Server des Entwicklers (außer der Server ruft selbst einen Onlinedienst auf).
Das GitHub-Repo wurde zuletzt vor 9 Tagen geändert, und die neueste Version (0.2.0) kam vor 3 Monaten in die Registry.
Apps, die MCP unterstützen, etwa Claude Desktop, Claude Code, Cursor und VS Code. Außerdem brauchst du Node.js auf deinem Computer.
In derselben Kategorie: Figma Context MCP, AutoClip, Next AI Draw.io
Server derselben Kategorie von anderen Entwicklern, sortiert nach Sternen.
So liest du eine Karte:↓ Downloads pro Wochei★ GitHub-SterneiDrei Säulen: Bewertungen · Checks · NutzungiAktualisiert = neueste Version in der Registry veröffentlichti
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Clip long videos into short clips with covers and captions. Local CLI and MCP.
draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand
Unverändert aus dem Repo des Entwicklers übernommen. PopNx MCP hat den Inhalt weder geprüft noch empfiehlt es ihn. HTML, Bilder und Skripte wurden entfernt. Links führen von dieser Website weg.
DrawArch MCP
Turn architecture prompts and reference images into portable, natively editable Draw.io files.
Your MCP host does the visual reasoning. DrawArch does the deterministic rendering, asset embedding, validation, and delivery.
Quick start · See the workflow · Architecture · Contribute
This is not a screenshot pasted into a diagram. Containers, labels, icons, shapes, connector endpoints, ports, and waypoints remain separate native mxCell objects. Assets are embedded inside the .drawio file, so the result remains portable and editable offline.
[!IMPORTANT]
DrawArch does not call another LLM and does not require a second LLM API key. ChatGPT, Claude, Codex, Cursor, or another vision-capable MCP host analyzes the request or image and supplies the scene graph.
| Capability | What it means | |
|---|---|---|
| 🧩 | Native editability | Move, restyle, relabel, reconnect, or delete individual objects in diagrams.net. |
| 🎯 | Reference recreation | Rebuild an attached architecture image with absolute geometry, layers, z-order, ports, and waypoints. |
| 🌐 | Real-world assets | Use bundled icons, Iconify-compatible icons, user images, or approved HTTPS image sources. |
| 📦 | Portable artifacts | The generated .drawio is returned directly through MCP with all image assets embedded. |
| 🔐 | Approval-aware rendering | Immutable plan revisions and revision-bound approval tokens prevent stale or unreviewed renders. |
| ✅ | Validation built in | Check Draw.io structure, references, asset safety, and structural coverage before accepting output. |
Attach an architecture image to your MCP host and ask:
Recreate this image with DrawArch. Preserve its layout, labels, icons, grouping, and connector routing. Keep every visible object editable and use real icons where appropriate.
The host and DrawArch then follow a reviewable four-step loop:
prepare_reference_recreation with a typed absolute scene graph.create_reference_drawio safely resolves and embeds assets, renders native cells, validates the file, and returns the .drawio resource.compare_reference_recreation measures structural coverage; the host adjusts the plan and repeats when needed.flowchart LR
A[Prompt or reference image] --> B[Vision-capable MCP host] B -->|typed scene graph| C{DrawArch MCP} C --> D[Plan revision & approval] D --> E[Safe asset resolver] E --> F[Native Draw.io renderer] F --> G[Validation & comparison] G -->|portable resource| H[Editable .drawio file] G -. revise .-> B
In plain terms: your existing AI analyzes the image; DrawArch turns that analysis into a controlled, validated, editable file. The complete contract is demonstrated in examples/reference-recreation.json.
| Requirement | DrawArch | Flat image generation |
|---|---|---|
| Edit individual components | ✅ | ❌ |
| Reattach and reroute connectors | ✅ | ❌ |
| Preserve explicit IDs and hierarchy | ✅ | ❌ |
| Work offline after generation | ✅ | Usually |
| Validate structure automatically | ✅ | ❌ |
| Recreate with real embedded icons | ✅ | Inconsistent |
| Iterate through a reviewable plan | ✅ | ❌ |
| Guarantee pixel-identical output | No — host-guided iteration | No |
DrawArch optimizes for high-fidelity, editable reconstruction, not an opaque pixel replica. The host vision model can inspect the result, update geometry or styling, and render another immutable revision.
Requires Node.js 20+ or Docker.
npx -y drawarch-mcp@0.2.0
DrawArch uses stdio by default. Diagnostics go to stderr, preserving stdout for MCP messages.
{
"mcpServers": { "drawarch": { "command": "npx", "args": ["-y", "drawarch-mcp@0.2.0"], "env": { "DRAWARCH_OUTPUT_DIR": "/absolute/path/to/diagrams", "DRAWARCH_ONLINE_ASSETS": "false" } } } }
On Windows hosts that do not resolve npx directly, set command to npx.cmd. You can also use the source checkout and configure an absolute dist/src/index.js path.
git clone https://github.com/Ajey95/drawarch-mcp.git
cd drawarch-mcp npm ci npm test npm run build
Then configure your host:
{
"mcpServers": { "drawarch": { "command": "node", "args": ["/absolute/path/to/drawarch-mcp/dist/src/index.js"], "env": { "DRAWARCH_OUTPUT_DIR": "/absolute/path/to/diagrams" } } } }
docker run --rm -p 3000:3000 \
-e DRAWARCH_API_KEY=replace-with-a-long-random-secret \ -e DRAWARCH_APPROVAL_SECRET=replace-with-another-random-secret \ -e DRAWARCH_ALLOWED_HOSTS=localhost,127.0.0.1 \ -e DRAWARCH_ALLOWED_ORIGINS=localhost,127.0.0.1 \ -v drawarch-data:/data \ ghcr.io/ajey95/drawarch-mcp:0.2.0
The container runs Streamable HTTP on http://localhost:3000/mcp. Its public health probe is GET /health; MCP and file downloads require the configured bearer token.
| Host type | Recommended transport | Notes |
|---|---|---|
| Claude Desktop / Claude Code | stdio or remote HTTP | Local stdio is simplest; remote connectors can use /mcp. |
| Codex / Cursor / VS Code | stdio or remote HTTP | Use local stdio for per-developer output or a shared authenticated service. |
| ChatGPT | remote Streamable HTTP | ChatGPT cannot spawn the local stdio process; deploy the container behind HTTPS first. |
| CI and team services | Streamable HTTP | Set bearer auth, stable approval secret, exact host/origin allowlists, TLS, and a persistent output volume. |
DrawArch currently provides the deployable server and public container, not a managed hosted endpoint. Operators supply the HTTPS domain and infrastructure.
| Tool | Purpose |
|---|---|
list_themes | List six built-in visual themes. |
list_assets | Search the bundled real-world icon catalog. |
resolve_asset | Resolve a bundled or opt-in online SVG with provenance. |
create_drawio | Generate a deterministic themed architecture diagram. |
validate_drawio | Validate a generated architecture file. |
| Tool | Purpose |
|---|---|
prepare_reference_recreation | Store an absolute editable scene graph and optionally approve its sources. |
update_reference_plan | Create an immutable next revision and invalidate earlier approvals. |
get_reference_plan | Read the latest scene-graph revision for review. |
create_reference_drawio | Render an approved plan and return the portable .drawio artifact. |
validate_reference_drawio | Validate native structure, references, and embedded-image safety. |
compare_reference_recreation | Score structural coverage and report missing editable elements. |
Reference plans support four asset modes:
| Mode | Source | Server opt-in required? |
|---|---|---|
bundled | Original MIT-licensed DrawArch SVG catalog | No |
online | Iconify-compatible icon query | Yes |
data | User-provided SVG, PNG, JPEG, or WebP data URI | No |
remote | Explicit approved HTTPS image URL | Yes |
Remote image handling rejects URL credentials, non-HTTPS protocols, custom ports, private or reserved DNS answers, unsafe redirects, excessive byte/pixel sizes, and active SVG content. Raster images are decoded and re-encoded before embedding. Online assets retain provider and license metadata; users remain responsible for verifying third-party license terms.
HTTP deployments additionally support bearer authentication, host validation, origin validation, safe output paths, atomic writes, and revision-bound HMAC approval tokens. See SECURITY.md for deployment guidance and vulnerability reporting.
Environment variables
| Variable | Default | Meaning |
|---|---|---|
DRAWARCH_TRANSPORT | stdio | Select stdio or http. |
DRAWARCH_OUTPUT_DIR | .drawarch-output | Restricted output and plan-storage directory. |
DRAWARCH_ONLINE_ASSETS | false | Enable opt-in online and remote image sources. |
DRAWARCH_ICONIFY_BASE_URL | Iconify API | HTTPS Iconify-compatible provider base URL. |
HOST | 127.0.0.1 | HTTP bind host. |
PORT | 3000 | HTTP listener port. |
DRAWARCH_API_KEY | unset | Bearer token for /mcp and /files; required for internet exposure. |
DRAWARCH_APPROVAL_SECRET | random per process | HMAC secret for approvals; set a stable secret for shared deployments. |
DRAWARCH_ALLOWED_HOSTS | local hosts | Comma-separated accepted Host values. |
DRAWARCH_ALLOWED_ORIGINS | local origins | Comma-separated accepted Origin hosts. |
DRAWARCH_PUBLIC_BASE_URL | listener URL | Public base URL reported by the server. |
npm ci
npm test # 83 tests at the 0.2.0 release npm run build npm run sample npm audit --audit-level=high npm pack --dry-run
The CI matrix verifies Node 20 and 22 on Windows and Linux and builds the production Docker image. Read docs/ARCHITECTURE.md for component boundaries a