---
name: "excalidraw"
description: "Créer et éditer des diagrammes Excalidraw via MCP OpenCode : génération depuis une description (excalidraw-maaker, layout auto) ou canvas live + édition fine (excalidraw/sentinel). Schémas d'architecture, flowcharts, organigrammes."
---

# Skill Excalidraw — créer un schéma via MCP

## Les 2 MCP Excalidraw

| MCP | Rôle | Outils |
|---|---|---|
| `excalidraw-maaker` (28) | **Génération** depuis une description haut niveau, layout auto (Sugiyama), **file-based** | create_flowchart, create_architecture_diagram, create_mindmap, read_diagram, modify_diagram, import_mermaid… |
| `excalidraw` (sentinel, 32) | **Canvas live** + édition fine d'éléments (coordonnées), base SQLite | create_element, batch_create_elements, create_from_mermaid, import_scene, export_scene… |

**Choisir :**
- **Générer un diagramme depuis une description** (ou depuis une note SilverBullet) → `excalidraw-maaker` : décris ce que tu veux, le layout est auto, chaque schéma = un fichier (parallélisme naturel).
- **Dessin live / édition fine** (déplacer un élément, retoucher, voir en temps réel) → `excalidraw` (sentinel) : le canvas doit être ouvert dans le navigateur.
- **Archivage** : exporter le résultat en fichier `.excalidraw` et le stocker dans SilverBullet (source unique de vérité).

## Quand l'utiliser

Quand l'utilisateur demande de dessiner/créer un schéma, diagramme, architecture, flowchart, organigramme, mindmap, etc.

## MCP sentinel (canvas live)

### Prérequis

- MCP `excalidraw` connecté (32 outils).
- Canvas local : `http://127.0.0.1:3001/` — accès web : `https://excalidraw-mcp.datagrandest.net/`.
- **Canvas live** : pour un dessin en temps réel, la page canvas doit être **ouverte dans un navigateur** (connexion WebSocket). Sinon, utiliser `import_scene`.

### Outils principaux

| Outil | Usage | Frontend requis |
|---|---|---|
| `create_from_mermaid` | Flowchart simple (Mermaid → Excalidraw) | ✅ oui |
| `batch_create_elements` | Plusieurs éléments + flèches liées | ✅ oui |
| `create_element` | Un élément à la fois | ✅ oui |
| `import_scene` | Importer une scène JSON complète | ❌ non |
| `delete_element` | Supprimer un élément | ❌ non |
| `describe_scene` / `query_elements` | Vérifier l'état du canvas | ❌ non |
| `set_viewport` | Zoom / centrage (`scrollToContent`) | ✅ oui |
| `export_to_image` | Exporter en PNG/SVG | ✅ oui |

### Workflow

1. Vérifier l'état : `describe_scene()` ou `query_elements({})`.
2. Choisir : `create_from_mermaid` (flowchart), `batch_create_elements` (schéma précis, IDs + flèches), `import_scene` (sans navigateur).
3. Règles : donner des `id` aux formes pour les flèches (`startElementId`/`endElementId`) ; les flèches exigent `x`/`y` ; couleurs par type (serveur `#d4e6f1`, API `#d5f5e3`, base `#fdebd0`, utilisateur `#f2f3f4`).
4. Vérifier : `describe_scene()`.
5. Afficher : `set_viewport({scrollToContent: true})` ou demander à l'utilisateur d'ouvrir/rafraîchir le canvas.

## MCP maaker (génération)

### Prérequis

- MCP `excalidraw-maaker` connecté (28 outils) — Python venv `~/.venvs/maaker`.
- **File-based** : les outils écrivent sur un chemin local (`output_path`), à pousser ensuite dans SB via `/.fs`.

### Outils principaux

| Outil | Usage |
|---|---|
| `create_flowchart` | Flowchart (nœuds + arêtes, layout LR/RL/TB/BT) |
| `create_architecture_diagram` | Architecture en couches (layers + components) |
| `create_mindmap`, `create_sequence_diagram`, `create_er_diagram`… | 25+ types de diagrammes |
| `read_diagram` | Analyser un fichier `.excalidraw` existant |
| `modify_diagram` | Ajouter/retirer des nœuds et connexions (par libellé) |
| `import_mermaid` | Convertir du Mermaid en Excalidraw |
| `export_diagram` | Exporter en SVG |

### Workflow

1. Décrire le diagramme en entrée structurée (nodes/edges, layers/components…), `output_path` vers un fichier local.
2. Vérifier avec `read_diagram`.
3. Pousser le fichier `.excalidraw` dans SB via l'API `/.fs` (curl + token) et le référencer dans une note.

## Erreurs fréquentes

- **Sentinel « No frontend client connected »** → le canvas n'est pas ouvert dans un navigateur. Soit demander à l'utilisateur d'ouvrir `https://excalidraw-mcp.datagrandest.net/`, soit utiliser `import_scene`.
- **Sentinel `clear_canvas` → 400** → utiliser `delete_element` individuellement.
- **Sentinel `batch_create_elements` : Missing key x/y** → ajouter `x`/`y` aux flèches.
- **Maaker** : travailler sur des **chemins locaux** (SB n'est pas un mount local) → toujours passer par le pont `/.fs` pour lire/écrire dans l'espace.

## Workspaces

- **Sentinel — projets** : `list_projects`, `switch_project({createName: "..."})` pour créer un nouveau projet.
- **Sentinel — tenants** : `list_tenants`, `switch_tenant({tenantId})`.
- **Maaker** : pas de workspace — 1 schéma = 1 fichier (parallélisme naturel).