codex-tldraw-mcp — Codex MCP server: diagrams and setup
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.
claude mcp add --env TLDRAW_MCP_ALLOWED_ROOTS=<TLDRAW_MCP_ALLOWED_ROOTS> --transport stdio codex-tldraw-mcp -- npx -y codex-tldraw-mcpWhat codex-tldraw-mcp 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.
What it helps with
- 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 for the agent
- Use
codex-tldraw-mcpto 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.
How to install codex-tldraw-mcp
Platform CLI
claude mcp add --env TLDRAW_MCP_ALLOWED_ROOTS=<TLDRAW_MCP_ALLOWED_ROOTS> --transport stdio codex-tldraw-mcp -- npx -y codex-tldraw-mcpReplace <…> with your own values
Platform CLI
codex mcp add codex-tldraw-mcp --env TLDRAW_MCP_ALLOWED_ROOTS=<TLDRAW_MCP_ALLOWED_ROOTS> -- npx -y codex-tldraw-mcpReplace <…> with your own values
Config file
{
"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
Config file
{
"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
Platform CLI
gemini mcp add -e TLDRAW_MCP_ALLOWED_ROOTS=<TLDRAW_MCP_ALLOWED_ROOTS> codex-tldraw-mcp npx -y codex-tldraw-mcpReplace <…> with your own values
Step by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about codex-tldraw-mcp
How do I install codex-tldraw-mcp in Codex?
Add the server with codex mcp add codex-tldraw-mcp --env TLDRAW_MCP_ALLOWED_ROOTS=<TLDRAW_MCP_ALLOWED_ROOTS> -- npx -y codex-tldraw-mcp. Pass an absolute repository path when calling plugin tools.
What does codex-tldraw-mcp do?
It creates editable .tldr diagrams and SVG previews, and can build JavaScript and TypeScript import graphs to track code changes.
What does the codex-tldraw-mcp plugin need to run?
It requires Node.js version 20.11 or newer and npm on PATH. The first fallback launch using npx also needs access to the package registry.
