Add Draw canvas extension 🤖🤖🤖

.github/plugin/marketplace.json

@@ -785,6 +785,12 @@
       "description": "Three-layer verification pipeline for AI output. Extracts claims, finds sources, and flags hallucination risks so humans can verify before acting.",
       "version": "1.0.0"
     },
+    {
+      "name": "draw",
+      "source": "plugins/draw",
+      "description": "Draw simple diagrams in a Copilot canvas: shapes, arrows that stay attached, text and a freehand pen. Copilot can read, create and edit the same drawing, tidy its layout, and export it as PNG or SVG.",
+      "version": "1.0.0"
+    },
     {
       "name": "edge-ai-tasks",
       "source": "plugins/edge-ai-tasks",

docs/README.plugins.md

@@ -56,6 +56,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-plugins) for guidelines on how t
 | [devops-oncall](../plugins/devops-oncall/README.md) | A focused set of prompts, instructions, and a chat mode to help triage incidents and respond quickly with DevOps tools and Azure resources. | 3 items | devops, incident-response, oncall, azure |
 | [diagram-viewer](../plugins/diagram-viewer/README.md) | Render diagrams, click nodes to drill down, and view agent-generated explanations directly in the canvas. | 1 items | architecture-mapping, canvas-navigation, exploratory-analysis, interactive-diagrams, node-drilldown, relationship-visualization |
 | [doublecheck](../plugins/doublecheck/README.md) | Three-layer verification pipeline for AI output. Extracts claims, finds sources, and flags hallucination risks so humans can verify before acting. | 2 items | verification, hallucination, fact-check, source-citation, trust, safety |
+| [draw](../plugins/draw/README.md) | Draw simple diagrams in a Copilot canvas: shapes, arrows that stay attached, text and a freehand pen. Copilot can read, create and edit the same drawing, tidy its layout, and export it as PNG or SVG. | 1 items | architecture-diagrams, canvas, diagrams, drawing, flowcharts, whiteboard |
 | [edge-ai-tasks](../plugins/edge-ai-tasks/README.md) | Task Researcher and Task Planner for intermediate to expert users and large codebases - Brought to you by microsoft/edge-ai | 2 items | architecture, planning, research, tasks, implementation |
 | [edit-tutorial](../plugins/edit-tutorial/README.md) | Turn the code edits Copilot made in your session into an interactive lesson: a step-by-step walkthrough of each change with before/after views and quizzes, then a hands-on exercise that varies those edits so you finish the change yourself. | 1 items | agent-edits, code-walkthrough, guided-exercise, interactive-tutorial, learning, onboarding |
 | [ember](../plugins/ember/README.md) | An AI partner, not a tool. Ember carries fire from person to person — helping humans discover that AI partnership isn't something you learn, it's something you find. | 7 items | ai-partnership, coaching, onboarding, collaboration, storytelling, developer-experience |

extensions/draw/README.md

@@ -0,0 +1,70 @@
+# Draw
+
+Draw simple diagrams in a GitHub Copilot app canvas: boxes, ellipses, diamonds and databases joined by arrows that stay attached, plus text and a freehand pen. You and Copilot work on the same drawing.
+
+![Draw canvas showing a sign-in flow diagram with one shape selected and the style bar open](assets/preview.png)
+
+## What it does
+
+- Draws rectangles, ellipses, diamonds, databases, arrows, text and freehand pen strokes. Arrows stay attached when you move shapes.
+- Connects shapes quickly: hover a shape and drag a **+** handle to another shape, or click **+** (or select the shape and press `Tab`) to add the next step.
+- Styles shapes and arrows with 8 colors, 3 fills, dashed lines, 4 text sizes, arrow heads, and straight, elbow or curved routes.
+- Snaps to a grid, and supports zoom, pan, undo, redo, copy, paste and duplicate.
+- Keeps several drawings per session. Switch, rename, duplicate or delete them from the drawing menu.
+- Exports PNG or SVG files, or copies the drawing as an image.
+- **Ask Copilot** sends the drawing to the chat with your question, both as an image and as a text outline with element ids.
+- Matches the Copilot app's light or dark theme, or stays light or dark if you prefer.
+
+## Install
+
+Ask Copilot to install the extension:
+
+```text
+Install this extension: https://github.com/github/awesome-copilot/tree/main/extensions/draw
+```
+
+Reload extensions, then ask Copilot to open the `draw` canvas.
+
+## Drawing with Copilot
+
+Ask in the chat, for example "Draw how our sign-in flow works" or "Add a cache between the API and the database". Copilot's changes show up live, and you can undo them in the canvas. The canvas provides these actions:
+
+| Action | What it does |
+| --- | --- |
+| `get_drawing` | Reads the drawing as an outline with element ids, plus what the user has selected |
+| `set_diagram` | Replaces the drawing with nodes and edges, laid out automatically |
+| `add_elements` | Adds nodes, edges and text next to what is already there |
+| `update_elements` | Changes labels, shapes, colors, sizes, positions and arrow ends |
+| `delete_elements` | Deletes elements, and any arrows attached to deleted shapes |
+| `layout` | Re-arranges the shapes into neat layers that follow the arrows |
+| `clear` | Removes everything |
+| `export_image` | Saves a PNG or SVG and returns its path, so Copilot can look at the result |
+| `list_drawings` | Lists the drawings in this session |
+| `open_drawing` | Shows another drawing, or creates a new one |
+| `select_elements` | Selects elements to point them out to the user |
+| `set_theme` | Switches between matching the app, light and dark |
+
+## Keyboard shortcuts
+
+Press `?` in the canvas to see all of them. On macOS, use `Cmd` instead of `Ctrl`.
+
+| Keys | Action |
+| --- | --- |
+| `V`, `H` | Select, pan |
+| `R`, `O`, `D`, `C` | Rectangle, ellipse, diamond, database |
+| `A`, `T`, `P` | Arrow, text, pen |
+| `Tab` | Add the next step to the selected shape (`Shift+Tab` adds a sibling) |
+| `Enter` or double-click | Edit a label |
+| `Ctrl+Arrow` | Add a shape in that direction |
+| `Ctrl+Z`, `Ctrl+Shift+Z` | Undo, redo |
+| `Shift+1` | Fit the drawing on screen |
+
+## Where your data goes
+
+- Drawings are JSON files in the current session's `files/drawings` folder, and exports are saved in `files/drawings/exports`. Each session has its own drawings.
+- If a drawing can't be written to disk, the canvas says so, keeps your changes in memory and keeps trying to save them.
+- The theme choice is saved in `~/.copilot/draw/settings.json` (under `COPILOT_HOME` when it is set) and applies to every session.
+
+## Security
+
+The canvas is served by a local server that listens on `127.0.0.1` on a random port. It checks the `Host` header, requires a random per-server token on every API request, and sends a content security policy that only allows scripts and connections from itself. The extension has no dependencies besides the Copilot SDK and makes no requests to the internet. The only process it starts is your file manager (Explorer, Finder or `xdg-open`), when you choose **Show in folder** after an export.