Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 78 additions & 0 deletions .github/copilot-instructions.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
# Copilot Instructions for vscode-drawio

## Build & Development

```bash
yarn install # Install dependencies (requires --frozen-lockfile in CI)
yarn build # Full build: extension + plugins + package VSIX
yarn build-extension # Build extension only (webpack production)
yarn dev # Watch mode for extension development
yarn dev-drawio-plugins # Watch mode for custom draw.io plugins
yarn lint # Currently a no-op; CI runs it anyway
```

The extension is packaged as a `.vsix` via `vsce package` (output: `dist/extension.vsix`). There is no test suite.

## Architecture

This is a **VS Code extension** that embeds [Draw.io](https://app.diagrams.net/) in a webview. The draw.io editor itself is included as a **git submodule** at `drawio/` (from `jgraph/drawio`).

### Entry point & bootstrapping

`src/index.ts` → `Extension.ts`. The Extension class wires together:
- **Config** — reactive settings (MobX observables over VS Code's settings API)
- **DrawioClientFactory** — builds webview HTML with the embedded draw.io app
- **DrawioEditorService** — manages open editors, commands, and status bar
- Two **CustomEditorProviders** registered for different file types
- Three **features**: CodeLink, EditDiagramAsText, LiveShare

### Two editor providers

| Provider | File types | Document model |
|---|---|---|
| `DrawioEditorProviderText` | `.drawio`, `.dio`, `.drawio.svg`, `.dio.svg` | VS Code `TextDocument` — two-way XML sync |
| `DrawioEditorProviderBinary` | `.drawio.png`, `.dio.png` | Custom `DrawioBinaryDocument` — in-memory XML, exports to binary on save |

### DrawioClient layer (`src/DrawioClient/`)

Communication with the draw.io iframe uses a JSON message protocol (`DrawioClient.ts`). `CustomizedDrawioClient` extends it with VS Code-specific actions (node selection, cursor tracking, custom vertices). `DrawioClientFactory` assembles the webview HTML, injects config, and uses **MobX autorun** to hot-reload when settings change.

### Features (`src/features/`)

- **CodeLinkFeature** — double-click a `#SymbolName` node to jump to code
- **EditDiagramAsTextFeature** — side-by-side XML editing
- **LiveshareFeature** — VS Live Share cursor/selection sync (subfolder with session model)

## Key Conventions

### MobX reactive state (v5)

The codebase uses **MobX 5** with legacy decorators (`experimentalDecorators: true`):
- `@observable` / `@observable.ref` for reactive properties
- `@computed` for derived state
- `autorun()` for side effects (e.g., regenerate webview HTML on config change)
- Import from `mobx` directly, not from wrapper libraries

### Disposable lifecycle pattern

All services, features, and editors extend or use `Disposable.fn()` from `@hediet/std/disposable`. Resources are registered with `this.track()` or `this._register()` for automatic cleanup. Always dispose subscriptions, autoruns, and event listeners this way.

### Event system

Custom events use `EventEmitter` from `@hediet/std/events`, exposed publicly via `.asEvent()`. This is used throughout for `onEditorOpened`, `onNodeSelected`, `onSave`, etc.

### Formatting

Prettier with **tabs**, trailing commas (`es5`), semicolons. See `.prettierrc.json`.

### Webpack bundling

Two separate webpack configs:
- Root `webpack.config.ts` — bundles the extension (`src/` → `dist/extension/`)
- `drawio-custom-plugins/webpack.config.ts` — bundles custom draw.io plugins (`dist/custom-drawio-plugins/`)

Both use `ts-loader`. The extension externalizes `vscode` and polyfills `path` with `path-browserify`.

### Plugin security

Draw.io plugins loaded from disk are SHA256-fingerprinted. Users must approve each plugin before it runs. See `DrawioClientFactory.ts`.
11 changes: 8 additions & 3 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,23 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [1.10.0]

### Changed

- Updates Draw.io to 29.3.6

## [1.9.0]

### Fixed

- Reverts change to automatically follow VS Code dark/light theme [#457](https://github.com/hediet/vscode-drawio/issues/457)

- Reverts change to automatically follow VS Code dark/light theme [#457](https://github.com/hediet/vscode-drawio/issues/457)

## [1.8.0]

### Fixed

- v1.7.0 breaks themes [#456](https://github.com/hediet/vscode-drawio/issues/456)
- v1.7.0 breaks themes [#456](https://github.com/hediet/vscode-drawio/issues/456)

## [1.7.0]

Expand Down
2 changes: 1 addition & 1 deletion drawio
Submodule drawio updated 997 files
26 changes: 22 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -380,7 +380,7 @@
},
"hediet.vscode-drawio.colorNames": {
"title": "Color Names",
"description": "Names for colors, eg. {‘FFFFFF’: ‘White’, ‘000000’: ‘Black’} that are used as tooltips (uppercase, no leading # for the colour codes)",
"description": "Names for colors, eg. {\u2018FFFFFF\u2019: \u2018White\u2019, \u2018000000\u2019: \u2018Black\u2019} that are used as tooltips (uppercase, no leading # for the colour codes)",
"type": "object"
},
"hediet.vscode-drawio.presetColors": {
Expand Down Expand Up @@ -498,12 +498,30 @@
"docs/**/*",
"drawio/LICENSE",
"drawio/VERSION",
"drawio/src/main/webapp/js/**/*",
"drawio/src/main/webapp/js/PreConfig.js",
"drawio/src/main/webapp/js/PostConfig.js",
"drawio/src/main/webapp/js/app.min.js",
"drawio/src/main/webapp/js/extensions.min.js",
"drawio/src/main/webapp/js/stencils.min.js",
"drawio/src/main/webapp/js/shapes-14-6-5.min.js",
"drawio/src/main/webapp/js/math-print.js",
"drawio/src/main/webapp/js/orgchart.min.js",
"drawio/src/main/webapp/js/viewer-static.min.js",
"drawio/src/main/webapp/js/diagramly/Extensions.js",
"drawio/src/main/webapp/js/diagramly/miro/*.js",
"drawio/src/main/webapp/js/dropbox/*.js",
"drawio/src/main/webapp/js/jquery/*.js",
"drawio/src/main/webapp/js/mermaid/*.js",
"drawio/src/main/webapp/js/onedrive/*.js",
"drawio/src/main/webapp/js/orgchart/*.js",
"drawio/src/main/webapp/js/simplepeer/*.js",
"drawio/src/main/webapp/connect/**/*",
"drawio/src/main/webapp/images/**/*",
"drawio/src/main/webapp/img/**/*",
"drawio/src/main/webapp/math/**/*",
"drawio/src/main/webapp/mxgraph/**/*",
"drawio/src/main/webapp/math4/**/*",
"drawio/src/main/webapp/mxgraph/css/**/*",
"drawio/src/main/webapp/mxgraph/images/**/*",
"drawio/src/main/webapp/mxgraph/mxClient.js",
"drawio/src/main/webapp/plugins/**/*",
"drawio/src/main/webapp/resources/**/*",
"drawio/src/main/webapp/styles/**/*",
Expand Down