# codex-tldraw-mcp

Create editable .tldr boards and SVG previews from a repository, then check JavaScript and TypeScript import graphs for drift. Useful for mapping project architecture and workflows.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 25
- Author: jananadiw
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/jananadiw/codex-tldraw-mcp
- Updated: 2026-10-14
- HTML: https://affpapa.org/en/nevibecode/mcp/codex-tldraw-mcp

## What it does

\`codex-tldraw-mcp` runs as an MCP server over stdio. It scans a repository to add a product workflow or architecture view to a `.tldr` board. You can also request a state machine, plan, or other workflow diagram. Each written diagram comes with an SVG preview, and new drawings are appended to existing boards.

For JavaScript and TypeScript projects, the server builds a module and import graph. Its comparison tool flags changed or stale parts; other tools list boards and summarize their contents. Plugin tool calls require an absolute repository path. Relative paths are rejected so diagrams do not end up in the plugin cache.

By default, generated files go under the repository’s `boards/` directory. The plugin needs Node.js version 20.11 or newer, plus `npm` on `PATH`; its first fallback launch through `npx` requires package registry access. MCP hosts without app support can still use text results and SVG previews.

## Requirements
- Needs: Node.js (commands run via npx)
- Environment variables: `TLDRAW_MCP_ALLOWED_ROOTS` — keys and tokens: ask the human for the values, never commit them or put them in shared files.

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add --env TLDRAW_MCP_ALLOWED_ROOTS=<TLDRAW_MCP_ALLOWED_ROOTS> --transport stdio codex-tldraw-mcp -- npx -y codex-tldraw-mcp
```
Replace <…> with your own values

### Codex

**Platform CLI**
```bash
codex mcp add codex-tldraw-mcp --env TLDRAW_MCP_ALLOWED_ROOTS=<TLDRAW_MCP_ALLOWED_ROOTS> -- npx -y codex-tldraw-mcp
```
Replace <…> with your own values

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "codex-tldraw-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "codex-tldraw-mcp"
            ],
            "env": {
                "TLDRAW_MCP_ALLOWED_ROOTS": "<TLDRAW_MCP_ALLOWED_ROOTS>"
            }
        }
    }
}
```
Replace <…> with your own values

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "codex-tldraw-mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "codex-tldraw-mcp"
            ],
            "env": {
                "TLDRAW_MCP_ALLOWED_ROOTS": "<TLDRAW_MCP_ALLOWED_ROOTS>"
            }
        }
    }
}
```
Replace <…> with your own values

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add -e TLDRAW_MCP_ALLOWED_ROOTS=<TLDRAW_MCP_ALLOWED_ROOTS> codex-tldraw-mcp npx -y codex-tldraw-mcp
```
Replace <…> with your own values

## When to use it
- map a repository’s product workflow
- diagram project architecture and component interactions
- build an import graph for JavaScript and TypeScript modules
- flag stale nodes and links in a saved graph
- create an SVG preview alongside an editable project board

## Example prompts
- Use `codex-tldraw-mcp` to map the workflow in this repository.
- Draw a password reset state machine on a project board.
- Compare the import graph with the current code and mark stale parts.

## Similar
- [Next AI Draw.io](https://affpapa.org/en/nevibecode/mcp/next-ai-drawio.md) — MCP server · ★ 36398
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [Agent-Native Assets](https://affpapa.org/en/nevibecode/mcp/agent-native-assets.md) — MCP server · ★ 7506
- [Remove AI Watermarks](https://affpapa.org/en/nevibecode/mcp/remove-ai-watermarks.md) — MCP server · ★ 6114
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md