Happy slice of mcp pizzaMCP.pizza

codex-tldraw-mcp

MCP.Pizza Chef: jananadiw

codex-tldraw-mcp is a local server that helps you create clear visual diagrams of your code projects. It scans JavaScript and TypeScript repositories to produce workflow, state machine, and architecture diagrams saved in your project folder. You can also track changes in your code modules over time and update diagrams accordingly. It works with the Cursor app and other Codex MCP clients, requires no API keys, and is easy to set up with simple copy-paste commands.

Coding
Other

Use This MCP server To

Generate a visual workflow diagram of my current code repository Create a state machine or architecture sketch from a text prompt Track and highlight changes in my JavaScript/TypeScript module imports Append new diagrams to an existing tldraw board in my repo Preview code graph drift after code changes List and summarize existing diagrams in my project boards

README

codex-tldraw-mcp

npm version CI License: MIT

A Codex stdio MCP server that generates repo-local tldraw diagrams and checks trackable code graphs for drift.

codex-tldraw-mcp demo

Quick Start

Add the server to Codex:

codex mcp add codex-tldraw -- npx -y codex-tldraw-mcp

Then ask Codex to diagram the current repo:

Use codex-tldraw to diagram this repo.

Reverse-engineer its runtime architecture:

Use codex-tldraw to show how this repo works across its main components.
Show the main flow first, keep short errors inside components, and label each interaction once.

Or ask for a diagram directly:

Use codex-tldraw to draw a password reset state machine.

Create a trackable JavaScript or TypeScript module graph:

Use codex-tldraw to create a code graph for this repo.

After the code changes, compare it with the saved graph:

Use codex-tldraw to preview code graph drift, then mark stale elements.

The default output is:

<repo>/boards/main.tldr

Open the generated board in a tldraw-compatible viewer.

What You Get

  • A repo-local .tldr board that stays with the project it explains.
  • A user-facing product workflow inferred from package metadata and source text.
  • A prompt-driven offline canvas API for drawing workflows, state machines, plans, and architecture sketches that are not tied to repo scanning.
  • Simple architecture diagrams showing the main flow first, with supporting services below it.
  • A trackable JavaScript and TypeScript module/import graph with drift detection.
  • Red markers for stale nodes and edges, orange markers for changed modules, and a report of new elements.
  • tldraw steps and arrows laid out left to right.
  • Non-destructive updates: existing boards get the next diagram appended to the right.
  • MCP resources for listing boards and reading board summaries.

For a handwriting font app, the workflow may be inferred as:

codex-tldraw-mcp FAQ

Can I use this to create visual diagrams of my code repository?
Yes — it scans your repo and generates tldraw workflow and architecture diagrams locally.
Can I use this to track changes in my JavaScript or TypeScript code modules?
Yes — it creates a code graph and can highlight changed, stale, or new modules over time.
Which apps support codex-tldraw-mcp?
It works with Cursor and other Codex MCP-compatible clients.
Do I need an API key or special account to use this?
No — it runs locally and requires no API keys or accounts.
How hard is it to set up codex-tldraw-mcp?
Setup involves copying a small config snippet and running an npx command, so it's copy-paste-config level.
Can I draw custom workflow or state machine diagrams without scanning code?
Yes — you can prompt it to draw diagrams directly on a local board without repo scanning.