draw

Name: draw
Author: redcrayonai

A live architecture board you and your coding agent draw on together.
The agent draws what it builds. You read the board, not a prose summary.

Docs · Install · What to ask · Demos · Examples · What leaves your machine

claude plugin marketplace add redcrayonai/draw && claude plugin install draw@redcrayonai

_{One request replayed hop by hop (play_trace). By redcrayon.}

Ask your agent in plain words:

"Add rate limiting to the public API. Draw what you change on a redcrayon board."
"Draw how this repo fits together. Cite a line for every edge."
"Drop the unused customers.name column. Flag the migration and cite every reader."
"Pods in checkout keep restarting since 14:00. Lay out what you find on a scratch board."
"Mark what this SIEM alert and scanner report affect, and tell me what to fix first."

The agent opens a board named after your branch, posts the link, and keeps it current as it works.

Install

Claude Code (board tools, /draw:navigate, and code refs filled in for you):

/plugin marketplace add redcrayonai/draw
/plugin install draw@redcrayonai

Then /mcp → draw → Authenticate, and run /draw:navigate.

Cursor

~/.cursor/mcp.json:

{ "mcpServers": { "draw": { "url": "https://mcp.redcrayon.ai/mcp" } } }

Cursor Settings → MCP, click login next to draw.

Codex

codex mcp add draw --url https://mcp.redcrayon.ai/mcp
codex mcp login draw

claude.ai

Customize → Connectors → Add custom connector, name it draw, paste https://mcp.redcrayon.ai/mcp, Connect. claude.ai draws from the conversation; code refs need a coding agent in your project.

Any other MCP client

Give it https://mcp.redcrayon.ai/mcp. Every client signs in once, in the browser.

Code refs outside Claude Code: when a tool needs a capture of your checkout, it tells the agent the exact command, and the agent runs it. Nothing to install; Node 20+ and git on PATH.

npx -y @redcrayonai/draw@1 doctor   # check node, git, repo, network

What to ask

Ask	You get
Watch it build "Add rate limiting to the public API. Draw what you change."	The components it is about to change, drawn before the first edit. Every edge cites the line that proves it; every symbol it touches has a code ref.
Give feedback "Listen for my red crayon marks and answer each one on the board."	Circle a node, add a note and press Send. The agent replies with changed files or a reason to keep the code. Walkthrough.
Propose a design "Branch this board, draw the queue proposal, and submit it for review."	A separate diagram to review before a person merges it. Walkthrough.
Review a risky change "Drop customers.name. Flag the migration and cite every reader."	The migration flagged on the database. A reader it did not update shows as one that will break.
Map a codebase "Draw how this repo fits together. Cite a line for every edge."	An onboarding map, left to right, each box with a two-sentence doc. Share it as a view link.
Watch local traffic "Start a tap while I exercise checkout locally."	Measured traffic, latency and errors on the request path. Needs Node 22 and OpenTelemetry traces. Examples.
Investigate an incident "Checkout pods keep restarting. Lay out what you find."	Charts beside the services they describe, each saying where its data came from. Pairs with a Grafana or Kubernetes MCP server.
Triage security findings "Mark what this alert and scan affect. What do I fix first?"	Compromised and vulnerable services marked, each with its blast radius. Explain the priority using exposure, evidence and sensitive downstream systems.

Review a risky change

Migration 0042 replaces customers.name with display_name. The board shows the table's new shape, the step that can't be undone, and the one reader the change missed: the welcome email still selects name. Code refs open the exact lines.

Open the demo board → _{Catppuccin Mocha theme}

Investigate an incident

A scratch pad beside the services it explains: 60 real requests to /health, total time against the database time it reports, and p50/p95 per endpoint. The slow tail isn't the database. Every chart says where its numbers came from.

Open the demo board → _{Neo-brutalism theme}

Triage security findings

A SIEM alert marks admin-portal compromised; scanner findings mark the gateway and a worker vulnerable. Open a ⚠ marker to see what it reaches and what trusts it, hop by hop.

Open the demo board → Click a ⚠ marker, then play spread. _{Dark theme}

Thirteen themes, from Neo-brutalism to Nord: pick one from the board header.

What leaves your machine

Code snippet storage is off by default. Code refs keep paths, symbols, line numbers and hashes. Code text stays on the board only if you enable Store code snippets on my boards in dashboard Settings → Code.

The helper still uploads cited files for checks. Captures expire within ten minutes and cannot be read again after the call claims them. Known secret filenames and ignored files are refused, but the helper does not scan file contents before upload.

Board content is not end-to-end encrypted. Hosted operators can read stored data. Sharing a board or including code refs in a link is a separate choice from snippet storage. Data and consent · Upload details.

Your own server

REDCRAYON_MCP_URL=http://localhost:8788/mcp claude

Other clients take that URL in place of the hosted one. Self-hosting instructions ship with the open-source core.

License

Apache License 2.0. See LICENSE.