Edit Diagrams with draw.io

Draw and maintain diagrams without leaving VS Code. This extension embeds the full Draw.io / diagrams.net editor — offline, no browser, no account.

Unofficial version with no affiliation, sponsorship or endorsement in any way from draw.io or diagrams.net.

Fork of hediet/vscode-drawio (GPL-3.0), actively maintained with bug fixes and improvements not yet merged upstream.

Network and privacy

Default behaviour is designed to stay local:

• Offline mode is enabled by default. The bundled editor is used locally.
• The extension performs a version check once every 24 hours against the GitHub releases API to detect new upstream Draw.io versions.
• This check only stores a local timestamp and the last dismissed version in VS Code state.
• The VS Code extension layer does not include telemetry or analytics reporting.

Network access can still occur in these cases:

• If you disable offline mode, the editor loads the configured remote URL, which is https://embed.diagrams.net/ by default.
• If you configure external resources such as custom library URLs, those resources may trigger additional requests.

See PRIVACY.md for the full privacy notice.

Supported formats

Just create an empty file with one of these extensions and open it — the editor starts automatically.

Editing diagram and XML side by side

Click the sheet + arrow icon in the top-right corner of the editor to open the raw XML alongside the visual editor. Both stay synchronized: edits in one reflect instantly in the other.

This makes bulk renaming, find/replace and scripted edits much faster than working in the visual editor alone.

Code Link

Label any node or edge #SymbolName. When Code Link is active (toggle in the status bar), double-clicking that node jumps straight to the matching symbol definition in your source code.

Works with any language that supports VS Code workspace symbol search (TypeScript, Python, C#, Java, …).

Shape libraries

Point the extension at your own shape libraries and they show up next to the built-in ones.

"electropol-fr.drawio-diagrams-editor.libraryFolders": [
    "C:/Diagrams/Shapes",
    "${workspaceFolder}/shapes"
]

Each folder is scanned recursively for .xml files containing <mxlibrary>. Every library found is listed in the More Shapes dialog:

• one category per folder, named after that folder — two folders sharing a name stay separate;
• each library under its file name followed by a ★;
• a checkbox like any other shape set, and the checked state survives a reload;
• a preview panel that draws the actual shapes.

Paths must be absolute; ${workspaceFolder} is supported.

Libraries can also be opened one at a time with File → Open Library From → Device, and saving a library (or any export) goes through the native VS Code save dialog, opening on the first configured library folder.

Display options

Three Draw.io display options are exposed, all off by default:

They are also available as check boxes in the format panel, under Diagram → Options, next to the native ones. Toggling one there applies immediately and writes the corresponding VS Code setting, so the panel and the settings page always agree and the choice survives closing the document.

Themes

Switch themes at any time with the Draw.io: Change Theme command.

Available themes

atlas	Kennedy

min	dark

Commands

The activity bar icon is a shortcut for the first two: one click opens a full editor tab, a second click brings the diagram already open back to the front.

Windows Explorer association

On Windows, the extension offers once to open .drawio and .dio files in VS Code directly from the Explorer, with the Draw.io icon. Everything is written to the current user's registry hive (HKEY_CURRENT_USER\Software\Classes) — no administrator privileges are needed, and nothing is written unless you accept.

If you dismissed the prompt, run Draw.io: Associate .drawio Files With VS Code (Windows) from the command palette.

Associate plain .svg files with the editor

By default only *.drawio.svg files open in this editor. To handle all .svg files, add to settings.json:

"workbench.editorAssociations": {
    "*.svg": "electropol-fr.drawio-diagrams-editor-text"
}

Only Draw.io-generated SVGs can be edited this way — arbitrary SVG files are not supported.

What changed in this fork

• One-click activity bar icon: opens a full Draw.io tab, no dialog, no side panel
• New Draw.io Diagram creates an untitled document — nothing is written to disk until you save
• Open… entry added to the File menu of the Draw.io editor itself
• Optional Windows Explorer association for .drawio / .dio, with the Draw.io icon
• Fully localized interface (🇬🇧 English / 🇫🇷 French), including the settings
• Button to open XML source beside the diagram (no need for View: Reopen Editor With…)
• Shape library folders (libraryFolders), with one More Shapes category per folder and a working preview
• File → Open Library From → Device, Save As… and the Export as submenu all routed through the native VS Code dialogs — exports and library saves actually write a file
• Copy a selection as SVG (pasteable into Word, PowerPoint, Outlook — and still editable back in Draw.io)
• Paste an SVG copied from another application instead of getting a long text label
• Version number shown in the editor menu bar
• SVG export fix
• Three display options (link icons, tooltip icons, connect handle) as settings and as live check boxes in the format panel
• Updated to Draw.io v31.4.2 (libavoid auto-routing, built-in ELK layouts, offline PlantUML rendering)
• Ongoing bug fixes not yet merged in the original project

Draw.io — highlights since 2026

Key features brought by the Draw.io versions bundled in this extension.

Credits

• Frank Sauret — fork maintainer (GitHub)
• Henning Dieterichs — original author (hediet/vscode-drawio)
• Vincent Rouillé — contributor (Speedy37)