Log inSubmit server
Codex Tldraw MCP logo

Codex Tldraw MCP

Creates repo-local tldraw diagrams, SVG previews, and JavaScript/TypeScript code graphs with drift detection.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Codex Tldraw MCP

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "codex-tldraw-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "codex-tldraw-mcp"
      ]
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Automated check passed— started and listed 9 tools correctly (7d ago).

Overview

The codex-tldraw-mcp MCP server creates editable tldraw boards and SVG previews from repository scans or prompts. It can map product workflows, architecture, state machines, plans, and local JavaScript or TypeScript import graphs. Code graph comparisons identify changed, stale, new, and unchanged elements without modeling runtime call graphs. Use it when diagrams should live alongside the repository and remain reviewable in tldraw-compatible viewers.

Use cases

  • Generate a product workflow from a repository
  • Draw a prompt-defined password reset state machine
  • Create a JavaScript or TypeScript import graph
  • Compare a saved graph with changed source code
  • Review diagrams as repository-local tldraw and SVG files

Key features

  • Repo-local editable tldraw boards
  • Portable SVG previews
  • Prompt-driven workflow and architecture diagrams
  • JavaScript and TypeScript import graphs
  • Code graph drift markers
  • Board listing and summary resources

Tools9

What Codex Tldraw MCP lets your agent do. Expand a tool for its parameters.

Verified live~2.1k tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked 3d ago

Recent health check succeeded.

6/6 checks healthy over the last 46d

What it can do

From the 9 tools this server returned when we ran it; 9 declare their own safety hints.

Read-only tools · 9
Network at startup2 connections
Files written at startupNone
Install scriptsprepare
npm provenanceSigned build
Package age128 days
Maintainers1

Observed 2026-10-21 in an isolated sandbox. A description of reach, not a security audit.

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 2d ago via OSV.dev · codex-tldraw-mcp (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars25Stargazers on the source repository.
npm downloads617Package downloads in the last 30 days.
Last commit15d agoMost recent push to the default branch.
Availability100%Our rolling endpoint + install checks that succeeded.
Install checkPassedOur sandbox started it and listed its tools.
Tools exposed9Callable tools this server registers over MCP.
Directory activity2 viewsConfig copies, upvotes, and views on AllMCPs.

How Codex Tldraw MCP works

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.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Codex Tldraw MCP

codex-tldraw-mcp is an MCP server that connects an AI host to local repositories and tldraw-compatible board files. Its main tools generate workflows, architecture diagrams, prompt-driven canvases, JavaScript or TypeScript import graphs, and drift comparisons, saving editable `.tldr` boards and SVG previews under the repository’s `boards/` directory.

Install it in Codex with `codex mcp add codex-tldraw -- npx -y codex-tldraw-mcp`. You can also add a manual MCP configuration using `npx` as the command and `-y codex-tldraw-mcp` as its arguments.

Create one by calling `diagram_code_graph` for the repository. It scans local JavaScript and TypeScript modules, then saves a trackable import graph to a board. Static, dynamic, re-export, and CommonJS `require` relationships between repository modules become graph edges.

Detect drift by running `compare_code_graph` against an existing graph. It defaults to preview mode, reporting unchanged, changed, stale, and new elements without writing the board. Use `applyMarkers: true` to update changed and stale graph styling.

No, codex-tldraw-mcp is snapshot-oriented and does not control a live browser canvas or provide live collaboration. It writes `.tldr` boards and SVG previews that can later be opened or displayed by compatible viewers and systems.

Related MCP servers

All in Data Visualization All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewCodex Tldraw MCP AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/codex-tldraw-mcp?style=directory)](https://allmcps.com/mcp/codex-tldraw-mcp)
HTML Embed
<a href="https://allmcps.com/mcp/codex-tldraw-mcp"><img src="https://allmcps.com/api/badge/codex-tldraw-mcp?style=directory" alt="Codex Tldraw MCP on AllMCPs" /></a>