# codex-tldraw-mcp [Health: Active]

**Category:** 📊 Data Visualization  
**Repository:** https://github.com/jananadiw/codex-tldraw-mcp  
**GitHub Stars:** 25  
**npm Downloads (last month):** 617  
**Views:** 2  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/codex-tldraw-mcp

## Description
A Codex stdio MCP server that generates repo-local tldraw diagrams and detects code graph drift.

## Tools
Capabilities this server exposes over MCP:

- **open_tldraw_file** — Opens a .tldr file in an interactive tldraw editor.
- **save_board** — Writes .tldr and SVG preview updates from the MCP App editor.
- **diagram_code_graph** — Scans repository-local JavaScript and TypeScript modules and appends a trackable module/import graph to a tldraw board.
- **compare_code_graph** — Compares the current JavaScript and TypeScript module graph with an existing trackable code graph. Preview is the default; applyMarkers updates only generated graph styling.
- **diagram_repo** — Scans a local repository and appends a simple product workflow diagram to a tldraw board. Use this when the user asks Codex to draw what a project does.
- **draw_canvas** — Appends a prompt-provided workflow, state machine, architecture sketch, or plan to a tldraw board without scanning repository source.
- **draw_architecture** — Appends a simple architecture diagram with a straight main flow, supporting components below it, concise calls, and errors inside components. Inspect the codebase first and keep implementation libraries inside component actions.
- **list_boards** — Lists tldraw boards stored under the target repository boards directory.
- **read_board_summary** — Summarizes shapes and workflow diagrams in a tldraw board.

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

```json
"mcpServers": {
  "codex-tldraw-mcp": {
    "command": "npx",
    "args": ["-y","codex-tldraw-mcp"]
  }
}
```

## Documentation

## What codex-tldraw-mcp MCP server does

The codex-tldraw-mcp MCP server writes diagram artifacts into a repository’s `boards/` directory. Diagram-writing operations produce an editable `.tldr` board and a portable `.svg` preview, with default paths of `boards/main.tldr` and `boards/main.svg`. Existing boards are updated non-destructively by appending new diagrams to the right.

The server supports two broad workflows. Repository-aware tools inspect source or package information to produce product workflows, architecture views, and module graphs. Prompt-driven drawing uses the repository only as the output location, allowing an agent to create workflows, state machines, architecture sketches, or plans that are not derived from source files.

## How it works

`diagram_repo` scans a repository and adds an inferred product workflow. `draw_architecture` produces a compact view with a main flow, supporting components, actions, calls, and short errors. `draw_canvas` turns a supplied prompt into diagram content.

`diagram_code_graph` scans repository-local JavaScript and TypeScript modules. It creates nodes for modules and edges for static imports, dynamic imports, re-exports, and CommonJS `require` relationships. The scanner supports `.js`, `.jsx`, `.mjs`, `.cjs`, `.ts`, `.tsx`, `.mts`, and `.cts` files. External imports are counted but not drawn, and unresolved relative imports are reported.

`compare_code_graph` compares the current repository with a saved graph. Preview mode does not modify the board; applying markers updates MCP-generated graph styling and metadata while preserving positions, labels, manual shapes, and other diagrams. Changed modules and stale elements receive dashed markers, while new elements are reported in the tool result.

## Setup and configuration

Add the codex-tldraw-mcp MCP server to Codex with `codex mcp add codex-tldraw -- npx -y codex-tldraw-mcp`. Equivalent manual configuration uses `npx` as the command and `-y codex-tldraw-mcp` as its arguments.

Every tool accepts an optional `repoPath`. Relative paths resolve from the MCP server’s working directory. Board resources initially use that working directory and then reflect the most recent repository path supplied to a tool. Open generated `.tldr` files in a tldraw-compatible viewer; the SVG can be displayed by MCP hosts, browsers, documentation systems, or code review tools.

## Tools and capabilities

- `diagram_repo`: adds a repository-derived product workflow.
- `draw_canvas`: appends a prompt-defined workflow, state machine, plan, or architecture sketch.
- `draw_architecture`: creates a simplified codebase architecture diagram.
- `diagram_code_graph`: creates a trackable local module and import graph.
- `compare_code_graph`: previews or applies code graph drift markers.
- `list_boards`: lists boards in `boards/`.
- `read_board_summary`: returns diagram summaries, shape counts, and artifact paths.

The codex-tldraw-mcp MCP server also exposes resources for board listings, summaries, editable board files, and SVG previews. Generated shapes are limited to the text, rectangle, and arrow forms supported by its SVG renderer.

## Limitations and notes

The code graph represents module and import relationships, not runtime call graphs. Boards made by `diagram_repo`, `draw_canvas`, or older releases lack trackable code-graph metadata, so a graph must first be created with `diagram_code_graph` before drift comparison is useful. The server is snapshot-oriented: it writes files but does not control a live browser canvas or provide live collaboration.

When a graph returns to its prior code state, rerunning comparison restores the generated styling. New elements are reported but are not automatically inserted or rearranged. The project is licensed under MIT.

_Full upstream README: https://allmcps.com/mcp/codex-tldraw-mcp/readme_