内容
<p align="center">
<img src="docs/site/images/demo.gif" alt="实际架构图示示例" width="820" />
<br/>
<em>实际架构图示示例，用于出版的工程书籍 — 图表能够阐述观点，而非仅仅贴标签。</em>
</p>
<h1 align="center">excalidraw-skill-pack</h1>
<p align="center">
<strong>图表阐述观点 — 而非贴标签。</strong><br/>
面向 AI 代理的图表质量层：一种特定的 Excalidraw 方法论 + 主题，使“绘制图表”变成能够实际教学的图表。<br/>
支持 Claude Code、Cursor、GitHub Copilot、Codex、Gemini CLI 和任何与 MCP 兼容的代理。
</p>
<p align="center">
<a href="https://github.com/isatimur/excalidraw-skill-pack/stargazers"><img src="https://img.shields.io/github/stars/isatimur/excalidraw-skill-pack?style=social" alt="GitHub 明星" /></a>
<a href="https://github.com/isatimur/excalidraw-skill-pack/actions/workflows/ci.yml"><img src="https://github.com/isatimur/excalidraw-skill-pack/actions/workflows/ci.yml/badge.svg" alt="持续集成" /></a>
<a href="https://excalidraw-skill-pack.vercel.app"><img src="https://img.shields.io/badge/docs-excalidraw--skill--pack.vercel.app-B8472A" alt="文档" /></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="许可证" /></a>
</p>
## 安装
| 适用对象 | 命令 |
|---|---|
| Claude Code（插件） | `/plugin marketplace add isatimur/excalidraw-skill-pack` 然后 `/plugin install excalidraw-skill-pack` |
| 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` |
| 任意代理（skills.sh） | `npx skills add isatimur/excalidraw-skill-pack` |
| 任意 MCP 代理 | `npx @excalidraw-skill-pack/mcp-server` |
| 仅渲染器（Node） | `npx @excalidraw-skill-pack/render diagram.excalidraw --theme stripe-press` |
| 仅渲染器（Python） | `pipx install excalidraw-skill-pack-render && excalidraw-render diagram.excalidraw --theme stripe-press` |
## 为什么选择这种，而非另一种 Excalidraw MCP？
Excalidraw 的[官方 MCP](https://github.com/excalidraw/excalidraw-mcp) 和大多数社区服务器解决了**基础问题**：让代理发出有效的 JSON 并渲染它。它们生成正确的方框和箭头图。
这个软件包解决了**美学问题**：一种特定的方法论 —— 同构测试、证据伪影、多级架构、容器规则、每个图表一个主色 —— 决定了*要绘制什么*和*为什么*，因此输出是一个视觉论证，可以教学，而不是一个贴标签的网格。这是周末的 MCP 代码无法复制的部分，这也是为什么[示例图集](#证明) 看起来如此的原因。
基础问题现在是商品。质量不是。
## 主题
<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>
v0.1 版本包含五个主题。编写一个新主题需要 20 行 JSON 代码 + `npm publish`:
```bash
npx @excalidraw-skill-pack/create-theme my-brand
cd theme-my-brand && npm publish --access public
```
[浏览主题注册表 →](https://excalidraw-skill-pack.vercel.app/themes)
## 已发布软件包（v0.1）
| 渠道 | 软件包 | 用途 |
|---|---|---|
| npm | [`@excalidraw-skill-pack/core`](https://www.npmjs.com/package/@excalidraw-skill-pack/core) | 方法论 + 默认主题 + 模式 |
| npm | [`@excalidraw-skill-pack/render`](https://www.npmjs.com/package/@excalidraw-skill-pack/render) | Node 渲染器（`excalidraw-render` 命令行工具） |
| npm | [`@excalidraw-skill-pack/mcp-server`](https://www.npmjs.com/package/@excalidraw-skill-pack/mcp-server) | 标准输入/输出 MCP 服务器，包含 5 种工具 |
| npm | [`@excalidraw-skill-pack/install`](https://www.npmjs.com/package/@excalidraw-skill-pack/install) | 一键适配器安装程序 |
| npm | [`@excalidraw-skill-pack/create-theme`](https://www.npmjs.com/package/@excalidraw-skill-pack/create-theme) | 新主题软件包的脚手架工具 |
| npm | [`@excalidraw-skill-pack/theme-stripe-press`](https://www.npmjs.com/package/@excalidraw-skill-pack/theme-stripe-press) | 编辑 / 出版级别 |
| npm | [`@excalidraw-skill-pack/theme-notion`](https://www.npmjs.com/package/@excalidraw-skill-pack/theme-notion) | 圆角，偏白色 |
| npm | [`@excalidraw-skill-pack/theme-whiteboard`](https://www.npmjs.com/package/@excalidraw-skill-pack/theme-whiteboard) | 低保真，明亮，草图风格 |
| npm | [`@excalidraw-skill-pack/theme-dark`](https://www.npmjs.com/package/@excalidraw-skill-pack/theme-dark) | 反色 |
| PyPI | [`excalidraw-skill-pack-render`](https://pypi.org/project/excalidraw-skill-pack-render/) | Python 渲染器（`excalidraw-render` 命令行工具） |
## 证明
该技能为已出版的技术书籍 [*From Copilot to Colleague*](https://fromcopilottocolleague.com) 绘制了 **77 张图表** —— 论证主线、章节开头、概念图和内联解释器，均基于此仓库中的方法论。没有任何其他 Excalidraw 生成器能指向这样一个语料库。一个精选集 —— 书的论证主线加上所有十个章节开头 —— 作为源 `.excalidraw` 文件包含在 [`examples/book`](https://github.com/isatimur/excalidraw-skill-pack/tree/main/examples/book) 中；完整的 77 张图表在 [fromcopilottocolleague.com](https://fromcopilottocolleague.com) 上实时显示。
<p align="center">
<a href="examples/book/01-book-argument-spine.png"><img src="examples/book/01-book-argument-spine.png" alt="书籍论证主线" width="240" /></a>
<a href="examples/book/02-autoresearch-machine.png"><img src="examples/book/02-autoresearch-machine.png" alt="自动研究机器" width="240" /></a>
<a href="examples/book/05-chapter1-the-shift.png"><img src="examples/book/05-chapter1-the-shift.png" alt="第一章 —— 转变" width="240" /></a>
<a href="examples/book/08-chapter4-evals.png"><img src="examples/book/08-chapter4-evals.png" alt="第四章 —— 评估" width="240" /></a>
</p>
<p align="center"><sub>书籍中的实际图表 —— 论证主线、概念机器和两个章节开头。<a href="https://github.com/isatimur/excalidraw-skill-pack/tree/main/examples/book">所有源文件 →</a></sub></p>
## 方法论
图表是论证。形状应该体现意义。
- **同构测试：** 单纯的结构能否传达概念？
- **证据伪影：** 真实的代码片段、实际的 API 名称、具体的格式 —— 而非占位文本。
- **每个图表一个主色。** 两个主色意味着存在竞争论证；请拆分。
阅读[完整方法论](https://excalidraw-skill-pack.vercel.app/spec/theme-manifest) （它也是 AI 代理读取的内容）。
## 许可证
MIT。欢迎贡献 —— 请参阅 [CONTRIBUTING.md](CONTRIBUTING.md)。
