ExcaliDraw Skill Pack

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.

Category
访问服务器

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

Browse the theme registry →

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

Baidu Map

百度地图核心API现已全面兼容MCP协议,是国内首家兼容MCP协议的地图服务商。

官方
精选
JavaScript
Playwright MCP Server

Playwright MCP Server

一个模型上下文协议服务器,它使大型语言模型能够通过结构化的可访问性快照与网页进行交互,而无需视觉模型或屏幕截图。

官方
精选
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

通过模型上下文协议启用与 Audiense Insights 账户的交互,从而促进营销洞察和受众数据的提取和分析,包括人口统计信息、行为和影响者互动。

官方
精选
本地
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

一个由人工智能驱动的工具,可以从自然语言描述生成现代化的用户界面组件,并与流行的集成开发环境(IDE)集成,从而简化用户界面开发流程。

官方
精选
本地
TypeScript
VeyraX

VeyraX

一个单一的 MCP 工具,连接你所有喜爱的工具:Gmail、日历以及其他 40 多个工具。

官方
精选
本地
Kagi MCP Server

Kagi MCP Server

一个 MCP 服务器,集成了 Kagi 搜索功能和 Claude AI,使 Claude 能够在回答需要最新信息的问题时执行实时网络搜索。

官方
精选
Python
graphlit-mcp-server

graphlit-mcp-server

模型上下文协议 (MCP) 服务器实现了 MCP 客户端与 Graphlit 服务之间的集成。 除了网络爬取之外,还可以将任何内容(从 Slack 到 Gmail 再到播客订阅源)导入到 Graphlit 项目中,然后从 MCP 客户端检索相关内容。

官方
精选
TypeScript
mcp-server-qdrant

mcp-server-qdrant

这个仓库展示了如何为向量搜索引擎 Qdrant 创建一个 MCP (Managed Control Plane) 服务器的示例。

官方
精选
e2b-mcp-server

e2b-mcp-server

使用 MCP 通过 e2b 运行代码。

官方
精选
Neon MCP Server

Neon MCP Server

用于与 Neon 管理 API 和数据库交互的 MCP 服务器

官方
精选