You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
My contribution adds a new instruction, prompt, agent, skill, workflow, or canvas extension file in the correct directory.
The file follows the required naming convention.
The content is clearly structured and follows the example format.
I have tested my instructions, prompt, agent, skill, workflow, or canvas extension with GitHub Copilot.
I have run npm start and verified that README.md is up to date.
I am targeting the main branch for this pull request.
Description
Adds Draw, a GitHub Copilot app canvas for drawing simple diagrams. You draw boxes, ellipses, diamonds and databases, join them with arrows that stay attached, and add text or freehand pen strokes. Copilot works on the same drawing through canvas actions, so you can sketch part of a diagram and ask Copilot to finish it, tidy the layout or explain it.
What it does
Drawing tools for shapes, arrows, text and pen strokes. Drag a + handle on a shape to connect it, or click + (or press Tab) to add the next step.
Styling with 8 colors, 3 fills, dashed lines, 4 text sizes, arrow heads, and straight, elbow or curved routes. Grid snapping, zoom, undo and redo, copy and paste.
Several drawings per session, PNG and SVG export, and copy as image.
An Ask Copilot button that sends the drawing to the chat with a question, as an image plus a text outline with element ids.
Follows the Copilot app's theme, or stays light or dark.
Canvas actions for Copilot:get_drawing, set_diagram (nodes and edges with automatic layered layout), add_elements, update_elements, delete_elements, layout, clear, export_image, list_drawings, open_drawing, select_elements and set_theme. Changes from Copilot show up live and can be undone in the canvas.
How it differs from existing resources
diagram-viewer renders diagrams that the agent generates and lets you click nodes to drill down. Draw is an editor: you draw by hand, and you and Copilot change the same drawing.
napkin is a Copilot CLI skill that opens a freehand whiteboard HTML file in the browser and shares a snapshot back. Draw runs as a canvas inside the Copilot app and keeps a structured model (shapes and attached arrows with ids), so Copilot can read and edit a drawing precisely, and changes sync both ways live.
Type of Contribution
New instruction file.
New prompt file.
New agent file.
New plugin.
New skill file.
New agentic workflow.
New canvas extension.
Update to existing instruction, prompt, agent, plugin, skill, workflow, or canvas extension.
Other (please specify):
Additional Notes
Testing
Tested in the GitHub Copilot app on Windows: drawing and editing, Copilot building and changing diagrams through the actions, PNG export, and the app, light and dark themes.
Scripted tests of all 12 actions (including SVG export) and the local server's API, plus headless browser tests of the UI (menus, keyboard navigation, theme switching and export colors).
Ran npm run plugin:validate, npm start, npm run website:build, codespell and eng/pr-risk-scan.mjs locally. All pass.
Not tested on macOS or Linux yet. The only platform-specific code is the Show in folder button after an export.
Security notes
The local HTTP server listens on 127.0.0.1 on a random port, rejects requests with an unexpected Host header, and requires a random per-server token on every API request. The page is served with a content security policy that only allows scripts and connections from the server itself.
No dependencies besides @github/copilot-sdk, which the app provides (so there is no package.json), and no requests to the internet.
child_process.spawn is only used for Show in folder (explorer.exe /select, open -R or xdg-open), and only for files inside the session's drawings folder.
Drawings are JSON files in the session's files/drawings folder. The theme preference is saved in ~/.copilot/draw/settings.json (or under COPILOT_HOME).
.github/plugin/marketplace.json and docs/README.plugins.md were regenerated with npm start.
By submitting this pull request, I confirm that my contribution abides by the Code of Conduct and will be licensed under the MIT License.
Draw is a GitHub Copilot app canvas for simple diagrams: shapes, arrows
that stay attached, text and a freehand pen. The user and Copilot edit the
same drawing. Copilot can create, change, lay out and export it through
canvas actions, and the Ask Copilot button sends the drawing to the chat.
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
The reason will be displayed to describe this comment to others. Learn more.
Copilot review overview
🟡 Changes recommended
Persistence failures, silent element loss, reload behavior, and keyboard and contrast accessibility issues can cause data loss or prevent reliable use.
Get a fresh assessment by requesting another Copilot review.
- Refuse changes that would take a drawing past 5,000 elements with a
clear error instead of silently dropping elements, and stop the canvas
from retrying a refused save.
- Keep collision suffixes within the 48-character id limit.
- Keep a drawing and report the error when deleting its file fails.
- Retry failed drawing writes, and report them in the canvas and in agent
action results instead of only logging them.
- List pen strokes in the get_drawing outline.
- Let Space and Enter work normally on focused buttons.
- Only use Tab to add a step when a shape is selected, so Tab can move
focus out of the canvas.
- Pick readable text colors for accent and danger backgrounds.
- Hide "Bring to front" and "Send to back" when only arrows are selected,
since arrows always draw on top.
- Report theme save failures from /api/settings and set_theme.
- Keep the top bar buttons visible when the status text is long, and
remove leftover theme debug logging.
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Rebuild element-ID map once instead of per element
extensions/draw/lib/layout.mjs:384
This rebuilds the full element-ID map once for every existing element, making add_elements spend O(n²) work before placement. At the supported 5,000-element limit, that means constructing roughly 25 million map entries for one addition. Build the map once and reuse it for every bounds calculation.
Add regression tests for loopback server security and routes
extensions/draw/server.mjs:325
The new loopback server has no committed regression tests, although analogous extension servers are covered (for example, extensions/git-worktree-explorer/server.test.mjs:19-40). Please add the claimed scripted tests for the security-sensitive host/token checks and representative API/static routes so these guarantees remain verifiable in CI.
Give dialog popovers accessible names
extensions/draw/public/ui.js:310
The default role="dialog" containers used by Ask and Help have no accessible name, so screen readers announce only an unnamed dialog. Derive a name from the trigger's aria-label/title (or require callers to pass one) when creating dialog popovers.
- Add node:test suites for the loopback server (Host and token checks,
static file allowlist and CSP, every API route, live events and save
error reporting), the drawing store, layout label references and
solid-fill text contrast. Run them with `node --test` in extensions/draw.
- Give every popover an accessible name. The delete confirmation is now an
alertdialog described by its question.
- Build the id and label lookups in buildFromSpec once, instead of once per
element or per edge.
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
The reason will be displayed to describe this comment to others. Learn more.
Copilot review overview
🟡 Changes recommended
Refused saves can discard local edits during drawing switches, while persistence reporting and large-layout processing also have correctness and reliability issues.
Get a fresh assessment by requesting another Copilot review.
- Switching drawings or asking Copilot no longer goes ahead when the edits
on screen could not be saved first. Draw stays on the drawing and offers
"Discard changes", and a switch started by the agent moves the server back
to the drawing the panel still shows. Deleted drawings never hold the panel.
- Agent actions write the drawing before returning, so a disk problem is
reported by the action that caused it.
- Count edge crossings with a Fenwick tree (O(E log V)) and typed arrays.
The layout is unchanged; the worst case is about three times faster.
- Reconnecting brings back a save error that still applies.
- The selection keeps up to MAX_ELEMENTS ids instead of 1,000.
- Tests for the actions wrapper, the selection limit and crossing counts.
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Bound action results and paginate large drawing outlines
extensions/draw/actions.mjs:181
This always materializes every label in the action result. At the supported limits of 5,000 elements and 4,000 characters per text value, a valid drawing can produce roughly 20 MB of outline before optional raw JSON, exceeding practical model/action payload limits. Bound the total response and expose pagination or a continuation mechanism while preserving a compact list of element IDs.
Avoid embedding the full drawing outline in Ask prompts
extensions/draw/server.mjs:303
The Ask path also embeds the complete drawing outline into one prompt. A valid 5,000-element drawing can contain about 20 million label characters, so session.send can exceed the model/session context limit and make Ask Copilot fail even though the drawing itself is accepted. Use a bounded summary here and direct Copilot to a paginated drawing action for additional details.
- Stop an old save from undoing the last one. Each change the page
sends now has a number, and the server drops one older than a change
it already applied (refused changes do not count). The save sent when
the panel closes also sets every element the change still on its way
touched to what the editor shows, so either arrival order ends with
what is on screen.
- get_drawing reads a big drawing in parts of about 30,000 characters
(start and nextStart), can list only some ids or the selection, cuts
labels longer than 300 characters in the outline, and counts a huge
selection instead of listing it.
- Ask sends at most about 16,000 characters of outline and says how
to read the rest with get_drawing.
- After switching away from a drawing with "Discard changes" while a
save was on its way, send edits made in the new drawing once it
returns.
- Tests for all of the above.
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Client fails to reconcile server-normalized mutations
extensions/draw/public/sync.js:258
The client treats a successful /api/ops response as though the server stored sent byte-for-byte, but DrawingStore.mutate normalizes every element. For example, dragging a resize beyond the model's 5,000px limit (pointer.js:290-297) is clamped on disk while this map keeps the oversized element; because the normal response contains only rev, the canvas reports the divergent value as saved and it changes after reload. Reconcile with the server's authoritative normalized result, or ensure every client mutation is normalized before it is sent.
Style toolbar rerender drops keyboard focus
extensions/draw/public/ui.js:215
Replacing the entire style toolbar removes the currently focused button whenever keyboard activation changes an aria-pressed value. Focus then falls out of the toolbar after one color/fill/size choice, so keyboard users cannot continue through the controls predictably. Preserve the existing nodes or restore focus to the matching data-k/data-v or data-act control after rerendering.
Mutations leave drawing-list metadata stale across panels
extensions/draw/store.mjs:188
Every mutation changes updatedAt and the element count, but it emits only change; the server broadcasts drawing-list metadata only for list events. Panels showing another drawing therefore retain stale counts and ordering (notably, duplication broadcasts the new empty count before copying elements). Emit or coalesce a list-metadata update after mutations so all panels receive current list data.
- Exports stay with the drawing they came from. The agent's export
request names the drawing, the page answers with the id it actually
drew, and the server turns down a mismatch instead of saving the
image under the wrong drawing. Save as PNG and Ask read the id right
before rendering, and Ask keeps the question if another drawing
opens while it is sending.
- When the server tidies up a save, for example by capping a size, it
sends the stored drawing back and the page shows that instead of
assuming it was stored as sent. The tidy-up is not an undo step, so
undo cannot get stuck on it.
- Shapes are capped at 5000 wide or tall everywhere. Growing a shape
for a longer label or a bigger text size caps the height before
centering, so the shape no longer jumps.
- Rebuilding the style bar keeps keyboard focus on the same button,
and hiding it moves focus to the canvas.
- Edits refresh the drawing list, batched so a burst of edits sends it
once, and a copied drawing is listed with its real element count.
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Make drawing elements keyboard and screen-reader accessible
extensions/draw/public/index.html:35
The drawing is exposed as a single static image, and none of its shapes or arrows are focusable or named. The available keyboard commands operate on a selection, but keyboard and screen-reader users have no way to traverse or select one existing element (and shape tools still require a pointer click). Provide a keyboard-accessible element list/tree or focusable canvas elements with names and selection controls; reserve role="img" for a genuinely non-interactive rendering.
Use unique temporary filenames for concurrent exports
extensions/draw/store.mjs:40
The temp name is not unique for concurrent writes to the same export path. Two PNG/SVG exports started in the same millisecond use the same temp file; one rename then removes that path and the other fails with ENOENT. Include a per-call random or monotonic suffix so simultaneous user/agent exports do not collide.
- Ask refuses (409) to send a question when the panel shows another
drawing than the one it is about, and the page keeps the draft. The
context it sends now includes the drawingId.
- Actions on the shown drawing take an optional drawingId. If the canvas
shows a different drawing, they change nothing and say which one it
shows.
- Temp file names for atomic writes include a counter, so two writes of
one file in the same millisecond no longer share a temp file.
- The canvas works from the keyboard and with screen readers: the SVG is
a focusable application with a description, N and Shift+N select
elements, Enter adds shapes and text or connects shapes with the arrow
tool, Ctrl+Shift+Arrow resizes, and a live region reads out the tool,
the selection and each change. Tab now moves focus instead of adding a
step, except while typing a label.
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Preserve default Tab behavior for non-shape label editors
extensions/draw/public/labels.js:85
Tab is consumed for every label editor, but the add-next/add-sibling behavior only runs for shapes. When editing free text or an arrow label, this prevents the documented keyboard focus movement and returns focus to the canvas instead. Only intercept Tab for shape labels; otherwise leave the default Tab action intact so the textarea blur commits the edit and focus advances.
Tab in the label editor now adds the next step only for shape labels.
For free text and arrow labels it keeps its normal job and moves focus
on, and the blur saves the edit. The README and the in-app shortcut list
now say "a shape's label".
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Unspaced label wrapping has quadratic time complexity
extensions/draw/lib/geometry.mjs:44
Breaking an unspaced label measures every growing prefix, making wrapping quadratic in label length. Labels may contain 4,000 characters and an action accepts 500 nodes; a small local check already took about 22 ms for only five maximum-length labels, so one valid action can block the extension event loop for seconds, while opening a maximum-size drawing can be much worse. Split long words with a linear or bounded-search algorithm rather than remeasuring every prefix.
Free-standing arrows ignore selected curved or elbow routes
extensions/draw/lib/geometry.mjs:280
Free-standing arrows never honor the selected curved or elbow route. Because sides is forced to null when neither endpoint is attached, both route branches below fall back to straightEnds, even though the style bar offers these routes for every arrow. Compute sides from the two zero-size endpoint boxes as well so free arrows render with the chosen route.
Pending selections are dropped during dragging or label editing
extensions/draw/public/app.js:91
select_elements is silently ignored whenever the user is dragging or editing a label. The server still records the requested ids and the action reports success, so Copilot can report a selection that the canvas never displays. Keep the latest pending selection (scoped to its drawing) and apply it on the editor's next idle event instead of dropping it.
Ambiguous drawing names can open the wrong document
extensions/draw/store.mjs:159
Name lookup is ambiguous because duplicate display names are allowed (including by repeatedly duplicating one drawing), but this returns the first matching document. Consequently open_drawing or the canvas drawing input can silently open a different copy than intended. Either enforce unique names or detect multiple exact-name matches and require the listed drawing id.
- Label wrapping searches for how many words or characters fit on a
line instead of adding one at a time, so a long label with no spaces
is no longer quadratic. The output is unchanged.
- Arrows attached to nothing follow their elbow or curve route too.
- A selection the agent makes while the user drags or edits a label is
shown once they finish, unless they picked something else meanwhile.
- A drawing name more than one drawing has no longer opens the first
one; the error lists their ids, and an exact id always picks one.
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
- Pen strokes stay bounded while drawing: once a stroke holds 10,000
points it is simplified and thinned to 5,000. A saved stroke keeps an
even spread of its points with both ends, instead of losing its end
past 5,000 points. Simplification runs in pieces of 512 points, so its
time grows in step with the stroke rather than with its square.
- Live updates send the element-level ops that made a change, against
the drawing one change earlier, instead of the whole drawing to every
other panel. A panel that finds a change missing fetches the whole
drawing again.
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Prevent renaming the wrong drawing after canvas switches
extensions/draw/public/menus.js:156
Capture the drawing being renamed instead of reading ui.doc when the edit finishes. An agent can switch this canvas while the rename input is open; handlers.switched updates ui.doc but does not close the rename field, so Enter or blur currently applies the stale text to the newly opened drawing. Cancel the save when the current drawing id no longer matches the one that started the rename.
- The save a page sends as it closes is marked keepalive whenever it fits
the browser's 64 KiB limit. That limit covers all keepalive requests
together, so splitting would not help; a bigger save goes as an
ordinary request.
- Pen strokes keep at most 2,000 points, so even the biggest one fits in
that save. A test checks the biggest stroke and labels against the limit.
- A rename goes to the drawing it was typed for. It is cancelled if the
panel moves to another drawing, it does not undo a rename the agent made
meanwhile, and its reply never moves the panel.
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Style outline omits text color, size, and shape/arrow text size
extensions/draw/actions.mjs:193
This action promises every element's styles, but the outline omits text color and size entirely and also omits shape/arrow text size (lib/layout.mjs:521-532). Copilot therefore cannot inspect or preserve those supported styles unless it separately requests raw elements. Include these fields in the outline format or narrow the contract.
- Turn down a layout that would put a shape or text past the +/-1,000,000
position limit (very long arrow labels spread the layers that far).
Saving used to move such positions back to the limit, stacking shapes on
top of each other while the action reported success. set_diagram and
add_elements now fail with invalid_diagram, and layout with
layout_too_big, and nothing is changed.
- Fetch the drawing each time the event stream connects, not only on
reconnects. A change made after the page loaded the drawing but before
the server registered the new connection was never delivered.
- List text size on shapes, arrows and text, and color on text, in the
get_drawing outline, and say that styles left out are the defaults.
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Optimize hit testing to avoid per-point allocations and stalls
extensions/draw/lib/geometry.mjs:551
This allocates an object for every point of every pen stroke on each hit test, and pointermove calls hitTest continuously. The supported limits permit 2,000 points per stroke and 5,000 elements; even a representative valid 1,000-stroke drawing took 56–75 ms per hit test, so pen-heavy drawings will visibly stall input. Cache bounds or use a spatial index to skip non-candidates, and compute distances directly from the stored coordinate tuples without per-event allocation.
- open_drawing now waits for the canvas to take the drawing. The switch
carries an id, and the page confirms it once it shows the drawing, or,
when it has edits it cannot save yet, moves the panel back with the same
id. A refusal becomes an unsaved_changes error, and no answer within 10
seconds is reported as unconfirmed, with advice to pin drawingId.
- Pen hit testing no longer makes an object for every point on every
pointer move. Stroke extents are cached per points array, strokes out of
reach are skipped by their box, and the rest are measured straight from
the stored pairs.
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
- Automatic layout counts the placeholders its long arrows need before
making any, and turns down a drawing that needs more than 100,000. A
long chain with many arrows across it could otherwise need millions,
which kept the extension busy for most of a minute. layout fails with
layout_too_big, and set_diagram and add_elements with invalid_diagram,
and nothing is changed.
- relayout now returns { elements, error } like buildFromSpec, so the
layout action gets this and the position range check from one place.
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
The reason will be displayed to describe this comment to others. Learn more.
Copilot review overview
🔵 Needs a closer look
The new local server, persistence, synchronization, export, and interactive-editor surface warrants final human validation despite strong focused tests.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
github-actions
Bot
added
canvas-extension
Pull Request Checklist
npm startand verified thatREADME.mdis up to date.mainbranch for this pull request.Description
Adds Draw, a GitHub Copilot app canvas for drawing simple diagrams. You draw boxes, ellipses, diamonds and databases, join them with arrows that stay attached, and add text or freehand pen strokes. Copilot works on the same drawing through canvas actions, so you can sketch part of a diagram and ask Copilot to finish it, tidy the layout or explain it.
What it does
Tab) to add the next step.Canvas actions for Copilot:
get_drawing,set_diagram(nodes and edges with automatic layered layout),add_elements,update_elements,delete_elements,layout,clear,export_image,list_drawings,open_drawing,select_elementsandset_theme. Changes from Copilot show up live and can be undone in the canvas.How it differs from existing resources
diagram-viewerrenders diagrams that the agent generates and lets you click nodes to drill down. Draw is an editor: you draw by hand, and you and Copilot change the same drawing.napkinis a Copilot CLI skill that opens a freehand whiteboard HTML file in the browser and shares a snapshot back. Draw runs as a canvas inside the Copilot app and keeps a structured model (shapes and attached arrows with ids), so Copilot can read and edit a drawing precisely, and changes sync both ways live.Type of Contribution
Additional Notes
Testing
npm run plugin:validate,npm start,npm run website:build, codespell andeng/pr-risk-scan.mjslocally. All pass.Security notes
127.0.0.1on a random port, rejects requests with an unexpectedHostheader, and requires a random per-server token on every API request. The page is served with a content security policy that only allows scripts and connections from the server itself.@github/copilot-sdk, which the app provides (so there is nopackage.json), and no requests to the internet.child_process.spawnis only used for Show in folder (explorer.exe /select,open -Rorxdg-open), and only for files inside the session's drawings folder.files/drawingsfolder. The theme preference is saved in~/.copilot/draw/settings.json(or underCOPILOT_HOME)..github/plugin/marketplace.jsonanddocs/README.plugins.mdwere regenerated withnpm start.By submitting this pull request, I confirm that my contribution abides by the Code of Conduct and will be licensed under the MIT License.