Diagram editor

Draw boxes and arrows, or let your AI app draw them for you. This page offers its editor as MCP tools through tab-mcp: connect Claude, ChatGPT or Claude Code below, and it reads, draws and rearranges the diagram right here in your tab, while you watch and keep editing.

Empty. Add a shape above, double-click to add a box, or ask your AI app to draw something.

Drag shapes to move them, double-click to edit a label. Arrow: click the start shape, then the target. Delete removes the selection, arrow keys nudge it, Ctrl+Z undoes, also what the AI app did. The diagram stays in this browser.

AI access

Off. No AI app can use this page.

  1. Click Connect your AI app and copy the address it shows.
  2. Add it to your AI app: in Claude, Settings → Connectors → Add custom connector; in Claude Code, claude mcp add --transport http diagram <address>, then /mcp and Authenticate.
  3. Type the code from this page on the relay's sign-in page.

The AI app reaches this tab only while it is open and connected. Clearing the whole diagram asks you first. What the relay passes on and stores: privacy.

Try these

Copy a prompt into your AI app and watch the diagram change.

  • Draw a flowchart for making a cup of coffee, with a check whether there are enough beans.
  • Draw the architecture of a small web shop: browser, CDN, web server, API, database and a payment provider. Lay it out from left to right.
  • Turn this into an org chart: CEO; CTO with a frontend and a backend team; CFO with accounting and payroll.
  • Look at my diagram. What is missing? Add it in orange and tell me why.
  • Make all decisions yellow diamonds, label the arrows that leave them, then tidy up the layout.
  • Show me the diagram as a picture.

Select a shape first and you can say "this box". Changed shapes light up; Undo takes back the AI app's last step.