Excalidraw Diagramming Skill 将一个实时的 Excalidraw 画布接入 AI 智能体，让智能体能够真正“动手画图”。它的核心思路是：用户用文字描述图表内容，智能体负责规划与绘制，并通过截图自我检查，形成自我修正的反馈闭环，最终产出不需要手动微调的整洁图表。
【使用前提与安装】 使用该技能前，必须先安装并运行 Excalidraw MCP 服务器。一次性安装命令如下：
git clone https://github.com/yctimlin/mcp_excalidraw && cd mcp_excalidraw npm ci && npm run build
添加到 Claude Code：
claude mcp add excalidraw -s user
-e EXPRESS_SERVER_URL=http://localhost:3000
-- node /absolute/path/to/mcp_excalidraw/dist/index.js
其中 /absolute/path/to/ 需替换为仓库实际克隆路径。每次会话都需启动画布服务：
cd /path/to/mcp_excalidraw PORT=3000 npm run canvas
随后在浏览器打开 http://localhost:3000 即可看到实时画布。验证是否生效：Claude Code 启动后，工具列表中应出现 excalidraw/* 系列工具，可尝试让它“画一个包含三个方框的简单流程图”。
【工作原理】 用户描述图表 → 智能体规划布局（坐标、间距、配色）→ 调用 batch_create_elements 一次性绘制全部元素 → 调用 get_canvas_screenshot 查看自己画出的内容 → 修复重叠、文本截断、箭头走向等问题 → 重复直至整洁 → 导出（PNG、SVG、.excalidraw 或可分享链接）。关键点在于智能体能通过截图“看到”自己的画布，从而在不需人工干预的情况下迭代出干净的图表。
【推荐工作流（应始终遵循的顺序）】
- 先调用 read_diagram_guide，读取调色板与尺寸规则。
- 规划布局，根据内容选择结构（纵向卡片、横向流程、网格）。
- 始终先产出 3 个不同布局方案，每个保存为快照并分别截图。
- 把 3 个方案连同简短说明一起呈现给用户选择。
- 根据反馈细化被选中的版本。
- 导出前做最终截图确认。
【三种变体的区分维度】 布局方向（纵向堆叠 / 横向流程 / 网格）、形状多样性（全矩形 / 混合圆形、菱形、矩形）、信息密度（极简标签 / 含描述与示例的详细版）、视觉风格（干净专业 / 活泼手绘，roughness 取 0 或 1）。
【设计原则】 最重要的一条是透明背景：形状一律使用 "backgroundColor": "transparent"，仅有编号徽章圆、发光效果层、散点图数据点等少数例外可使用实心填充。优先按深色画布设计，使用明亮的描边色（#3b82f6、#22c55e、#a78bfa 等），正文字色为浅灰（#cbd5e1、#e2e8f0），次级文字用 #64748b 或 #94a3b8，页脚标语用金色 #fbbf24。文字使用通俗语言，除非明确要求，否则不用技术术语。
字体规则：标题、标签用 Helvetica；描述、要点、次级文字用 Excalifont；代码片段用等宽字体。不要使用 Lilita One 或 Comic Shanns。字号上，图表标题 24–44px，区块标题 20–28px，元素标签 14–16px，描述与要点 13–16px，页脚 12–13px，代码 11–14px。
文本处理（关键，防止溢出）：始终手动用 \n 预换行，绝不依赖自动换行；14px 描述文字每行不超过约 40 个字符，22px 标题每行不超过约 35 个字符；文字与边框之间至少留 20px 内边距；纯标签框宽度取 max(100, 标签字符数 * 9)。
【复杂图表的构建方式】 复杂图表应使用 batch_create_elements 逐区块构建，每个区块完成后截图确认再继续，避免一次性堆满画布难以排查问题。同一画布放置多个图表时采用网格布局，并将元素 ID 按图表编号加命名空间（如 d1-title、d2-hub）避免冲突。
【十种视觉技巧】 包括：分层发光效果、低透明度色块分区、绑定箭头与标签、用线型表达含义（实线同步/主流程，虚线异步/次要，点线可选/计划）、菱形判断节点、用形状类型编码含义（椭圆=参与者/用户/外部系统，矩形=服务/流程/组件，菱形=判断/条件）、编号徽章圆、标签中的 emoji 图标、Mermaid 转换、以及截图迭代循环。其中截图迭代循环最为重要：每批元素创建后都要 截图→评估→修复→再截图，绝不跳过。
【布局规则】 形状间距 30–40px，纵向层距 80–120px；带标题与描述的框宽取 max(600, 标签字符数 * 9)，纯标签框取 max(160, 标签字符数 * 9)；高度上单行 60px、双行 80px、带描述的步骤卡 110px；分区四周留 50px 内边距。同角色元素应对齐同一 x 或 y 坐标。箭头始终用 startElementId / endElementId 绑定到形状，标签不超过 12 个字符，若穿过无关形状则加路径点绕行。切勿把文字标签直接放在大背景矩形上，Excalidraw 会将其居中而遮住内部元素，应改用独立文字元素放在分区角上。始终为元素指定自定义 ID，便于箭头引用和后续更新。
【质量检查清单】 每次批量创建后截图检查：文本是否被截断、是否溢出（四周留 20px 以上）、形状是否重叠、箭头是否穿过无关形状、箭头标签是否与形状重叠、元素间距是否至少 30px、可读性（正文 ≥14px、标题 ≥22px、大标题 36px）、分区标签是否误居中、同角色元素是否对齐、字体是否一致。任何一项不合格都要停下来修复并重新截图后再继续。
【应避免的反模式】 形状使用实心背景；用文本项目符号（•、-）而非彩色圆点；文字超出框边；未经要求使用技术术语；跳过 3 变体步骤；构建后忘记截图；全图只用一种字体；使用小于 14px 的字体；多行文本时框宽不足 600px；切换到下一变体前忘记保存快照；用一次 batch_create_elements 构建整张图；所有元素使用同一描边色。
【支持良好的能力】 矩形、椭圆、菱形等各类形状；自动路由的绑定箭头；箭头标签；实线/虚线/点线；完整的描边与填充调色板；用于发光、阴影、分区的透明度；14px 至 36px 以上的字号；emoji 图标；Mermaid 转 Excalidraw；导出为 .excalidraw、PNG、SVG 及可分享链接；用于自检的画布截图。
【已知限制】 图片：MCP 工具未暴露文件路径或 base64 参数，变通方法是在 localhost:3000 的浏览器中拖入图片。自由绘制（Freedraw）：需要 MCP 工具无法接收的点数组，变通方法是在浏览器中手绘。SVG 导入：import_scene 只接受 .excalidraw JSON，不接受原始 SVG，变通方法是在浏览器中粘贴 SVG（Excalidraw 原生功能）。
【新图表工作流】 clear_canvas 清空画布 → 调用 read_diagram_guide 读取内置设计参考 → 规划坐标网格（层与 x 位置）→ 创建 3 个变体并分别保存快照、截图 → 呈现 3 个方案让用户选择 → 细化所选版本 → get_canvas_screenshot 跑质量检查清单 → 用 update_element 修复并重新截图 → 干净后用 export_to_image（PNG/SVG）或 export_scene（.excalidraw）导出。
关于收费、价格、平台可用性等具体信息，现有资料暂未提供。