Diagram
← Developer reference

Connecting tools by hand

Add Diagram as an MCP server so Claude, ChatGPT, Claude Code, Codex, Cursor, VS Code, Windsurf, or Gemini CLI can draw diagrams and publish them to a link.

Diagram runs a remote MCP server, so any app that supports MCP connectors can publish diagrams. It's the main way to connect every tool, chat apps and coding agents alike. You describe what you want, the model draws it as HTML, and Diagram hands back a link.

The fastest way: sign in at https://diagram.la and pick your tool on the getting-started page.

Your MCP address

Client Address Sign-in
Tools that support MCP sign-in (Claude Code, Codex, Gemini CLI, Cursor, VS Code, Zed, OpenCode, the Claude app, ChatGPT, Le Chat) https://diagram.la/mcp A browser tab opens the first time: sign in with Google and click Allow. No key to copy.
Tools that only take a URL and can't sign in https://diagram.la/mcp/<your key> The key is in the address
Scripts and clients that send headers https://diagram.la/mcp Authorization: Bearer <your key>

Every tool you sign in shows up on the API keys page, where you can disconnect it. Treat an address with a key in it like a password; if it leaks, revoke the key there.

Sign-in follows the MCP authorization spec: OAuth 2.1 with PKCE and dynamic client registration, discovered from https://diagram.la/.well-known/oauth-protected-resource/mcp.

Tools

Tool What it does
publish_diagram Create a diagram from HTML, or update one by id. Creates the project if needed. Returns the link, plus a screenshot and layout warnings so the AI can check its work.
setup_repo Set a repo up to keep diagrams in diagrams/ for a project.
list_projects Projects you own or were added to.
list_diagrams A project's diagrams and links.
get_diagram A diagram's details and, with include_html, its HTML for editing.
get_screenshot A screenshot of a diagram (current or an earlier version) with layout warnings, to review it before sharing.
list_versions A diagram's history: who published each version and when.
restore_version Bring back an earlier version as the newest one, at the same link.
set_visibility Make a diagram public or private.
move_diagram Move a diagram to another of your projects. The link stays the same.
list_orgs Orgs you belong to and whether they share projects.
set_project_org Move a project into an org or back to personal.
share_project Add someone to a project (they can see and edit its diagrams), or remove them.
delete_diagram Delete a diagram and its versions.

The server also sends instructions on how to draw a diagram that works well on Diagram, so you don't have to explain the format.

Coding agents

Claude Code

Run this in a terminal in your repo. It connects Diagram and starts Claude Code with the first message:

claude mcp remove -s user diagram ; claude mcp add -s user --transport http diagram https://diagram.la/mcp ; claude

When Claude Code starts, type /mcp, pick diagram, and choose Authenticate: sign in with Google in the browser tab that opens.

Codex CLI

Run this in a terminal in your repo. It connects Diagram and starts Codex CLI with the first message:

codex mcp remove diagram ; codex mcp add diagram --url https://diagram.la/mcp ; codex "Set up Diagram for this repo, then ask me what to draw. If you don't have the Diagram tools, tell me the connection didn't work."

Codex opens a browser tab as soon as it adds Diagram: sign in with Google and click Allow.

Codex app

  1. In the Codex app, open Settings → MCP servers → Add server, choose Streamable HTTP, paste the URL from this snippet, save, and restart. Or add the snippet to ~/.codex/config.toml (%USERPROFILE%.codex\config.toml on Windows), which the Codex CLI and IDE extension share:
[mcp_servers.diagram]
url = "https://diagram.la/mcp"
  1. Open your repo in the Codex app and start a new task, then ask for a diagram in plain words. In a repo, the first request also sets up diagrams/.

After adding it, choose Sign in next to diagram in Settings → MCP servers: sign in with Google and click Allow.

Gemini CLI

Run this in a terminal in your repo. It connects Diagram and starts Gemini CLI with the first message:

gemini mcp remove -s user diagram ; gemini mcp add -s user --transport http diagram https://diagram.la/mcp ; gemini -i "Set up Diagram for this repo, then ask me what to draw. If you don't have the Diagram tools, tell me the connection didn't work."

When Gemini first connects, a browser tab opens: sign in with Google and click Allow.

OpenCode

  1. Add this to ~/.config/opencode/opencode.json (merge it if the file already has an "mcp" section):
{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "diagram": {
      "type": "remote",
      "url": "https://diagram.la/mcp",
      "enabled": true
    }
  }
}
  1. Run opencode in your repo, then ask for a diagram in plain words. In a repo, the first request also sets up diagrams/.

Then run opencode mcp auth diagram: a browser tab opens to sign in with Google.

Editors

Cursor

  1. Use the Add to Cursor button on the setup page. Or add this to ~/.cursor/mcp.json:
{
  "mcpServers": {
    "diagram": {
      "url": "https://diagram.la/mcp"
    }
  }
}
  1. Open your repo and switch the chat to Agent, then ask for a diagram in plain words. In a repo, the first request also sets up diagrams/.

In Cursor Settings → MCP, click Connect (or Needs login) next to diagram: sign in with Google and click Allow.

VS Code + Copilot

  1. Use the Add to VS Code button on the setup page. Or run "MCP: Add Server" from the Command Palette, choose HTTP, paste this URL, and choose Global. VS Code asks you to trust the server the first time it starts:
https://diagram.la/mcp
  1. Open your repo and switch Copilot Chat to Agent mode, then ask for a diagram in plain words. In a repo, the first request also sets up diagrams/.

When VS Code starts the server, it asks to sign in: allow it, then sign in with Google and click Allow.

Windsurf

  1. Click the MCPs icon at the top right of the Cascade panel, open the raw config (~/.codeium/windsurf/mcp_config.json), and add this. The Devin agent in Windsurf reads the same file:
{
  "mcpServers": {
    "diagram": {
      "url": "https://diagram.la/mcp/dgm_YOUR_KEY"
    }
  }
}
  1. Open your repo in Windsurf and open Cascade, then ask for a diagram in plain words. In a repo, the first request also sets up diagrams/.

This address has your key in it; get yours on the setup page.

Cline

  1. In Cline, click the MCP Servers icon → Remote Servers. Name it diagram, paste this URL, set Transport Type to Streamable HTTP, and click Add Server:
https://diagram.la/mcp/dgm_YOUR_KEY
  1. Start a new Cline task in your repo, then ask for a diagram in plain words. In a repo, the first request also sets up diagrams/.

This address has your key in it; get yours on the setup page.

Zed

  1. In Zed, open Settings → AI → MCP Servers → Add Server → Add Remote Server, or add this to your settings file (zed: open settings file). A green dot means it’s connected:
{
  "context_servers": {
    "diagram": {
      "url": "https://diagram.la/mcp"
    }
  }
}
  1. Open your repo in Zed and open the Agent Panel, then ask for a diagram in plain words. In a repo, the first request also sets up diagrams/.

The first time, a browser tab opens: sign in with Google and click Allow.

JetBrains

  1. For AI Assistant: Settings → Tools → AI Assistant → Model Context Protocol (MCP) → Add, paste this as JSON, choose Global, then OK and Apply. For Junie, put the same JSON in ~/.junie/mcp/mcp.json:
{
  "mcpServers": {
    "diagram": {
      "url": "https://diagram.la/mcp/dgm_YOUR_KEY"
    }
  }
}
  1. Open your repo and open AI Assistant or Junie in agent mode, then ask for a diagram in plain words. In a repo, the first request also sets up diagrams/.

This address has your key in it; get yours on the setup page.

Chat apps

Claude app

  1. In claude.ai or the Claude desktop app: Customize → Connectors → + → Add custom connector. Name it Diagram, paste this URL, leave Advanced settings empty, and click Add:
https://diagram.la/mcp
  1. In a new chat, click + → Connectors and turn on Diagram, then ask for a diagram in plain words. In a repo, the first request also sets up diagrams/.

After adding it, click Connect next to Diagram: sign in with Google and click Allow.

Works on every Claude plan (Free allows one custom connector). On Team and Enterprise, an org owner adds custom connectors under Organization settings → Connectors.

ChatGPT

  1. On chatgpt.com: Settings → Security and login → turn on Developer mode. Then go to chatgpt.com/plugins, click +, name it Diagram, paste this as the server URL, choose OAuth, and create it:
https://diagram.la/mcp
  1. In a new chat, pick Developer mode from the + menu and select Diagram (ChatGPT asks you to confirm each publish), then ask for a diagram in plain words. In a repo, the first request also sets up diagrams/.

ChatGPT then sends you to sign in with Google and click Allow.

Web only (chatgpt.com). Publishing needs a plan whose developer mode allows write tools: Business, Enterprise, or Edu for sure; OpenAI’s docs disagree on Plus and Pro. On Business and Enterprise, an admin has to allow developer mode.

Le Chat

  1. In Le Chat: Connectors → + Add Connector → Custom MCP Connector. Name it Diagram, paste this URL, and click Connect:
https://diagram.la/mcp
  1. In a new chat, enable Diagram in the tools menu, then ask for a diagram in plain words. In a repo, the first request also sets up diagrams/.

Le Chat detects the sign-in and opens it: sign in with Google and click Allow.

Perplexity

  1. In Perplexity: Account settings → Connectors → + Custom connector → Remote. Name it Diagram, paste this URL, set Authentication to None and Transport to Streamable HTTP, add it, then click its card to turn it on:
https://diagram.la/mcp/dgm_YOUR_KEY
  1. Start a new thread with Diagram turned on, then ask for a diagram in plain words. In a repo, the first request also sets up diagrams/.

This address has your key in it; get yours on the setup page.

Needs Perplexity Pro, Max, or Enterprise.

Anything else

  1. Any app or agent that takes a remote MCP server (Streamable HTTP): add a server named diagram with this URL:
https://diagram.la/mcp/dgm_YOUR_KEY
  1. Start a new chat, then ask for a diagram in plain words. In a repo, the first request also sets up diagrams/.

This address has your key in it; get yours on the setup page.