Can AI make diagrams?

Yes. ChatGPT, Claude, Cursor, and other AI tools can draw flowcharts, architecture diagrams, org charts, timelines, funnels, and more from a description in plain words. They draw the diagram as a web page, so it can use any colors, fonts, and layout, not only boxes and arrows.

Which AI is best for making diagrams?

Use the one you already use. The steps are the same in each: connect Diagram once, then ask. Chat apps like ChatGPT and Claude suit diagrams of ideas, plans, and processes; coding tools like Cursor and Claude Code can read your code, so they suit diagrams of how software works.

Do I need to know Mermaid or any diagram language?

No. You describe what you want and the AI draws it. If you already have Mermaid, D2, or Graphviz, the AI can use that too.

How do I share a diagram an AI made?

With Diagram connected, every diagram is saved at a link. It starts as a draft only you can see; tell your AI to publish it and the people on its project can open it. You can also make one public for anyone with the link.

Can I change the diagram later?

Yes. Ask your AI for the change. It is saved at the same link, and every earlier version is kept.

Your first 5 diagrams are free. After that it's $5/month for as many as you want.

Diagram

Guide

How to make diagrams with AI

You can make a diagram with the AI you already use: ChatGPT, Claude, Cursor, Claude Code, Gemini, and ten more. Describe what you want in plain words, the AI draws it, and Diagram saves it at a link you can share. It’s the same three steps in every tool. This page has the exact steps for each one.

Start free

The three steps

1Connect Diagram to your AIOnce. It takes a minute, and there’s nothing to install. Your tool’s exact steps are below.
2Ask for a diagramSay what it should show: “draw how an order moves through our shop”. The AI draws it and saves it as a draft only you can see, at a link.
3Publish and shareAsk for changes until it’s right; the same link updates. Then tell your AI to publish it, and send the link to your team.

What you can ask for

Not only flowcharts. Each of these is one request in plain words, drawn in its own style. See all fourteen.

Flowchart · Kraft paper

What happens after you order

Show how an order moves.

Architecture · Dracula

How our app works

Explain your system to anyone.

Org chart · Nord

Who does what at a small studio

Teams, roles, who to ask.

How to make diagrams in Claude Code

Claude Code is Anthropic’s coding agent in the terminal. Connected to Diagram, it saves every diagram it draws at a link you can share.

Connect Diagram to Claude Code

Run this in a terminal, in your repo. It connects Diagram and starts Claude Code:

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

Sign in once: When Claude Code starts, type /mcp, pick diagram, and choose Authenticate: sign in to Diagram in the browser tab that opens.

Then ask for a diagram

In Claude Code, then describe what you want. For example:

“Make an architecture diagram of this repo and give me a link I can share.”
“Diagram the deploy pipeline from push to production, using the CI config here.”

Set up Claude Code Full guide to diagrams in Claude Code

How to make diagrams in Codex CLI

Codex CLI is OpenAI’s coding agent in the terminal. Connected to Diagram, it saves every diagram it draws at a link you can share.

Connect Diagram to Codex CLI

Run this in a terminal, in your repo. It connects Diagram and starts Codex CLI:

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."

Sign in once: Codex opens a browser tab as soon as it adds Diagram: sign in to Diagram and click Allow.

Then ask for a diagram

In Codex, then describe what you want. For example:

“Draw how a request flows through this app, from the browser to the database.”
“Make an architecture diagram of this repo and give me a link I can share.”

Set up Codex CLI

How to make diagrams in Codex app

Codex app is OpenAI’s Codex desktop app. Connected to Diagram, it saves every diagram it draws at a link you can share.

Connect Diagram to Codex app

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"

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

Then ask for a diagram

Open your repo in the Codex app and start a new task, then describe what you want. For example:

“Draw how a request flows through this app, from the browser to the database.”
“Make an architecture diagram of this repo and give me a link I can share.”

Set up Codex app

How to make diagrams in Gemini CLI

Gemini CLI is Google’s coding agent in the terminal. Connected to Diagram, it saves every diagram it draws at a link you can share.

Connect Diagram to Gemini CLI

Run this in a terminal, in your repo. It connects Diagram and starts Gemini CLI:

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."

Sign in once: When Gemini first connects, a browser tab opens: sign in to Diagram and click Allow.

Then ask for a diagram

In Gemini CLI, then describe what you want. For example:

“Draw how the services in this repo talk to each other.”
“Diagram what happens when a user signs up, step by step.”

Set up Gemini CLI Full guide to diagrams in Gemini CLI

How to make diagrams in OpenCode

OpenCode is the open-source coding agent for the terminal. Connected to Diagram, it saves every diagram it draws at a link you can share.

Connect Diagram to OpenCode

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
    }
  }
}

Sign in once: Then run opencode mcp auth diagram: a browser tab opens to sign in to Diagram.

Then ask for a diagram

Run opencode in your repo, then describe what you want. For example:

“Draw how a request flows through this app, from the browser to the database.”
“Make an architecture diagram of this repo and give me a link I can share.”

Set up OpenCode

How to make diagrams in Cursor

Cursor is the AI code editor. Connected to Diagram, it saves every diagram it draws at a link you can share.

Connect Diagram to Cursor

Use the one-click Add to Cursor button on the setup page. Or add this to ~/.cursor/mcp.json:

{
  "mcpServers": {
    "diagram": {
      "url": "https://diagram.la/mcp"
    }
  }
}

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

Then ask for a diagram

Open your repo and switch the chat to Agent, then describe what you want. For example:

“Draw how a request flows through this app, from the browser to the database.”
“Diagram the files and functions involved in checkout, and what calls what.”

Set up Cursor Full guide to diagrams in Cursor

How to make diagrams in VS Code + Copilot

VS Code + Copilot is VS Code with GitHub Copilot in Agent mode. Connected to Diagram, it saves every diagram it draws at a link you can share.

Connect Diagram to VS Code + Copilot

Use the one-click 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

Sign in once: When VS Code starts the server, it asks to sign in: allow it, then sign in to Diagram and click Allow.

Then ask for a diagram

Open your repo and switch Copilot Chat to Agent mode, then describe what you want. For example:

“Draw how a request flows through this app, from the browser to the database.”
“Make an architecture diagram of this repo and give me a link I can share.”

Set up VS Code + Copilot

How to make diagrams in Windsurf

Windsurf is the AI code editor from Cognition (formerly Codeium). Connected to Diagram, it saves every diagram it draws at a link you can share.

Connect Diagram to Windsurf

Windsurf connects with an address that has a personal key in it. Sign in to Diagram and the setup page gives you yours, with the exact steps.

Then ask for a diagram

Open your repo in Windsurf and open Cascade, then describe what you want. For example:

“Draw how a request flows through this app, from the browser to the database.”
“Make an architecture diagram of this repo and give me a link I can share.”

Set up Windsurf

How to make diagrams in Cline

Cline is the open-source coding agent for VS Code. Connected to Diagram, it saves every diagram it draws at a link you can share.

Connect Diagram to Cline

Cline connects with an address that has a personal key in it. Sign in to Diagram and the setup page gives you yours, with the exact steps.

Then ask for a diagram

Start a new Cline task in your repo, then describe what you want. For example:

“Draw how a request flows through this app, from the browser to the database.”
“Make an architecture diagram of this repo and give me a link I can share.”

Set up Cline

How to make diagrams in Zed

Zed is the fast editor with a built-in agent. Connected to Diagram, it saves every diagram it draws at a link you can share.

Connect Diagram to Zed

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"
    }
  }
}

Sign in once: The first time, a browser tab opens: sign in to Diagram and click Allow.

Then ask for a diagram

Open your repo in Zed and open the Agent Panel, then describe what you want. For example:

“Draw how a request flows through this app, from the browser to the database.”
“Make an architecture diagram of this repo and give me a link I can share.”

Set up Zed

How to make diagrams in JetBrains

JetBrains is JetBrains IDEs with AI Assistant and Junie. Connected to Diagram, it saves every diagram it draws at a link you can share.

Connect Diagram to JetBrains

JetBrains connects with an address that has a personal key in it. Sign in to Diagram and the setup page gives you yours, with the exact steps.

Then ask for a diagram

Open your repo and open AI Assistant or Junie in agent mode, then describe what you want. For example:

“Draw how a request flows through this app, from the browser to the database.”
“Make an architecture diagram of this repo and give me a link I can share.”

Set up JetBrains

How to make diagrams in Claude app

Claude app is Anthropic’s Claude on the web and desktop. Connected to Diagram, it saves every diagram it draws at a link you can share.

Connect Diagram to Claude app

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

Sign in once: After adding it, click Connect next to Diagram: sign in to Diagram 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.

Then ask for a diagram

In a new chat, click + → Connectors and turn on Diagram, then describe what you want. For example:

“Read this document and draw the process it describes as a diagram I can share.”
“Map the customer journey for our coffee shop: order, bar, pickup, and where people wait.”

Set up Claude app Full guide to diagrams in Claude app

How to make diagrams in ChatGPT

ChatGPT is OpenAI’s ChatGPT. Connected to Diagram, it saves every diagram it draws at a link you can share.

Connect Diagram to ChatGPT

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

Sign in once: ChatGPT then sends you to sign in to Diagram 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.

Then ask for a diagram

In a new chat, pick Developer mode from the + menu and select Diagram (ChatGPT asks you to confirm each publish), then describe what you want. For example:

“Turn these meeting notes into a flowchart of who does what, and give me a link.”
“Draw our sales funnel from these numbers: 480k views, 32k visits, 4,100 signups, 610 buyers.”

Set up ChatGPT Full guide to diagrams in ChatGPT

How to make diagrams in Le Chat

Le Chat is Mistral’s Le Chat. Connected to Diagram, it saves every diagram it draws at a link you can share.

Connect Diagram to Le Chat

In Le Chat: Connectors → + Add Connector → Custom MCP Connector. Name it Diagram, paste this URL, and click Connect:

https://diagram.la/mcp

Sign in once: Le Chat detects the sign-in and opens it: sign in to Diagram and click Allow.

Then ask for a diagram

In a new chat, enable Diagram in the tools menu, then describe what you want. For example:

“Draw a diagram of a typical OAuth login and give me a link.”
“Turn this process into a flowchart I can send to my team.”

Set up Le Chat

How to make diagrams in Perplexity

Perplexity is Perplexity. Connected to Diagram, it saves every diagram it draws at a link you can share.

Connect Diagram to Perplexity

Perplexity connects with an address that has a personal key in it. Sign in to Diagram and the setup page gives you yours, with the exact steps.

Needs Perplexity Pro, Max, or Enterprise.

Then ask for a diagram

Start a new thread with Diagram turned on, then describe what you want. For example:

“Draw a diagram of a typical OAuth login and give me a link.”
“Turn this process into a flowchart I can send to my team.”

Set up Perplexity

Questions

Can AI make diagrams?: Yes. ChatGPT, Claude, Cursor, and other AI tools can draw flowcharts, architecture diagrams, org charts, timelines, funnels, and more from a description in plain words. They draw the diagram as a web page, so it can use any colors, fonts, and layout, not only boxes and arrows.
Which AI is best for making diagrams?: Use the one you already use. The steps are the same in each: connect Diagram once, then ask. Chat apps like ChatGPT and Claude suit diagrams of ideas, plans, and processes; coding tools like Cursor and Claude Code can read your code, so they suit diagrams of how software works.
Do I need to know Mermaid or any diagram language?: No. You describe what you want and the AI draws it. If you already have Mermaid, D2, or Graphviz, the AI can use that too.
How do I share a diagram an AI made?: With Diagram connected, every diagram is saved at a link. It starts as a draft only you can see; tell your AI to publish it and the people on its project can open it. You can also make one public for anyone with the link.
Can I change the diagram later?: Yes. Ask your AI for the change. It is saved at the same link, and every earlier version is kept.
Is it free?: Your first 5 diagrams are free. After that it's $5/month for as many as you want.