ExcaliDraw Skill Pack
The diagram-quality layer for AI agents — an opinionated Excalidraw methodology (isomorphism test, evidence artifacts, multi-zoom, container discipline) plus a render-view-fix loop. Accepts skeleton and Mermaid input, 5 publishable themes, dual Node/Python renderer. Proven on a 77-diagram published book.
README
<p align="center"> <img src="docs/site/images/hero.png" alt="Make your AI agent argue visually" width="800" /> </p>
<h1 align="center">excalidraw-skill-pack</h1>
<p align="center"> <strong>Diagrams that argue — not boxes that label.</strong><br/> The diagram-<em>quality</em> layer for AI agents: an opinionated Excalidraw methodology + themes that turns "draw me a diagram" into figures that actually teach.<br/> Works in Claude Code, Cursor, GitHub Copilot, Codex, Gemini CLI, and any MCP-compatible agent. </p>
<p align="center"> <a href="https://excalidraw-skill-pack.vercel.app"><img src="https://img.shields.io/badge/docs-excalidraw--skill--pack.vercel.app-B8472A" alt="docs" /></a> <a href="https://www.npmjs.com/package/@excalidraw-skill-pack/render"><img src="https://img.shields.io/npm/v/%40excalidraw-skill-pack%2Frender?label=npm%20render" alt="npm" /></a> <a href="https://pypi.org/project/excalidraw-skill-pack-render/"><img src="https://img.shields.io/pypi/v/excalidraw-skill-pack-render?label=PyPI" alt="pypi" /></a> <a href="LICENSE"><img src="https://img.shields.io/github/license/isatimur/excalidraw-skill-pack" alt="license" /></a> </p>
Install
| For | Command |
|---|---|
| Claude Code | 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 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 |
Why this, not just another Excalidraw MCP?
Excalidraw's official MCP and most community servers solve plumbing: get an agent to emit valid JSON and render it. They produce correct boxes-and-arrows.
This pack solves taste: an opinionated methodology — the isomorphism test, evidence artifacts, multi-zoom architecture, container discipline, one-accent-per-diagram — that decides what to draw and why, so the output is a visual argument that teaches instead of a labeled grid. That's the part a weekend of MCP code can't copy, and it's why the book gallery looks the way it does.
Plumbing is a commodity now. Quality isn't.
Themes
<p align="center"> <img src="docs/site/images/themes/default-sketchy.png" width="160" /> <img src="docs/site/images/themes/stripe-press.png" width="160" /> <img src="docs/site/images/themes/notion.png" width="160" /> <img src="docs/site/images/themes/whiteboard.png" width="160" /> <img src="docs/site/images/themes/dark.png" width="160" /> </p>
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.
推荐服务器
Baidu Map
百度地图核心API现已全面兼容MCP协议,是国内首家兼容MCP协议的地图服务商。
Playwright MCP Server
一个模型上下文协议服务器,它使大型语言模型能够通过结构化的可访问性快照与网页进行交互,而无需视觉模型或屏幕截图。
Audiense Insights MCP Server
通过模型上下文协议启用与 Audiense Insights 账户的交互,从而促进营销洞察和受众数据的提取和分析,包括人口统计信息、行为和影响者互动。
Magic Component Platform (MCP)
一个由人工智能驱动的工具,可以从自然语言描述生成现代化的用户界面组件,并与流行的集成开发环境(IDE)集成,从而简化用户界面开发流程。
VeyraX
一个单一的 MCP 工具,连接你所有喜爱的工具:Gmail、日历以及其他 40 多个工具。
Kagi MCP Server
一个 MCP 服务器,集成了 Kagi 搜索功能和 Claude AI,使 Claude 能够在回答需要最新信息的问题时执行实时网络搜索。
graphlit-mcp-server
模型上下文协议 (MCP) 服务器实现了 MCP 客户端与 Graphlit 服务之间的集成。 除了网络爬取之外,还可以将任何内容(从 Slack 到 Gmail 再到播客订阅源)导入到 Graphlit 项目中,然后从 MCP 客户端检索相关内容。
mcp-server-qdrant
这个仓库展示了如何为向量搜索引擎 Qdrant 创建一个 MCP (Managed Control Plane) 服务器的示例。
e2b-mcp-server
使用 MCP 通过 e2b 运行代码。
Neon MCP Server
用于与 Neon 管理 API 和数据库交互的 MCP 服务器