Tldraw MCP Server

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 带有克隆存储库的实际路径。

可用工具

文档管理

形状创建（14种类型）

连接

形状操纵

分组和排序

页面

查询和摄像头

项目结构

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 .tldr HTTP文件
• serve-html.mjs --提供图表的HTML导出
• inject-diagram.mjs --编码a .tldr base64用于浏览器注入
• prep-inject.mjs --生成与Playwright兼容的注入函数
• pw-inject.mjs --用于将图表注入tldraw的完整剧作家脚本

# Build first
npm run build

# Generate a sample diagram
node examples/generate-diagram.mjs

贡献

欢迎投稿！拜托：

1. 分叉存储库
2. 创建要素分支(git checkout -b feature/my-feature)
3. 提交您的更改
4. 推送到分支并打开Pull Request

许可证

麻省理工学院