tldraw MCP Server

tldraw is an infinite canvas SDK for drawing, diagramming, and visual collaboration. There is no official MCP server published by tldraw, but several community implementations exist. This entry documents @talhaorak/tldraw-mcp, a community MCP server that lets AI agents like Claude read, write, search, and edit local tldraw canvas files (.tldr) on disk.

The server treats a directory of .tldr files as a persistent visual workspace. Agents can list and search canvases, retrieve shapes, and programmatically create, update, or delete shapes within them. It works with the tldraw v2 file format, includes path traversal protection, and validates writes to keep files compatible with the tldraw editor.

Notable alternatives in the same ecosystem include dpunj/tldraw-mcp (in-memory canvas with a live widget UI) and @joelhooks/tldraw-agent (text-to-diagram generation backed by an AI Gateway). Pick the variant that matches whether you want file persistence, a live canvas, or one-shot diagram generation.

Tools

Prerequisites

• Node.js installed
• A directory where .tldr files will be stored (defaults to ~/.tldraw)
• No API key or authentication required, the server operates on local files

Installation

Run directly via npx:

npx @talhaorak/tldraw-mcp

Claude Desktop config

Add to ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or the equivalent path on your OS:

{
  "mcpServers": {
    "tldraw": {
      "command": "npx",
      "args": ["@talhaorak/tldraw-mcp"],
      "env": {
        "TLDRAW_DIR": "/path/to/your/tldraw/files"
      }
    }
  }
}

Set TLDRAW_DIR to the folder you want the agent to read and write canvases in. Restart Claude Desktop after editing the config.

Opening canvases

The server produces standard .tldr files. Open them in the tldraw web editor at https://tldraw.com or in any tldraw-compatible client to view and edit visually.

• Maintain a persistent library of diagrams that an AI assistant can update over time, for example architecture diagrams that evolve with the codebase.
• Generate flowcharts and shape layouts from natural language and save them as .tldr files to open in the tldraw editor.
• Search across an existing collection of .tldr canvases to find diagrams containing specific text or labels.
• Programmatically add, move, or remove shapes in a canvas as part of an agent workflow, for example annotating an existing system diagram with new components.
• Use tldraw files as a visual scratchpad where the agent records ideas, decisions, or plans as shapes and arrows.

• "Create a new tldraw canvas called auth-flow.tldr with a flowchart of the login sequence."
• "List all .tldr files in my tldraw directory and summarize what each one contains."
• "Search my canvases for any diagram that mentions payments and open it."
• "Add a red rectangle labeled Cache connected to the existing API node in architecture.tldr."
• "Delete the deprecated LegacyService shape from system-map.tldr."

• Simple npx install with no API keys or external services required.
• Operates on standard .tldr files so output opens directly in the tldraw editor.
• Covers a useful surface area for agent workflows: create, read, update, delete, list, and search.
• Includes path traversal protection and write-time validation.

• Community maintained, not an official tldraw project, so long-term support is not guaranteed.
• File-based only, no live canvas or real-time collaboration features.
• Limited high-level helpers, complex layouts require explicit shape positioning by the agent.

• dpunj/tldraw-mcp: in-memory canvas with a live Next.js widget that the agent draws on in real time.
• joelhooks/tldraw-agent: text-to-diagram CLI and MCP server backed by an AI Gateway, focused on one-shot diagram generation.
• AndresMuelas2004/tldraw-mcp-server: larger tool surface (30 tools, 14 shape types) for programmatically creating tldraw documents.