# Diagram > Diagram hosts diagrams drawn by AI at permanent, private or public links. Publish from Claude, ChatGPT, Claude Code, Codex, Cursor, or CI, and every update lands at the same URL. Diagram is a hosting utility: a diagram is one self-contained HTML file with a permanent link at https://diagram.la/. Updates add a version under the same link. Diagrams are private by default (Google sign-in for the owner and invited emails) or public to anyone with the link. The website only reads; every write goes through an API key. Ways to publish: - MCP server: https://diagram.la/mcp. Tools that support MCP sign-in (Claude Code, Codex, Cursor, VS Code, the Claude app, ChatGPT, and more) sign in with Google in the browser; no key needed. Claude Code: claude mcp add -s user --transport http diagram https://diagram.la/mcp, then /mcp → Authenticate. Others: https://diagram.la/mcp/, or "Authorization: Bearer ". Tools: publish_diagram, setup_repo, get_diagram, and more. - HTTP API for CI and scripts: https://diagram.la/docs/api - HTTP API: https://diagram.la/api/v1 (OpenAPI: https://diagram.la/openapi.json) Keys: sign in with Google at https://diagram.la; the first key is created automatically. Free: 5 projects of 100 diagrams. Pro ($5/month): 100 projects of 1000 diagrams. ## How to draw a diagram for Diagram Diagram (https://diagram.la) hosts self-contained HTML diagrams at permanent links. To share a diagram: draw it as ONE complete HTML document and call publish_diagram. It returns a URL; give that URL to the user. - Working in a repo (you can read and write its files)? If it has no diagrams/README.md yet, set it up before the first publish: call list_projects, use the project whose slug matches the repo folder or that the user named, and otherwise ask the user which project to use (suggest the folder name in lowercase with dashes). Then call setup_repo with it and write the files it returns. Do the same when the user asks to set up Diagram. In a repo that has diagrams/README.md, read it first and follow it: save each diagram in diagrams/ and keep its id in a tag so later publishes update the same link. - Put everything inline (CSS, JS, SVG). Scripts from a CDN such as https://cdn.jsdelivr.net work (Mermaid: import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs'). - Include a . Keep it under 900KB. Prefer inline SVG or HTML/CSS boxes and arrows over images. - Never put real keys, tokens, passwords, or connection strings in a diagram; use placeholders like <API_KEY>. Diagram refuses to publish HTML that contains one. - The page runs in a sandbox: no cookies, localStorage, or forms. - Make it look like the user's company, not generic: in a repo, reuse the app's colors, fonts, and look (and keep them in diagrams/brand.md); in a chat, ask once for their site, brand colors, or a screenshot. See the drawing guide. - Make it readable: a title and one-line subtitle, flow in one direction, labeled arrows, grouped parts, few colors used for meaning. More in https://diagram.la/docs/drawing. - How often to publish: once per request, after you've made all the changes the user asked for, not after every edit. With a local file (a repo), open it in the user's browser while you work (open / start / xdg-open) so they can review it instantly, then publish when that request is done. Without local files (a chat app), each request's result is one publish; give the same link each time, and the page the user has open updates by itself. - After publishing, look at the screenshot and warnings in the result and check the diagram against what the user asked for; fix and publish again before sharing the link if something is off. get_screenshot shows the latest version any time. - To change a diagram later, call publish_diagram again with its id. The link stays the same and every version is kept; list_versions and restore_version bring an earlier one back. - Everyone who can see a project (its owner, people added to it, and org members when the org shares) can publish new versions of its diagrams (publish_diagram with its id); only the owner changes visibility, moves, or deletes. - New diagrams are private (only the owner and project members, after Google sign-in). Pass visibility "public" only when the user wants anyone with the link to see it. - Group diagrams in a project (a lowercase slug such as "my-app"). publish_diagram creates the project if it doesn't exist. New projects are personal; pass org only if the user wants the project in their org. ## Docs ### Guides - [Getting started: share AI-drawn diagrams by link](https://diagram.la/docs): Diagram hosts the diagrams Claude, ChatGPT, Codex, and Cursor draw at a private link that always shows the latest version. Sign in, paste one thing into your AI tool, and ask for a diagram. - [Share a diagram from ChatGPT or Claude as a link](https://diagram.la/docs/share-from-chat): ChatGPT and Claude can draw great diagrams, but they're stuck in the chat. Here's how to turn one into a private, shareable link that updates when the diagram does. - [Share diagrams privately, with your team, or publicly](https://diagram.la/docs/sharing): Keep AI-drawn diagrams private, share them with people or your whole org, or make one public. Every diagram keeps one link, every version is saved, and link previews never leak private titles. - [Diagram ideas to ask Claude, ChatGPT, and Codex for](https://diagram.la/docs/ideas): Architecture maps, request flows, data models, state machines, timelines, and Mermaid charts: prompts that get good diagrams from AI tools, and what a diagram can include. - [Diagram FAQ](https://diagram.la/docs/faq): What Diagram is, which AI tools work with it (Claude, ChatGPT, Codex, Cursor, Gemini CLI), what it costs, who can see your diagrams, and how it compares to screenshots. ### By tool - [How to make and share diagrams with Claude Code](https://diagram.la/guides/claude-code): setup at https://diagram.la/start/claude-code - [How to make and share diagrams with Codex CLI](https://diagram.la/guides/codex): setup at https://diagram.la/start/codex - [How to make and share diagrams with Codex app](https://diagram.la/guides/codex-app): setup at https://diagram.la/start/codex-app - [How to make and share diagrams with Gemini CLI](https://diagram.la/guides/gemini): setup at https://diagram.la/start/gemini - [How to make and share diagrams with OpenCode](https://diagram.la/guides/opencode): setup at https://diagram.la/start/opencode - [How to make and share diagrams with Cursor](https://diagram.la/guides/cursor): setup at https://diagram.la/start/cursor - [How to make and share diagrams with VS Code + Copilot](https://diagram.la/guides/vscode): setup at https://diagram.la/start/vscode - [How to make and share diagrams with Windsurf](https://diagram.la/guides/windsurf): setup at https://diagram.la/start/windsurf - [How to make and share diagrams with Cline](https://diagram.la/guides/cline): setup at https://diagram.la/start/cline - [How to make and share diagrams with Zed](https://diagram.la/guides/zed): setup at https://diagram.la/start/zed - [How to make and share diagrams with JetBrains](https://diagram.la/guides/jetbrains): setup at https://diagram.la/start/jetbrains - [How to make and share diagrams with Claude app](https://diagram.la/guides/claude): setup at https://diagram.la/start/claude - [How to make and share diagrams with ChatGPT](https://diagram.la/guides/chatgpt): setup at https://diagram.la/start/chatgpt - [How to make and share diagrams with Le Chat](https://diagram.la/guides/le-chat): setup at https://diagram.la/start/le-chat - [How to make and share diagrams with Perplexity](https://diagram.la/guides/perplexity): setup at https://diagram.la/start/perplexity ### Developer reference - [Developer reference](https://diagram.la/docs/reference): The MCP server, HTTP API, repo setup, CI, and diagram file rules, for developers and for AI agents setting up Diagram. - [Repo setup and CI](https://diagram.la/docs/agents): Let Claude Code, Codex, Cursor, or any coding agent keep diagrams in the repo and publish them to stable links over MCP, and keep them current from CI. - [Connecting tools by hand](https://diagram.la/docs/chat-apps): 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. - [Drawing diagrams that work on Diagram](https://diagram.la/docs/drawing): What a diagram file can contain, how to lay it out so it reads well, and which rendering tools (Mermaid, SVG, D2, Graphviz, Excalidraw) to reach for. - [HTTP API reference](https://diagram.la/docs/api): REST endpoints for creating projects, pushing diagram HTML, versions, visibility, and members, with curl examples and an OpenAPI description. - [How diagrams are sandboxed](https://diagram.la/docs/security): Diagram HTML runs in a sandbox with an opaque origin, so a diagram's scripts can't read your session or act as you. What works and what doesn't inside a diagram. ## Optional - [Full docs in one file](https://diagram.la/llms-full.txt) - [OpenAPI description](https://diagram.la/openapi.json) - [Pricing](https://diagram.la/pricing)