Install
| For | Command |
|---|---|
| Claude Code (plugin) | /plugin marketplace add isatimur/excalidraw-skill-pack then /plugin install excalidraw-skill-pack |
| Claude Code (script) | npx @excalidraw-skill-pack/install claude-code |
| Cursor | npx @excalidraw-skill-pack/install cursor |
| GitHub Copilot | npx @excalidraw-skill-pack/install copilot |
| Codex | npx @excalidraw-skill-pack/install codex |
| Gemini CLI | npx @excalidraw-skill-pack/install gemini-cli |
| Any agent (skills.sh) | npx skills add isatimur/excalidraw-skill-pack |
| Any MCP agent | npx @excalidraw-skill-pack/mcp-server |
| Renderer only (Node) | npx @excalidraw-skill-pack/render diagram.excalidraw --theme stripe-press |
| Renderer only (Python) | pipx install excalidraw-skill-pack-render && excalidraw-render diagram.excalidraw --theme stripe-press |
Brand in 60 seconds
You: "onboard excalidraw to https://yoursite.com"
Agent: → fetch homepage → extract palette + fonts
→ map to theme roles (paper, ink, muted, accent)
→ propose diff → write theme package → set project config
Every new diagram uses your brand. See references/onboarding.md.
What it makes — 29 typed layouts
Every type ships an editable .excalidraw source + rendered PNG. Browse the full gallery →
Plus ER, timeline, Gantt, layers, nested, tree, org chart, Venn, pyramid, process, high-level, IT state, data flow, DP integration, DP security matrix, bar, line, scatter, radar — all with source fixtures in packages/shared/fixtures/types/.
vs diagram-design
diagram-design ships editorial HTML+SVG schematics. excalidraw-skill-pack ships editable Excalidraw + themes + MCP + a render-inspect loop. Same taste ambition; different artifact. Honest comparison →
Why this, not just another Excalidraw MCP?
Excalidraw's official MCP is an interactive MCP App: remote host, streaming draw, viewport camera, fullscreen in-chat editing. That is the right surface for a live canvas in chat.
This pack is the quality layer beside it: 29 typed layouts, taste gate, audit_diagram, publishable themes, and Node+Python golden-fixture PNGs — so the figure teaches, themes, audits, and ships. Community “emit JSON” servers still exist; they are not the official product, and they are not this.
You can run both: generate_diagram_prompt for type + taste → optional official canvas for interactive refine → render_diagram + audit_diagram for publishable PNGs. Honest comparison →
Themes
Five themes ship in v0.1. Authoring a new theme is 20 lines of JSON + npm publish:
npx @excalidraw-skill-pack/create-theme my-brand
cd theme-my-brand && npm publish --access public
Published packages (v0.1)
| Channel | Package | Purpose |
|---|---|---|
| npm | @excalidraw-skill-pack/core |
Methodology + bundled default-sketchy theme + schemas |
| npm | @excalidraw-skill-pack/render |
Node renderer (excalidraw-render CLI) |
| npm | @excalidraw-skill-pack/mcp-server |
stdio MCP server with 5 tools |
| npm | @excalidraw-skill-pack/install |
One-command adapter installer |
| npm | @excalidraw-skill-pack/create-theme |
Scaffolder for new theme packages |
| npm | @excalidraw-skill-pack/theme-stripe-press |
Editorial / book-grade |
| npm | @excalidraw-skill-pack/theme-notion |
Rounded, off-white |
| npm | @excalidraw-skill-pack/theme-whiteboard |
Low-fi, bright, sketchy |
| npm | @excalidraw-skill-pack/theme-dark |
Inverted contrast |
| PyPI | excalidraw-skill-pack-render |
Python renderer (excalidraw-render CLI) |
Proof
This skill drew 77 diagrams for the published technical book From Copilot to Colleague — argument spines, chapter openers, concept figures, and inline explainers, all from the methodology in this repo. No other Excalidraw generator can point at a corpus like that. A curated set — the book's argument spine plus all ten chapter openers — ships as source .excalidraw files in examples/book; the full 77 are live across fromcopilottocolleague.com.
Methodology
Diagrams are arguments. The shape should BE the meaning.
- Isomorphism Test: would the structure alone communicate the concept?
- Evidence artifacts: real code snippets, actual API names, concrete formats — not placeholder text.
- One accent per diagram. Two means a competing argument; split it.
Read the full methodology (it's also what the AI agent reads).
License
MIT. Contributions welcome — see CONTRIBUTING.md.
No comments yet
Be the first to share your take.