Excalidraw MCP — Generate Diagrams from Claude Code

简介

Excalidraw MCP 把 Excalidraw 场景 API 包成 Model Context Protocol server。Claude Code / Cursor / Codex CLI 能调 excalidraw_create_scene / excalidraw_add_shape / excalidraw_add_arrow 直接生成架构图、ERD、流程图到 .excalidraw 文件。适合 agent 给代码画图、不想从另一个画图工具复制粘贴的场景。需要 Excalidraw 0.17+ 和任意 MCP 宿主。装机时间 3 分钟。

MCP 配置

{
  "mcpServers": {
    "excalidraw": {
      "command": "npx",
      "args": ["-y", "excalidraw-mcp"],
      "env": {
        "EXCALIDRAW_OUTPUT_DIR": "./diagrams"
      }
    }
  }
}

暴露的工具

给 Claude Code 的 prompt 示例

> 读 src/ 的架构。生成 Excalidraw 图：
  - 顶部前端（Nuxt）
  - API 网关
  - 3 个微服务（auth / payments / notifications）
  - 底部 Postgres + Redis
  - 箭头展示典型请求流程
  保存到 docs/architecture.excalidraw，并导出 PNG。

Claude Code 一步步调 MCP 工具、按合理间距排布形状、保存可编辑 .excalidraw 和 .png 预览。

在 Excalidraw 里打开

open https://excalidraw.com  # 拖文件进去
# 或
excalidraw open ./docs/architecture.excalidraw  # 装了桌面版

当 CI 产物用

CI 里 MCP server 生成的图可以作为 PR 附件作为架构文档，跟着代码自动更新。

FAQ

Q: Excalidraw MCP 是官方的吗？ A: Excalidraw 编辑器本身是官方（excalidraw/excalidraw on GitHub，~95K stars）。MCP server 包装是社区做的 —— 有多个实现（excalidraw-mcp / excalidraw-mcp-server）。都用官方 Excalidraw 场景格式。

Q: 生成的图后续在 Excalidraw 里能编辑吗？ A: 能 —— 输出是标准 .excalidraw JSON 文件。在 Excalidraw 网页（excalidraw.com）或桌面版打开、编辑、保存。agent 生成的布局只是起点。

Q: 能在已有图上画吗？ A: 能 —— 传入已有的 .excalidraw 文件，先用 excalidraw_load_scene。agent 追加或修改。适合增量的架构文档。