Excalidraw Architect MCP — Casos de uso, Instalar & Demo ao vivo

Por que usar

Principais recursos

Layout automático — sem posicionamento manual
Swimlanes, clusters, fluxos no estilo de sequência
Gera .json do Excalidraw (editável) e PNG (com cairo opcional)
Multiplicador de resolução configurável para PNGs nítidos
Local — sem SaaS, sem telemetria

Demo ao vivo

Como fica na prática

excalidraw-architect-mcp.replay ▶ pronto

0/0

Instalar

Escolha seu cliente

~/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"
      ]
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

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

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

Cursor usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

VS Code → Cline → MCP Servers → Edit

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

Clique no ícone MCP Servers na barra lateral do Cline, depois "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.continue/config.json

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

O Continue usa um array de objetos de servidor em vez de um map.

~/.config/zed/settings.json

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

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

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

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: Excalidraw Architect MCP

Gerar um diagrama de arquitetura para um documento de design

👤 Engenheiros escrevendo documentos de design ⏱ ~10 min beginner

Quando usar: Seu documento de design precisa de um diagrama de sistema e você não quer gastar uma hora no Excalidraw.

Pré-requisitos

Excalidraw (web ou desktop) — excalidraw.com — cole o output .json

Fluxo

Descrever

Gere um diagrama Excalidraw: API gateway → serviço de autenticação → serviço de usuários e serviço de pedidos → Postgres. Adicione um cache Redis entre a API e o serviço de usuários.✓ Copiado

→ .json do Excalidraw retornado
Refinar

Adicione um agente de logging sidecar em cada serviço. Agrupe os serviços em um cluster 'core'.✓ Copiado

→ Diagrama atualizado com cluster + sidecars
Exportar

Renderize para PNG em 3x e salve em /docs/arch.png.✓ Copiado

→ PNG gravado

Resultado: Diagrama pronto para o documento em 2 minutos em vez de 30.

Armadilhas

Muitos nós — o diagrama fica ilegível — Peça primeiro clusters e um nível de abstração mais alto

Combine com: filesystem

Visualizar o fluxo de chamadas em um código-base

👤 Engenheiros revisando código desconhecido ⏱ ~5 min beginner

Quando usar: Você avançou por uma requisição — agora quer uma imagem.

Fluxo

Descrever o que você viu

Diagrame um fluxo de requisição: HTTP handler → validador → serviço → repositório → banco de dados. Mostre o caminho de erro de validação se ramificando.✓ Copiado

→ Diagrama no estilo de sequência

Resultado: Uma imagem que vale 200 palavras na descrição do seu PR.

Armadilhas

Confusão entre diagrama de sequência e caixa-e-seta — Seja explícito — 'diagrama de sequência' ou 'diagrama de componentes'

Combinações

Combine com outros MCPs para 10× de alavancagem

excalidraw-architect-mcp + filesystem

Salvar diagramas versionados junto com documentos de design

Salve o .excalidraw.json ao lado do documento e re-renderize para /docs/arch.png.✓ Copiado

excalidraw-architect-mcp + github

Anexar diagramas às descrições de PR

Gere o diagrama e incorpore o PNG na descrição do PR #1234.✓ Copiado

Ferramentas

O que este MCP expõe

Ferramenta	Entradas	Quando chamar	Custo
generate_diagram	description, layout?	Diagrama inicial a partir de um prompt	free
modify_diagram	json, instruction	Edições iterativas	free
to_png	json, scale?	Incorporar em um documento	free

Custo e limites

O que custa rodar

Cota de API: Local — nenhuma
Tokens por chamada: 300–2000
Monetário: Gratuito
Dica: Itere via modify_diagram em vez de regenerar do zero

Segurança

Permissões, segredos, alcance

Escopos mínimos: Escrita local de arquivos

Armazenamento de credenciais: Nenhum

Saída de dados: Nenhuma — totalmente local

Solução de problemas

Erros comuns e correções

Exportação PNG falha

Instale a dependência opcional cairo: pip install excalidraw-architect-mcp[png]

Layout parece apertado

Peça agrupamento em clusters ou conjunto menor de nós

Excalidraw se recusa a importar

O schema JSON pode estar ligeiramente errado; peça ao Claude para validar contra o schema mais recente do Excalidraw

Alternativas

Excalidraw Architect MCP vs. outros

Alternativa	Quando usar	Troca
Mermaid via MCPs de mermaid	Você quer diagramas com controle de versão baseados em texto	Menos personalizável visualmente
Desenho manual no Excalidraw	Você gosta disso e tem tempo	Lento

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills