ExcaliDraw Skill Pack

Install

Related MCP server: Excalidraw MCP Server

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

Browse the theme registry →

Published packages (v0.1)

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.