freemcplab / Directory / Playground / Excalidraw Architect MCP

● Community BV-Venky ⚡ Instant

Excalidraw Architect MCP

Name: Excalidraw Architect MCP MCP Server
Author: BV-Venky

by BV-Venky · BV-Venky/excalidraw-architect-mcp

Describe a system in plain English, get a clean Excalidraw diagram back — auto-laid out, ready to drop into a doc.

Excalidraw Architect MCP turns natural-language architecture descriptions into Excalidraw .json (and PNG, with cairo). Smart layout engine handles spacing and arrow routing so diagrams don't look like a tornado hit. Ideal for engineers who think in boxes-and-arrows but hate dragging shapes manually.

▶ Watch demo 📦 Install 💡 Use Cases

Why use it

Key features

Auto-layout — no manual placement
Swimlanes, clusters, sequence-style flows
Outputs Excalidraw .json (editable) and PNG (with optional cairo)
Configurable resolution multiplier for crisp PNGs
Local — no SaaS, no telemetry

Live Demo

What it looks like in practice

excalidraw-architect-mcp.replay ▶ ready

0/0

Install

Pick your client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "excalidraw-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

Open Claude Desktop → Settings → Developer → Edit Config. Restart after saving.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "excalidraw-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

Cursor uses the same mcpServers schema as Claude Desktop. Project config wins over global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "excalidraw-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

Click the MCP Servers icon in the Cline sidebar, then "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "excalidraw-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

Same shape as Claude Desktop. Restart Windsurf to pick up changes.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "excalidraw-architect-mcp",
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  ]
}

Continue uses an array of server objects rather than a map.

~/.config/zed/settings.json

{
  "context_servers": {
    "excalidraw-architect-mcp": {
      "command": {
        "path": "uvx",
        "args": [
          "excalidraw-architect-mcp"
        ]
      }
    }
  }
}

Add to context_servers. Zed hot-reloads on save.

claude mcp add excalidraw-architect-mcp -- uvx excalidraw-architect-mcp

One-liner. Verify with claude mcp list. Remove with claude mcp remove.

Use Cases

Real-world ways to use Excalidraw Architect MCP

Generate an architecture diagram for a design doc

👤 Engineers writing design docs ⏱ ~10 min beginner

When to use: Your design doc needs a system diagram and you don't want to spend an hour in Excalidraw.

Prerequisites

Excalidraw (web or desktop) — excalidraw.com — paste the .json output

Flow

Describe

Generate an Excalidraw diagram: API gateway → auth service → user service & orders service → Postgres. Add a Redis cache between API and user service.✓ Copied

→ Excalidraw .json returned
Refine

Add a sidecar logging agent on each service. Group services in a 'core' cluster.✓ Copied

→ Updated diagram with cluster + sidecars
Export

Render to PNG at 3x and save to /docs/arch.png.✓ Copied

→ PNG written

Outcome: Doc-ready diagram in 2 minutes instead of 30.

Pitfalls

Too many nodes — diagram becomes unreadable — Ask for clusters and a higher abstraction level first

Combine with: filesystem

Visualize the call flow through a codebase

👤 Engineers reviewing unfamiliar code ⏱ ~5 min beginner

When to use: You stepped through a request — now you want a picture.

Flow

Describe what you saw

Diagram a request flow: HTTP handler → validator → service → repo → DB. Show validation error path branching off.✓ Copied

→ Sequence-style diagram

Outcome: Picture worth 200 words in your PR description.

Pitfalls

Sequence vs box-and-arrow confusion — Be explicit — 'sequence diagram' or 'component diagram'

Combinations

Pair with other MCPs for X10 leverage

excalidraw-architect-mcp + filesystem

Save versioned diagrams alongside design docs

Save the .excalidraw.json next to the doc and re-render to /docs/arch.png.✓ Copied

excalidraw-architect-mcp + github

Attach diagrams to PR descriptions

Generate the diagram and embed the PNG in PR #1234's description.✓ Copied

Tools

What this MCP exposes

Tool	Inputs	When to call	Cost
generate_diagram	description, layout?	Initial diagram from a prompt	free
modify_diagram	json, instruction	Iterative edits	free
to_png	json, scale?	Embed in a doc	free

Cost & Limits

What this costs to run

API quota: Local — none
Tokens per call: 300–2000
Monetary: Free
Tip: Iterate via modify_diagram instead of regenerating from scratch

Security

Permissions, secrets, blast radius

Minimum scopes: Local file write

Credential storage: None

Data egress: None — fully local

Troubleshooting

Common errors and fixes

PNG export fails

Install optional cairo dependency: pip install excalidraw-architect-mcp[png]

Layout looks crowded

Ask for cluster grouping or smaller node set

Excalidraw refuses to import

JSON schema may be slightly off; ask Claude to validate against latest Excalidraw schema

Alternatives