Canvas for Copilot

Live, interactive diagrams from your Copilot CLI session — right inside VS Code.

Copilot CLI explains systems in text. Canvas for Copilot adds a second surface: a lightweight canvas that opens as a VS Code tab and stays connected to your CLI session over the Model Context Protocol (MCP Apps). Ask Copilot for a diagram and watch it render as an interactive Cytoscape graph — pan, zoom, click nodes, and drill in. Clicks on the canvas feed back into Copilot as prompts: a bidirectional visual reasoning loop.

Features

• 🎨 Live diagrams from chat — ask Copilot CLI to "diagram the auth flow" and it renders instantly in a canvas tab.
• 🔗 Interactive graph — pan, zoom, select nodes/edges, highlight and filter.
• 🧠 Bidirectional loop — clicking the canvas sends context back to Copilot as a prompt.
• 🧩 Specialised diagram types — dependency/architecture, flowcharts, state machines, UML class, and ER diagrams.
• ⚡ Zero servers to manage — the extension hosts the MCP server in-process on 127.0.0.1 and registers it with Copilot CLI for you.

Requirements

• VS Code 1.90.0 or newer.
• GitHub Copilot CLI available in the integrated terminal.

Getting started

1. Install the extension and reload VS Code.
2. On activation, accept the one-time Set up prompt. This registers the Canvas MCP server with Copilot CLI (writes ~/.copilot/mcp-config.json).
3. Open the integrated terminal, start a Copilot CLI session, and ask for a diagram — e.g. "diagram the auth flow". The canvas opens beside the terminal.

You can also run Canvas for Copilot: Open Canvas from the Command Palette to open the example diagram directly.

How it works

The extension hosts the Canvas MCP server in-process over a local HTTP endpoint (http://127.0.0.1:4123/mcp) and opens the canvas as a webview tab. Copilot CLI, running in the integrated terminal, connects to that endpoint to generate and update diagrams. The server binds to loopback only and is not exposed to the network.

Development

• Press F5 to launch an Extension Development Host from source.
• Package a .vsix:

  npm install
  npm run package        # → ./canvas-for-copilot.vsix
  code --install-extension canvas-for-copilot.vsix
  

  (Bump version in this manifest before re-packaging a new release.)

See the repository docs/SETUP.md for full setup and packaging instructions.

License

MIT © Canvas for Copilot contributors