Collaborative draw.io diagrams in GitHub Copilot

I want a drawing aid in the GitHub Copilot App that I can use to collaborate with agents. Existing approaches I’ve seen embed a diagram in the chat and use a turn-based approach for iteration. I wanted to use Draw.io because that’s what I already use for diagramming.

What if we used the GitHub Copilot App canvas instead?

The canvas lets you edit the diagram alongside the agent: make minor changes yourself, or ask the agent to help with updates.

How to use

The README has instructions. You can follow them yourself or point your agent to that page:

• Go to Customise -> Add -> Install canvas extensions.
• Install from https://github.com/kewalaka/github-copilot-drawio/tree/main/drawio-canvas.
• Choose user-wide installation so it works across sessions.
• Ask the agent to open the drawio-architecture canvas.

For the last step, I already have a set of skills for diagramming, so I have simply added this to it.

How does it work?

There are three main pieces:

• A Copilot extension registers the canvas and editing actions. It contains drawing guidance for the agent.
• A local bridge running in Copilot’s managed extension process connects to the editor, manages document state, and handles persistence.
• The real draw.io editor provides the UI.

Each session gets a drawing space. At the moment, I use the session folder, but I’m thinking it might make more sense to use the current repository.

The drawing is saved to a drawio.svg file (an SVG with an embedded draw.io diagram). If you have the Draw.io desktop app, you can choose “Open in Draw.io” to continue editing there.

A basic drawing workflow

When the agent makes a change, it follows a simple workflow:

• Read the document and get the current revision in case you’ve made edits.
• Look up suitable local shapes and styles.
• Apply diagram updates in batches so larger drawings can render progressively.

If the agent needs to make substantial changes, including changes that affect your work, it will prompt for confirmation. At the moment, this is an agent instruction, not a formal check.

The editor uses a local instance of Draw.io, so your diagrams are edited and saved locally. When you ask the agent to make a change, relevant drawing information is shared with the model as context.

What’s next

I’ve got some ideas for next steps:

• Store the diagrams in the repository folder instead of the session.
• Provide a UI to switch between diagrams in the current repository.
• Explore alternative harnesses like OpenCode. GitHub Copilot App is one of my primary work tools, so that’s why I started here.

I haven’t tested it much except on my own machine so far.

Where is it?

Check it out here: https://github.com/kewalaka/github-copilot-drawio

PRs, feedback, and issues are welcome! Happy diagramming 😊.