claude-draw
claude-draw
为 Claude Code 提供手绘输入。Claude 提出一个视觉问题,画布出现在你喜欢的任何设备上,你画出答案,Claude 读取它。
两种模式:用于勾勒想法的空白画布,以及标注模式——Claude 提供一张截图并请你标记它。第二种模式才是真正有用的,因为有时候用语言描述视觉变化不如直接指出来快。
环境要求
PATH 上有 Node 18 或更新版本。仅此而已。无需 npm install,无依赖。
Related MCP server: PassPaper
安装
这个仓库本身就是自己的单插件市场,所以一台新机器需要两条命令:
/plugin marketplace add ThePhilipWilson/claude-draw
/plugin install claude-draw@claude-draw或者改为把它放进技能目录,这样每次会话都会加载,无需安装步骤:
mkdir -p ~/.claude/skills
cp -r /path/to/claude-draw ~/.claude/skills/无论哪种方式,都要重启 Claude Code。用 claude plugin list 确认,并检查 claude-draw MCP 服务器已连接。
插件中没有任何路径相关或操作系统相关的内容:浏览器启动器按平台选择 start、open 或 xdg-open,所有路径都相对于插件根目录解析。
使用方法
Claude 通过 MCP 驱动它。你不需要手动运行任何东西。
request_drawing请求你提供草图或标注,然后等待。draw_status报告画布是否已连接,并给出 URL。open_canvas在 Claude 运行的机器上打开画布。
输入 /draw 可以自己请求一个画布。
画布
钢笔、直线、箭头、方框、椭圆、填充和橡皮擦,六种颜色。按键:P L A B O F E 选择工具,1-6 选择颜色,[ ] 调整大小,Ctrl+Z 撤销,Ctrl+V 粘贴图片,Ctrl+Enter 发送。图片也可以拖放到窗口上。
填充对边缘有两种理解,再次选择该工具会在两者之间切换。填充:形状 只在你自己的笔迹处停止,因此你画出的轮廓无论下面是什么,一次点击就能实心填充。填充:图像 还会在图片中的边缘处停止,用于给截图中你没有勾勒轮廓的区域上色。无论哪种方式,颜料都会落在笔迹图层上,因此橡皮擦可以擦掉它而不会损坏图像。
发送时会先显示合并后的图像和说明文字,按 Enter 确认,按 Esc 返回。"给我发一张截图" 是另一个方向:它让 Claude 捕获某些内容并发送回来供你标注,这比在平板上翻找文件要好。说明框中的任何内容都会一并发送,所以你可以说出你想要什么图片。"跳过" 告诉 Claude 你不回答这个问题。
从另一台设备绘图
默认关闭:守护进程只绑定回环地址,因此画布只能从本机访问,其他任何地方都不行。开启后,同一 Wi-Fi 下的平板、手机或 Chromebook 可以作为绘图表面,而 Claude 在你的桌面上运行。
在 Claude Code 运行的环境中设置
CLAUDE_DRAW_LAN=1,例如在settings.json中:{ "env": { "CLAUDE_DRAW_LAN": "1" } }已经在运行的守护进程会保持原来的绑定。重启 Claude Code,或者让 Claude 查询
draw_status,当运行中的守护进程与设置不一致时它会提示。让 Claude 查询
draw_status获取局域网 URL,类似http://192.168.1.20:7331/。在设备上打开它,并保持标签页打开。
之后每个请求都会自动出现在该页面上。无需刷新,无需重新打开。
每台设备收藏一次即可。
防火墙。 必须允许端口 7331 上的入站 TCP 用于专用网络。
Windows:
New-NetFirewallRule -DisplayName "Claude draw" -Direction Inbound -Action Allow -Protocol TCP -LocalPort 7331-7340 -Profile Private -RemoteAddress LocalSubnet -Program "<path to node.exe>"在提升权限的提示符下运行。macOS:首次运行时会提示允许 node 的传入连接。接受即可。
Linux:在你运行的任何防火墙中允许该端口(如果有的话)。
安全性
守护进程只绑定回环地址,除非你选择开启,因此开箱即用时网络上的任何东西都无法访问它。
使用 CLAUDE_DRAW_LAN=1 时,两个方向刻意保持分离。本地网络上的任何东西都可以加载画布并提交绘图。只有回环地址可以创建请求或关闭守护进程,因此你网络上的设备可以回答 Claude 的问题,但不能驱动你的会话。在开启之前值得了解:没有身份验证,因此该网络上的任何人都可以看到提示词和你被要求标注的图像。
配置
变量 | 默认值 | 效果 |
|
| 守护进程监听的端口 |
| 未设置(关闭) | 设置为 |
目录结构
claude-draw/
.claude-plugin/plugin.json manifest
.claude-plugin/marketplace.json single-plugin marketplace, for /plugin marketplace add
.mcp.json MCP server registration
package.json pins "type": "commonjs" (see below)
skills/draw/SKILL.md when to use it, how to read a drawing
server/daemon.js long-lived HTTP + SSE daemon
server/canvas.html the canvas page, single file
server/mcp.js stdio MCP server, starts the daemon on demand
test/e2e.js full round-trip test, no fixtures neededpackage.json 的存在是为了固定 "type": "commonjs"。Node 从目录树向上查找 最近的 package.json 来解析模块类型,因此如果没有它,把这个插件放进一个声明了 "type": "module" 的项目中,每个 require 都会抛错。不要删除它。
测试
npm test在备用端口上启动守护进程,驱动真实的 SSE 连接,推送请求,提交和跳过绘图,并演练 MCP stdio 协议。无网络,无测试夹具,无依赖。失败时以非零状态退出。
守护进程在第一次调用 request_drawing 时启动并保持运行,这能让画布页面在请求之间保持存活,而不是被困在一个失效的页面上。
This server cannot be deployed
Maintenance
Related MCP Connectors
Give Claude a whiteboard: notes, links, images and diagrams on a board you both see and edit.
Whiteboard where any shape opens into another canvas. Claude Code and Codex plugins render plans on it.
Give your AI agent the power to cast to your home TV and control an interactive canvas. By ArdaBot.
Online whiteboard your AI agent draws on: live shared canvases, solo or with your team.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceEnables Claude to draw on a live tldraw canvas from prompts, with real-time visualization in a browser. Provides tools for creating, updating, deleting shapes and retrieving canvas state.15MIT
- AlicenseAqualityBmaintenanceEnables AI agents like Claude Code and Codex to read handwriting and sketches drawn on a tablet in real time via MCP, with local recognition to text/LaTeX, session recording, and export to Markdown/Excalidraw.9MIT
- AlicenseNot gradedqualityBmaintenanceEnables agents to present an interactive drawing canvas to users, allowing them to sketch and send drawings back into the conversation as images.4 npmMIT
- AlicenseNot gradedqualityBmaintenanceGives Claude Code agents tools to show live, themeable canvases in the browser and wait for your answers on them. You can tick items, approve changes or send forms that feed back to the agent, and start, resume or message agent sessions from the canvas.1MIT