Diagram
← All tools

How to make and share diagrams with VS Code + Copilot

VS Code + Copilot (VS Code with GitHub Copilot in Agent mode) can draw architecture diagrams, flowcharts, and sequence diagrams, but on its own they end up as text in the chat or a file only you can open. Connect Diagram once and every diagram VS Code + Copilot makes becomes a link you can share, which stays current as the diagram changes.

Set up VS Code + Copilot, freeHow Diagram works

1. 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 with Google and click Allow.

2. Ask for a diagram

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

VS Code + Copilot draws it, keeps it in your repo’s diagrams/ folder, and gives you a link. You never have to mention Diagram again: it knows to use it.

3. Share the link

Paste it in Slack, a pull request, or a doc. Diagrams start private; add people to the project, share it with your team, or make one public. When it changes, ask VS Code + Copilot to update it: the link stays the same and every version is kept.

Questions

Is Diagram free to use with VS Code + Copilot?
Yes. Diagram is free for 5 projects, and there's nothing to install.
Who can see my diagrams?
Only you, until you share. Add people to a project, share it with your team through an org, or make a single diagram public so anyone with the link can open it.
What happens when the diagram changes?
Ask VS Code + Copilot to update it. The new version lands at the same link, and every earlier version is kept.
Does VS Code + Copilot need an API key?
No. VS Code + Copilot signs in to Diagram with your Google account in the browser.

Diagrams in other tools