Excalidraw Architect MCP — Cas d'usage, Installer & Démo en direct

Pourquoi l'utiliser

Fonctionnalités clés

Mise en page automatique — aucun placement manuel
Swimlanes, clusters, flux de style séquence
Exporte en .json Excalidraw (éditable) et PNG (avec cairo optionnel)
Multiplicateur de résolution configurable pour des PNG nets
Local — pas de SaaS, pas de télémétrie

Démo en direct

Aperçu en pratique

excalidraw-architect-mcp.replay ▶ prêt

0/0

Installer

Choisissez votre 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"
      ]
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

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

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

Cursor utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

VS Code → Cline → MCP Servers → Edit

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

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.continue/config.json

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

Continue utilise un tableau d'objets serveur plutôt qu'une map.

~/.config/zed/settings.json

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

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

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

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : Excalidraw Architect MCP

Générer un diagramme d'architecture pour un document de conception

👤 Ingénieurs rédigeant des documents de conception ⏱ ~10 min beginner

Quand l'utiliser : Votre document de conception a besoin d'un diagramme système et vous ne voulez pas passer une heure dans Excalidraw.

Prérequis

Excalidraw (web ou desktop) — excalidraw.com — collez la sortie .json

Déroulement

Décrire

Génère un diagramme Excalidraw : API gateway → service auth → service users & service orders → Postgres. Ajoute un cache Redis entre l'API et le service users.✓ Copié

→ Fichier .json Excalidraw retourné
Affiner

Ajoute un agent de logging sidecar sur chaque service. Groupe les services dans un cluster 'core'.✓ Copié

→ Diagramme mis à jour avec cluster + sidecars
Exporter

Rends en PNG à 3x et sauvegarde dans /docs/arch.png.✓ Copié

→ PNG écrit

Résultat : Diagramme prêt pour le doc en 2 minutes au lieu de 30.

Pièges

Trop de nœuds — le diagramme devient illisible — Demandez des clusters et un niveau d'abstraction plus élevé en premier

Combiner avec : filesystem

Visualiser le flux d'appels à travers une base de code

👤 Ingénieurs examinant du code inconnu ⏱ ~5 min beginner

Quand l'utiliser : Vous avez parcouru une requête — maintenant vous voulez une image.

Déroulement

Décrire ce que vous avez vu

Diagramme un flux de requête : handler HTTP → validateur → service → repo → DB. Montre le chemin d'erreur de validation qui se branche.✓ Copié

→ Diagramme de style séquence

Résultat : Une image qui vaut 200 mots dans votre description de PR.

Pièges

Confusion séquence vs boîte-et-flèche — Soyez explicite — « diagramme de séquence » ou « diagramme de composants »

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

excalidraw-architect-mcp + filesystem

Sauvegarder les diagrammes versionnés à côté des documents de conception

Sauvegarde le .excalidraw.json à côté du doc et re-rends vers /docs/arch.png.✓ Copié

excalidraw-architect-mcp + github

Joindre des diagrammes aux descriptions de PR

Génère le diagramme et intègre le PNG dans la description de la PR #1234.✓ Copié

Outils

Ce que ce MCP expose

Outil	Entrées	Quand appeler	Coût
generate_diagram	description, layout?	Diagramme initial depuis un prompt	gratuit
modify_diagram	json, instruction	Modifications itératives	gratuit
to_png	json, scale?	Intégrer dans un document	gratuit

Coût et limites

Coût d'exécution

Quota d'API: Local — aucun
Tokens par appel: 300–2000
Monétaire: Gratuit
Astuce: Itérez via modify_diagram plutôt que de régénérer depuis zéro

Sécurité

Permissions, secrets, portée

Portées minimales : Écriture locale de fichiers

Stockage des identifiants : Aucun

Sortie de données : Aucune — entièrement local

Dépannage

Erreurs courantes et correctifs

Export PNG échoue

Installez la dépendance cairo optionnelle : pip install excalidraw-architect-mcp[png]

La mise en page est surchargée

Demandez un regroupement en clusters ou un ensemble de nœuds plus petit

Excalidraw refuse l'import

Le schéma JSON peut être légèrement incorrect ; demandez à Claude de le valider par rapport au dernier schéma Excalidraw

Alternatives

Excalidraw Architect MCP vs autres

Alternative	Quand l'utiliser	Compromis
Mermaid via des MCP mermaid	Vous voulez des diagrammes text-first versionnés dans le code source	Moins personnalisable visuellement
Dessin manuel dans Excalidraw	Vous aimez ça et avez le temps	Lent

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills