Excalidraw
Drive a live Excalidraw canvas from the terminal so your coding agent can draw, update, export, and share architecture and product diagrams without manual drag-and-drop.
Overview
Excalidraw is an agent skill most often used in Build (also Validate, Ship) that controls a live Excalidraw canvas through the CLI for drawing, exporting, and sharing technical diagrams.
Install
npx skills add https://github.com/opencoredev/excalidraw-cli --skill excalidrawWhat is this skill?
- Controls a live canvas via the `excalidraw` CLI against a local server (default http://localhost:3000)
- Create, update, delete, align, distribute, group, lock, and duplicate elements; batch diagrams from JSON
- Inspect with describe/screenshot; export/import .excalidraw, PNG, and SVG; save/restore snapshots
- Convert Mermaid to Excalidraw elements and share encrypted excalidraw.com URLs
- Companion skills `excalidraw-workflow` and `excalidraw-design-guide` for multi-element layouts and styling
- 10 numbered capability areas in the skill description (draw through verified increments)
- Default canvas server http://localhost:3000
- Companion skills: excalidraw-design-guide and excalidraw-workflow for multi-element and mindmap work
Adoption & trust: 1 installs on skills.sh; 5 GitHub stars; 3/3 security scanners passed (skills.sh audits); trending (+100% hot-view momentum).
What problem does it solve?
You need accurate architecture or flow diagrams updated by your agent, but manual Excalidraw sessions break the build loop and do not version cleanly with your repo workflow.
Who is it for?
Solo builders who already run or can start the Excalidraw canvas server and want agent-driven diagram iteration during implementation and documentation.
Skip if: Teams that only need a single static image with no local server, or creators who will not run `excalidraw serve` on localhost.
When should I use this skill?
The agent needs to draw or lay out diagrams on a live canvas, batch-create from JSON, inspect/export/share, or run continuous verified diagram tasks with a running Excalidraw server.
What do I get? / Deliverables
Your agent maintains a live, inspectable canvas with exports and snapshots you can attach to docs, PRs, or share links—loading `excalidraw-workflow` and `excalidraw-design-guide` when layouts need planning or styling gua
- Updated live canvas elements and optional .excalidraw / PNG / SVG exports
- Screenshots, snapshots, or encrypted excalidraw.com share URLs
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build → docs because the skill’s core job is producing and maintaining visual artifacts that ship with the product—architecture sketches, flows, and specs—not one-off polish in launch or growth. Docs is where solo builders most often need repeatable diagram generation, PNG/SVG export, and .excalidraw snapshots alongside READMEs and design notes.
Where it fits
Sketch a first user-journey map on the live canvas before committing to UI scope.
Batch-create a service topology from JSON and export SVG into the repo README.
Diagram webhook and queue boundaries while wiring backend integrations.
Screenshot the current canvas to attach an up-to-date architecture view to a PR review.
How it compares
CLI-driven live canvas control for agents—not a passive Markdown Mermaid preview or a hand-only Excalidraw session.
Common Questions / FAQ
Who is excalidraw for?
Indie and solo developers using AI coding agents who document systems with diagrams and want programmatic create/update/export without leaving the agent thread.
When should I use excalidraw?
During Validate when you sketch flows for a prototype scope; during Build when you lay out architecture in docs; during Ship when you refresh review diagrams; whenever the agent must draw, batch JSON layouts, convert Mermaid, or share excalidraw.com links from a running server.
Is excalidraw safe to install?
It expects local CLI access to a canvas server and filesystem/network for serve and export—review the Security Audits panel on this Prism page and treat the localhost service like any dev dependency you expose.
SKILL.md
READMESKILL.md - Excalidraw
# Excalidraw Skill ## Step 0: Setup ### Load companion skills when needed - **Drawing or styling a diagram** → load `excalidraw-design-guide` (colors, sizing, anti-patterns) - **Building a multi-element diagram or reviewing one** → must load `excalidraw-workflow` (planning, progressive drawing, review checklist) - **Mindmap or quality-sensitive visual request** → must load both `excalidraw-workflow` and `excalidraw-design-guide` - **Just checking status, exporting, or a single command** → no companion skills needed ### Check if canvas is running ```bash excalidraw status ``` Returns `{"status":"healthy","timestamp":"...","elements_count":N,"websocket_clients":N}` if running. ### Start canvas if not running ```bash excalidraw serve --port 3000 ``` For autonomous multi-step runs, avoid foreground blocking. Use a detached startup and then verify health: ```bash nohup excalidraw serve --port 3000 >/tmp/excalidraw-serve.log 2>&1 & excalidraw status ``` > **Browser required for**: `viewport`, `screenshot`, and `mermaid` commands. > These route through the browser tab via WebSocket — they return a 503 error if no browser has the canvas open. > Open `http://localhost:3000` before using any of these commands. ### Install CLI (one-time) ```bash bun add -g github:opencoredev/excalidraw-cli ``` ### Global URL override ```bash export EXCALIDRAW_URL=http://localhost:3000 ``` All commands respect `EXCALIDRAW_URL`. Override per-command with `--url <url>`. --- ## Execution Contract (Continuous Delivery) When a request implies implementation (not just explanation), run this default loop: 1. Start with a minimal working step that produces visible output fast. 2. Expand in small increments, validating each increment before moving on. 3. Keep going without stopping between increments unless blocked by missing credentials or irreversible risk. 4. Before finishing, run one end-to-end verification sweep (`describe`, fit viewport, screenshot). **No pause rule:** do not stop after a single successful command if there are still unfinished checkpoints. **Failure handling:** treat errors as fix-and-continue, not stop-and-wait. - If `503 No frontend client connected`, open canvas and retry the failed step. - If a command depends on IDs, run `excalidraw describe`, repair IDs/ordering, retry. - If `batch` or `mermaid` receives no input, provide file or stdin explicitly and continue. If the user asks to "ship" or requests commit/push behavior: - Stage only relevant files. - Commit each verified unit with clear intent-focused messages. - Push after final verification. **Progress contract:** after each checkpoint, report what changed and run the next checkpoint immediately. --- ## ⚡ Draw Element by Element — Don't Make the User Wait Create each element individually so the user sees every shape appear on canvas and can redirect if something is wrong. ```bash excalidraw create --type rectangle --id svc-a --x 100 --y 100 --width 160 --height 60 --text "Service A" --stroke-color "#1971c2" --fill "#a5d8ff" excalidraw viewport --fit excalidraw create --type rectangle --id svc-b --x 100 --y 240 --width 160 --height 60 --text "Service B" --stroke-color "#2f9e44" --fill "#b2f2bb" excalidraw viewport --fit excalidraw create --type arrow --x 0 --y 0 -