Excalidraw Diagram Skill — Installer & Démo en direct

Pourquoi l'utiliser

Fonctionnalités clés

Outputs native .excalidraw JSON (fully editable)
Pre-baked layouts for architecture, sequence, flow, mind map
Smart auto-layout to avoid label overlap
Annotation arrows with proper anchoring
Works in any agent (Claude Code, Cursor, Codex)

Démo en direct

Aperçu en pratique

excalidraw-diagram-skill.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-diagram-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/coleam00/excalidraw-diagram-skill",
        "~/.claude/skills/excalidraw-diagram-skill"
      ],
      "_inferred": true
    }
  }
}

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

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

{
  "mcpServers": {
    "excalidraw-diagram-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/coleam00/excalidraw-diagram-skill",
        "~/.claude/skills/excalidraw-diagram-skill"
      ],
      "_inferred": true
    }
  }
}

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-diagram-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/coleam00/excalidraw-diagram-skill",
        "~/.claude/skills/excalidraw-diagram-skill"
      ],
      "_inferred": true
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "excalidraw-diagram-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/coleam00/excalidraw-diagram-skill",
        "~/.claude/skills/excalidraw-diagram-skill"
      ],
      "_inferred": true
    }
  }
}

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

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "excalidraw-diagram-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/coleam00/excalidraw-diagram-skill",
        "~/.claude/skills/excalidraw-diagram-skill"
      ]
    }
  ]
}

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

~/.config/zed/settings.json

{
  "context_servers": {
    "excalidraw-diagram-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/coleam00/excalidraw-diagram-skill",
          "~/.claude/skills/excalidraw-diagram-skill"
        ]
      }
    }
  }
}

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

claude mcp add excalidraw-diagram-skill -- git clone https://github.com/coleam00/excalidraw-diagram-skill ~/.claude/skills/excalidraw-diagram-skill

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

Cas d'usage

Usages concrets : Excalidraw Diagram Skill

Generate an editable architecture diagram from a description

👤 Engineers documenting systems ⏱ ~15 min intermediate

Quand l'utiliser : You want a diagram you can iterate on, not a static PNG.

Prérequis

Server/skill installed and authenticated — See repo README

Déroulement

Describe the system

Using the Excalidraw skill, draw our auth flow: SPA → API gateway → auth-service → Postgres → emit event to Kafka.✓ Copié

→ A .excalidraw file with labeled boxes + arrows
Iterate

Add a Redis cache between API gateway and auth-service.✓ Copié

→ Updated file with the new node + correct re-routed arrows

Résultat : A diagram you actually edit, not redraw.

Pièges

For very large diagrams (>30 nodes) auto-layout struggles — For very large diagrams (>30 nodes) auto-layout struggles — split into multiple diagrams or group by concern.

Coût et limites

Coût d'exécution

Quota d'API: See provider docs for rate limits
Tokens par appel: Varies by tool
Monétaire: See repo README for pricing details
Astuce: Cache tool results and avoid repeated identical calls.

Sécurité

Permissions, secrets, portée

Stockage des identifiants : Use environment variables; never commit secrets

Sortie de données : Tool calls go to the provider's API as documented

Dépannage

Erreurs courantes et correctifs

file doesn't open in Excalidraw

Make sure the file ends with .excalidraw and is valid JSON. The skill outputs both, but check the extension.

Vérifier : Open at excalidraw.com → load file

arrows pointing wrong way

Excalidraw's arrow startBinding/endBinding matters. The skill's templates handle it, but custom edits can break it.

Vérifier : Reload the file

Alternatives

Excalidraw Diagram Skill vs autres

Alternative	Quand l'utiliser	Compromis
BV-Venky/excalidraw-architect-mcp	You want it as an MCP server instead of a skill	MCP is heavier setup; skill is just a folder

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills