Skills / excalidraw
Diagrams an AI agent can actually see. It draws on a live Excalidraw canvas you watch in the browser, screenshots its own work, and fixes truncation, overlap, and tangled arrows before it calls the diagram done.
Architecture, flows, sequences — or a Mermaid diagram converted in one call. Exports editable .excalidraw plus a shareable PNG/SVG.
Ask the brand. First thing it does — your stroke/accent colors and font, or "default."
Draw a batch. Shapes and arrows in one call, brand baked in at creation.
Screenshot & check. It reads the rendered canvas for truncation, overlap, arrow crossings.
Fix, then export. Repairs issues, re-checks, then saves .excalidraw + PNG.
Just curl against the canvas server on :3000 — no MCP wiring, nothing to load into context. Zero-dependency Node helper scripts ship alongside for the common ops.
If the excalidraw/* MCP tools are loaded, it uses them instead — same server, screenshots straight into context. One switch, no rewrite.
Before a single shape is drawn, the skill asks what brand to follow and turns your answer into a small recipe it applies on every element at creation time — so diagrams come out on-brand, never recolored afterward. It ships a worked example recipe (the Bowtie Funnel palette) you copy and swap values on.
| You give it… | it maps to |
|---|---|
| primary stroke / text color | strokeColor on nodes + text |
| one accent color | strokeColor on key nodes + all arrows |
| body font | fontFamily on every labeled shape |
| "default" | clean neutral palette, crisp lines |
# copy the skill into your Claude Code skills directory
cp -r skills/excalidraw ~/.claude/skills/
Needs the open-source canvas server running once (setup is in the skill's Step 0):
# the canvas server — open-source, run once, watch at localhost:3000
git clone https://github.com/yctimlin/mcp_excalidraw && cd mcp_excalidraw
npm ci && npm run build
PORT=3000 npm run canvas
Then invoke it directly, or just say what you want:
/excalidraw # or, in plain language — # "draw the lead-intake flow as an architecture diagram" # "turn this Mermaid into an Excalidraw diagram"