Create and edit diagrams on a live Excalidraw canvas using the Excalidraw MCP server. Use when asked to draw, diagram, sketch, or visualise architectures, workflows, data flows, system designs, flowcharts, mind maps, or sequence diagrams. Trigger phrases include "create an excalidraw", "draw me a diagram", "make a flowchart", "visualise the system", "diagram this architecture", "export to PNG/SVG". Can export to PNG, SVG, .excalidraw file, or a shareable URL. Do NOT use for Draw.io or diagrams.net output (use drawio-mcp-diagramming instead).
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
Create and edit diagrams on a live Excalidraw canvas using the Excalidraw MCP server. Use when asked to draw, diagram, sketch, or visualise architectures, workflows, data flows, system designs, flowcharts, mind maps, or sequence diagrams. Trigger phrases include "create an excalidraw", "draw me a diagram", "make a flowchart", "visualise the system", "diagram this architecture", "export to PNG/SVG". Can export to PNG, SVG, .excalidraw file, or a shareable URL. Do NOT use for Draw.io or diagrams.net output (use drawio-mcp-diagramming instead).
Create diagrams on a live Excalidraw canvas that renders in the browser and
updates in real time. You are not generating a static file — you are painting
onto a shared whiteboard through MCP tools. The canvas persists between calls,
so what you put on it in one call is visible in the next screenshot.
When to Use
The user asks to "create an excalidraw", "draw me a diagram", "make a flowchart", "visualise the system", or "diagram this architecture".
The user wants an Excalidraw canvas output (not Draw.io / diagrams.net — use drawio-mcp-diagramming for that).
The user wants to visualise an architecture, workflow, data flow, system design, mind map, or sequence diagram.
The user asks to export a diagram to PNG, SVG, .excalidraw file, or a shareable URL.
The user asks to update, change, or fix an existing Excalidraw diagram.
Required MCP Server
The excalidraw MCP server must be present in .vscode/mcp.json:
{
"servers"
:
{
"excalidraw"
:
{
"type"
:
"http"
,
"url"
:
"https://mcp.excalidraw.com"
}
}
}
If the MCP tools are not available, tell the user to add the server and reload
VS Code, then stop.
Available Tools
Essential — use on every diagram:
Tool
Purpose
When
read_diagram_guide
Returns server-side colour palette and sizing rules
First call — before any elements
batch_create_elements
Creates multiple shapes and arrows atomically
Main workhorse
get_canvas_screenshot
Returns a photo of the current canvas
After every change — verify before continuing
clear_canvas
Wipes all content
Start of every new diagram
set_viewport
Scrolls and zooms to fit content
After creating elements
Secondary — use when needed:
Tool
When
create_from_mermaid
Quick drafts — 3–8 node sequential flows
update_element
Small corrections (position, colour, text)
export_to_image
User requests PNG or SVG file
export_scene
User requests editable .excalidraw file
export_to_excalidraw_url
User wants a shareable link
describe_scene
Audit what is currently on the canvas
Workflow
Step 1 — Choose the Creation Path
Mermaid path — use for simple sequential flows (3–8 nodes, no zones):
create_from_mermaid(
mermaidDiagram="graph TD; A[Frontend] -->|REST| B[API]; B -->|SQL| C[DB]"
)
Then jump to Step 6 (screenshot). Skip Steps 2–5.
Batch path — use for everything else: layered architectures, data flows,
hub-and-spoke, any diagram needing zones or colour-coded roles. Continue below.
Step 2 — Read the Design Guide
read_diagram_guide()
Retrieve the server's current colour palette and sizing rules. This call is
mandatory — the values may differ from the defaults in this skill. The server
guide takes precedence.
Step 3 — Clear and Confirm Empty
clear_canvas()
get_canvas_screenshot() // must verify the canvas is truly empty
Previous diagrams leave ghost data even after clear_canvas. If any element
is visible in the screenshot, call clear_canvas() again before proceeding.
Do not skip this confirmation — ghost elements silently break arrow bindings
on new diagrams.
Step 4 — Plan the Layout
Before writing any JSON, decide:
Which pattern? — See references/canvas-patterns.md
for coordinate templates. Load it now if you are unsure which pattern fits.
Column spacing — Labeled arrows need ≥150px clear gap between boxes.
Budget 440px column pitch (230px box + 210px gap) for labeled arrows.
Row pitch — Allow ~350px per row (160px box height + 190px gap for
arrows, labels, and breathing room).
Zone positions — Calculate zone backgrounds before placing shapes.
Zone background: y = row_y - 50, height = box_height + 100.
Sketch coordinates to paper or comments before writing the batch payload.
Step 5 — Create in One Batch
Call batch_create_elements with all elements in one payload. Arrow
binding resolves at batch time — if the target shape and arrow are not in the
same call, the arrow will not connect.
Element order within the elements array matters for render layering:
Zone backgrounds (large dashed rectangles, low opacity 25–40)
Shapes (rectangles, ellipses, diamonds) — assign unique id to each
Arrows — reference shapes by startElementId / endElementId
Standalone text (titles, zone labels, side annotations)
Step 6 — Screenshot and Verify
get_canvas_screenshot()
Inspect the image:
Are all labels readable and unclipped by their containers?
Do arrows land on the correct shapes?
Are zone backgrounds behind their contents, not on top?
Is there ≥150px of clear space around labeled arrows?
Arrows bound to the deleted shape must also be deleted and recreated in the
same batch — binding cannot be re-attached after the fact.
Decision rule:
Change
Method
Text / colour / opacity / position
update_element
Shape size, shape type
delete + redraw in one batch
Moving an arrow endpoint
delete + redraw arrow in one batch with target shape
Restructuring a zone (adding/removing shapes)
delete zone bg + all children + redraw all in one batch
Step 8 — Zoom to Fit
set_viewport({ scrollToContent: true })
Step 9 — Export (if requested)
// PNG or SVG
export_to_image({ format: "png", filePath: "/path/to/output.png" })
// Editable JSON file
export_scene({ filePath: "/path/to/output.excalidraw" })
// Shareable link — no file needed
export_to_excalidraw_url()
Typography Rules
Minimum font sizes — never go smaller. Labels that look correct in JSON are
frequently unreadable in screenshots at display scale.
Context
Minimum fontSize
Notes
Shape labels / body text
16
Default for all labeled boxes
Diagram title
24
Standalone text above the diagram
Zone / section heading
16
Inside or above zone background
Secondary annotations
14
Data form notes, layer labels only — use sparingly
Absolute minimum
14
Never use below 14 under any circumstance
Camera scale warning: At XXL (1600×1200) the canvas renders at roughly
40% of original size in the chat panel. A fontSize: 14 label renders at
~5px — invisible. Use fontSize: 20+ for any label that must be readable
without the user zooming in. When in doubt, go larger.
