使用说明
tldraw MCP服务器
功能齐全 模型上下文协议（MCP） 允许Claude等AI助手创建和编辑的服务器 tldraw 以编程方式绘制图表。随着 30工具 在7个类别中，它支持所有14种tldraw形状类型，并生成标准 .tldr 文件夹。
什么是MCP？
模型上下文协议是一个开放标准，允许人工智能模型与外部工具和服务进行交互。此服务器将tldraw的绘图功能作为MCP工具公开，使Claude（或任何兼容MCP的客户端）能够创建复杂的图表、流程图、线框等，所有这些都可以通过自然语言完成。
特性
- 14种形状类型：地理、文本、箭头、注释、框架、绘图、线条、图像、视频、书签、嵌入、突出显示等
- 30工具 分为7类
- 富文本 支持tldraw的原生格式
- 箭头绑定 --用智能箭头连接形状
- 完整的文档生命周期 --创建、加载、保存和导出
.tldr文件 - 零浏览器依赖 --纯Node.js，直接生成文件
先决条件
- Node.js 18+
- npm 或兼容的包管理器
- MCP兼容客户端（克劳德代码、克劳德桌面等）
安装
git clone https://github.com/AndresMuelas2004/tldraw-mcp-server.git
cd tldraw-mcp-server
npm install
npm run build
配置
克劳德代码
添加到您的Claude Code MCP设置中：
{
"mcpServers": {
"tldraw": {
"command": "node",
"args": ["C:/path/to/tldraw-mcp-server/dist/index.js"]
}
}
}
克劳德桌面版
添加 claude_desktop_config.json:
{
"mcpServers": {
"tldraw": {
"command": "node",
"args": ["C:/path/to/tldraw-mcp-server/dist/index.js"]
}
}
}
替换 C:/path/to/tldraw-mcp-server 带有克隆存储库的实际路径。
可用工具
文档管理
| 工具 | 说明 |
|---|---|
tldraw_new_document |
创建新的空文档 |
tldraw_load_document |
加载a .tldr 文件 |
tldraw_save_document |
保存当前文档 |
tldraw_get_document_info |
获取文档元数据 |
形状创建（14种类型）
| 工具 | 说明 |
|---|---|
tldraw_create_geo |
几何形状（矩形、椭圆形、菱形、星形、云状等） |
tldraw_create_text |
文本标签 |
tldraw_create_arrow |
箭头（带可选绑定） |
tldraw_create_note |
粘性笔记 |
tldraw_create_frame |
分组帧 |
tldraw_create_draw |
手绘图纸 |
tldraw_create_line |
多点线 |
tldraw_create_image |
图像形状 |
tldraw_create_video |
视频嵌入 |
tldraw_create_bookmark |
URL书签 |
tldraw_create_embed |
嵌入式内容 |
tldraw_create_highlight |
高亮笔画 |
连接
| 工具 | 说明 |
|---|---|
tldraw_bind_arrow |
将箭头端点绑定到形状 |
tldraw_unbind_arrow |
删除箭头绑定 |
形状操纵
| 工具 | 说明 |
|---|---|
tldraw_move_shapes |
将形状移动到新坐标 |
tldraw_resize_shapes |
调整形状大小 |
tldraw_rotate_shapes |
旋转形状 |
tldraw_delete_shapes |
删除形状 |
tldraw_duplicate_shapes |
重复形状 |
tldraw_restyle_shapes |
更改形状样式 |
tldraw_set_opacity |
设置形状不透明度 |
tldraw_update_shape_props |
更新任何形状属性 |
tldraw_lock_shapes |
锁定/解锁形状 |
分组和排序
| 工具 | 说明 |
|---|---|
tldraw_group_shapes |
将形状组合在一起 |
tldraw_ungroup_shapes |
取消形状分组 |
tldraw_reparent_shapes |
将形状移动到框架/组中 |
tldraw_reorder_shapes |
更改z顺序（前/后） |
页面
| 工具 | 说明 |
|---|---|
tldraw_create_page |
创建新页面 |
tldraw_list_pages |
列出所有页面 |
tldraw_rename_page |
重命名页面 |
tldraw_delete_page |
删除页面 |
tldraw_reorder_page |
重新排序页面 |
查询和摄像头
| 工具 | 说明 |
|---|---|
tldraw_list_shapes |
列出页面上的所有形状 |
tldraw_get_shape |
按ID获取形状详细信息 |
tldraw_list_bindings |
列出所有绑定 |
tldraw_get_bindings_for_shape |
获取特定形状的绑定 |
tldraw_list_assets |
列出所有资产 |
tldraw_set_camera |
设置相机位置和变焦 |
项目结构
tldraw-mcp-server/
├── src/
│ ├── index.ts # Server entry point
│ ├── register-tools.ts # Tool registration
│ ├── schemas/ # Zod schemas for shapes and styles
│ ├── state/ # Document state management
│ ├── tools/ # Tool implementations (one file per category)
│ └── utils/ # Helpers (IDs, indices, rich text, defaults)
├── examples/ # Usage examples (diagram generation, serving)
├── dist/ # Compiled output (generated)
├── package.json
└── tsconfig.json
示例
这 examples/ 目录包含演示用法的脚本：
generate-diagram.mjs--以编程方式构建完整的多形状图serve-tldr.mjs--服务a.tldrHTTP文件serve-html.mjs--提供图表的HTML导出inject-diagram.mjs--编码a.tldrbase64用于浏览器注入prep-inject.mjs--生成与Playwright兼容的注入函数pw-inject.mjs--用于将图表注入tldraw的完整剧作家脚本
# Build first
npm run build
# Generate a sample diagram
node examples/generate-diagram.mjs
贡献
欢迎投稿！拜托：
- 分叉存储库
- 创建要素分支(
git checkout -b feature/my-feature) - 提交您的更改
- 推送到分支并打开Pull Request
