多媒体#信息图

Excalidraw MCP:让智能体画架构图,看着画布反复调整

给编程智能体一块实时 Excalidraw 画布:逐个元素增删改,截图自查再调整,可从 Mermaid 转换,导出能提交进仓库的 .excalidraw 文件。

项目与安装文档

查看项目

https://github.com/yctimlin/mcp_excalidraw

让智能体画架构图,常见结果是一次性生成一张图,文字溢出框外、箭头交叉,想改只能整张重画。这个 Excalidraw MCP 服务器给智能体一块实时画布:它可以逐个元素创建和修改,截图看看自己画得怎样,发现重叠就挪一挪,最后导出 .excalidraw 文件和代码放在一起。截至 2026-10-06 约 2500 star,作者是社区开发者 yctimlin。

能做什么

  • 元素级增删改:create_element、update_element、delete_element、batch_create_elements 等,画好后还能单独改某个框的文字。
  • 看见自己的作品:describe_scene 返回结构化的画布描述,get_canvas_screenshot 返回截图;v2.1 起截图在服务端渲染,不需要开着浏览器。
  • 排版工具:对齐、等距分布、编组、锁定,加上 snapshot_scene 和 restore_snapshot 存档回滚。
  • 导入导出:create_from_mermaid 把 Mermaid 图转成可编辑的 Excalidraw,export_scene 导出文件,export_to_image 出图,export_to_excalidraw_url 生成分享链接。

适合谁

  • 想让 Claude Code 或 Cursor 根据代码画出服务架构图,并随代码一起提交、更新的开发者。
  • 写技术文档、需要流程图和时序图的工程师,想先用 Mermaid 起稿再手工微调。
  • 多个智能体协作的场景,它们可以同时在一块画布上画。

接入方式

需要 Node.js 20+,不需要 API Key 或账号。Claude Code:

claude mcp add excalidraw --scope user -- npx -y mcp-excalidraw-server

服务器启动时会自动拉起本地画布(默认 http://127.0.0.1:3000),浏览器打开就能实时看到智能体在画什么。对编程智能体,README 也推荐用它自带的 Skill 加 CLI,更省 token。

编辑点评

Excalidraw 官方也有一个 MCP,但那是在聊天窗口里一次性生成图的小组件。这个项目解决的是另一件事:给编程智能体一个能反复修改、能看见、能存进仓库的画布,26 个工具覆盖了画图到导出的全流程。要注意:它是社区项目,不是 Excalidraw 官方出品;画布会在本机开一个端口;share 和生成分享链接会把加密后的画面上传到 excalidraw.com,画布页面还会从 esm.sh 的 CDN 加载字体,对内网环境有影响。许可证为 MIT。