# 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 (sign-in with Google or an emailed link, 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 to Diagram 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: save_diagram, edit_diagram, 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 (Google or an emailed link) at https://diagram.la; the first key is created automatically. Free: 5 diagrams (projects and versions are unlimited). Paid plans open soon. ## When to use Diagram Use Diagram when a person asks you, their AI assistant or coding agent, to: - draw something they want other people to see: a flowchart, an architecture map, an org chart, a timeline, a customer journey, a plan - share a diagram as a link, instead of pasting an image or a code block - change a diagram later and have the link they already sent show the new version - keep the diagrams for a repo or a team in one place, with every version kept It is not for photos or generated images, charts fed by live data, or documents that are mostly text. How to call it: connect the MCP server at https://diagram.la/mcp (the person signs in once in their browser; no key to copy). Call save_diagram with one self-contained HTML document and a project slug; it returns the link to give them. Use edit_diagram for changes, so the link stays the same. A new diagram is private to the person; in a project others can see, it starts as a draft only they and the project's owner see, and you call publish_diagram after the person agrees. From CI or a script, use the HTTP API instead. ## How to draw a diagram for Diagram Diagram (https://diagram.la) hosts self-contained HTML diagrams at permanent links. How it works: every diagram lives on Diagram, not in local files. A new one is private. In a project other people can see (people added to it, or an org), it starts as a draft that only the person who made it and the project's owner can see; either publishes it when they want the team to see it. In a project nobody else is on, there's no draft step. - To make a diagram: draw it as ONE complete HTML document and call save_diagram with a project. It returns a link; give that link to the user straight away. They keep it open and it updates by itself as you work. - To change a diagram: call edit_diagram with the exact pieces of HTML to replace. It is much faster than sending the whole document again. Use save_diagram with its id only for a rewrite. If you don't have the current HTML (a new conversation, or someone else may have changed it), read it first with get_diagram, so you never undo someone else's work: it returns an outline of the diagram's text, `find` returns the HTML around a piece of text, and `include_html` returns the whole document when it is small. - Save after every change the user asks for. Don't keep a diagram in a local file: nothing is shared, or safe, until it's saved here. Only write a copy into the user's repo if they ask for one. - To publish: when the user is happy with a draft, ask whether to publish it and tell them who will then see it (the save result says who). Call publish_diagram only after they say yes. Never publish without asking. - 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 diagram: 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. - Choose the kind of diagram that best shows what the user wants to see, from all of them: timeline, Gantt chart, sequence, state machine, tree, data model, comparison, chart, map or floor plan, exploded view, mind map, flowchart, architecture. Don't default to boxes and arrows: a schedule reads best as a Gantt chart, numbers as a chart, the parts of an object as an exploded view. - Put everything inline (CSS, JS, SVG). Scripts from a CDN such as https://cdn.jsdelivr.net work (for example Mermaid: import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs', or a chart library). - Include a . Keep it under 900KB. Draw with inline SVG, HTML/CSS or a library rather than embedded images. - Never put real keys, tokens, passwords, or connection strings in a diagram; use placeholders like <API_KEY>. Diagram refuses to save 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, large enough text, few colors used for meaning; when there are arrows, one direction and a label on each. More in https://diagram.la/docs/drawing. - After saving, look at the screenshot and warnings in the result and check the diagram against what the user asked for; fix it before telling them it's ready. get_screenshot shows the latest version any time. - Every save keeps a version; list_versions and restore_version bring an earlier one back. - Everyone who can see a published diagram's project (its owner, people added to it, and everyone in its org) can save new versions of it and add new diagrams to the project; only the owner moves or deletes, and a draft is published by the owner or by whoever made it. delete_diagram moves a diagram to the owner's archive, where they can restore it. - Making a diagram public (anyone with the link), adding people to a project, and moving a project into an org are done by the user on the Diagram site, never through these tools. When the user asks for any of those, give them the diagram's link (or https://diagram.la/p/<project>/settings) and tell them to change it there. - Group diagrams in a project (a lowercase slug such as "my-app"). save_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. - Orgs share: once published, a diagram in an org's project is visible to everyone in that org. Before you create a project in an org, tell the user who will see what's published there and ask if that's right. If they want it to themselves, use a personal project (a new project slug, no org), or they can make their own org at https://diagram.la/orgs. ## 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. - [Diagram MCP servers compared: Excalidraw, draw.io, Mermaid, Miro, Lucid and more](https://diagram.la/guides/diagram-mcp-server): The MCP servers that let Claude, Cursor, Codex or ChatGPT draw diagrams, side by side: Excalidraw, draw.io, Mermaid, Miro, Lucid, Eraser, Whimsical and Diagram. What each one does, where the diagram ends up, and how you share it. - [AI architecture diagram generator: draw your system from the code](https://diagram.la/guides/architecture-diagram-from-code): Cursor, Claude Code, Codex and GitHub Copilot can read a repo and draw its system architecture: services, data stores, cloud, and system design views. The prompts that work, how to check the result, and how to keep it current at one link. - [Claude artifacts: how to share a diagram at a link (with examples)](https://diagram.la/guides/share-claude-artifacts): How sharing Claude artifacts works now: private by default, who can open a shared one, what changed in September 2026, and how to share a diagram Claude made with people who don’t use Claude. With live examples. - [The best AI diagram tools in 2026, compared honestly](https://diagram.la/guides/best-ai-diagram-tools): Eraser, Napkin, Whimsical, Mermaid Chart, Lucid, Miro, draw.io, Excalidraw, Claude and Diagram: what each AI diagram tool does, its free plan, how sharing works, and which to pick for what. - [Exploded view drawing: what it is, examples, and how to make one](https://diagram.la/guides/exploded-view-drawing): An exploded view drawing (or exploded diagram) shows an object’s parts pulled apart in the order they go together. What it is, real examples, and how to make one step by step, by hand or with AI. - [ER diagram from your database schema, with AI](https://diagram.la/guides/er-diagram-from-database-schema): Have Cursor, Claude Code, Codex or Copilot read your SQL, Prisma or migration files and draw the entity relationship diagram: tables, keys and relationships, saved at a link that updates when the schema changes. - [Sequence diagrams with AI: draw a request from your code](https://diagram.la/guides/sequence-diagram-with-ai): Have Cursor, Claude Code, Codex or Copilot trace a request through your code and draw the sequence diagram: who calls whom, in order, with the error paths. Saved at a link you can share and update. - [C4 model diagrams with AI, drawn from your repo](https://diagram.la/guides/c4-model-diagram-with-ai): Have Cursor, Claude Code, Codex or Copilot read your repo and draw C4 diagrams: the system context, the containers, then the components of one container, each at a link you can share and update. - [AI flowchart generator: turn code or text into a flowchart](https://diagram.la/guides/ai-flowchart-generator): Use ChatGPT, Claude, Cursor or Claude Code as an AI flowchart generator: turn a function, a process or notes into a flowchart with clear decisions, saved at a link you can share and update. - [Mermaid diagrams with AI: have Claude, Cursor or ChatGPT write the Mermaid](https://diagram.la/guides/mermaid-diagrams-with-ai): Have Claude, ChatGPT, Cursor or Claude Code write Mermaid flowcharts, sequence and ER diagrams for you, then see and share them at a link instead of pasting the code into a live editor. ### By tool - [How to make diagrams in Claude Code](https://diagram.la/guides/how-to-make-diagrams-in-claude-code): setup at https://diagram.la/start/claude-code - [How to make diagrams in Codex](https://diagram.la/guides/how-to-make-diagrams-in-codex): setup at https://diagram.la/start/codex - [How to make diagrams in Codex app](https://diagram.la/guides/how-to-make-diagrams-with-ai#codex-app): setup at https://diagram.la/start/codex-app - [How to make diagrams in Gemini CLI](https://diagram.la/guides/how-to-make-diagrams-in-gemini-cli): setup at https://diagram.la/start/gemini - [How to make diagrams in OpenCode](https://diagram.la/guides/how-to-make-diagrams-with-ai#opencode): setup at https://diagram.la/start/opencode - [How to make diagrams in Cursor](https://diagram.la/guides/how-to-make-diagrams-in-cursor): setup at https://diagram.la/start/cursor - [How to make diagrams in GitHub Copilot (VS Code)](https://diagram.la/guides/how-to-make-diagrams-in-github-copilot): setup at https://diagram.la/start/vscode - [How to make diagrams in Windsurf](https://diagram.la/guides/how-to-make-diagrams-with-ai#windsurf): setup at https://diagram.la/start/windsurf - [How to make diagrams in Cline](https://diagram.la/guides/how-to-make-diagrams-with-ai#cline): setup at https://diagram.la/start/cline - [How to make diagrams in Zed](https://diagram.la/guides/how-to-make-diagrams-with-ai#zed): setup at https://diagram.la/start/zed - [How to make diagrams in JetBrains](https://diagram.la/guides/how-to-make-diagrams-with-ai#jetbrains): setup at https://diagram.la/start/jetbrains - [How to make diagrams in Claude app](https://diagram.la/guides/how-to-make-diagrams-in-claude): setup at https://diagram.la/start/claude - [How to make diagrams in ChatGPT](https://diagram.la/guides/how-to-make-diagrams-in-chatgpt): setup at https://diagram.la/start/chatgpt - [How to make diagrams in Le Chat](https://diagram.la/guides/how-to-make-diagrams-with-ai#le-chat): setup at https://diagram.la/start/le-chat - [How to make diagrams in Perplexity](https://diagram.la/guides/how-to-make-diagrams-with-ai#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 draw diagrams for your repo, save them to Diagram at stable links over MCP, and publish them when you say so. - [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): Which kind of diagram fits what you want to show, 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)