Repolode
Submit
hediet

hediet/vscode-drawio

An unofficial VS Code extension that lets you create and edit Draw.io (diagrams.net) diagrams directly inside the editor.

View on GitHubWebsite
Stars
9,511
Forks
470
Open issues
171
Last commit
yesterday

What is it?

This extension opens .drawio, .dio, .drawio.svg and .drawio.png files in the Draw.io editor inside VS Code. It ships an offline copy of Draw.io by default, so diagrams can be edited without a network connection. Empty files with these extensions can be opened to start a new diagram, and a convert command switches between formats.

The .drawio.svg and .drawio.png formats are valid images that keep the embedded diagram in sync on save, so they can be shown directly in places like GitHub READMEs. Plain .drawio files are XML, which makes their diffs readable in git and easy for AI assistants to read and edit.

Additional features include multiple Draw.io themes, Live Share support for collaborative editing and presenting, a code link option that jumps from a node labeled with a symbol name to its source, and side-by-side editing of the diagram and its XML.

Key features

  • 01Edits .drawio, .dio, .drawio.svg and .drawio.png files in the Draw.io editor.
  • 02Ships an offline version of Draw.io by default.
  • 03Keeps embedded SVG and PNG images up to date when saving.
  • 04Stores diagrams as plain XML that diffs cleanly in git.
  • 05Supports Live Share for collaborative editing and presenting.
  • 06Links diagram nodes to code symbols for jumping to source.

Use cases

  • Keeping architecture diagrams in the same repository as the code they describe.
  • Embedding diagrams that render directly in GitHub READMEs as SVG files.
  • Reviewing diagram changes in pull requests through readable XML diffs.
  • Sketching diagrams collaboratively with teammates over Live Share.

Quick start

  1. 1

    Install the extension from the VS Code Marketplace

  2. 2

    Create an empty file ending in .drawio, .drawio.svg or .drawio.png and open it

Things to know

  • Unofficial extension, not made by the diagrams.net team.
  • Licensed under GPL-3.0, a copyleft license.
  • Inline Markdown editing requires VS Code Insiders and is experimental.

Topics

#diagram#drawio#vscode-extension#diagramming#svg#whiteboard#hacktoberfest

FAQ

What is vscode-drawio?
An unofficial VS Code extension that lets you create and edit Draw.io (diagrams.net) diagrams directly inside the editor. This extension opens .drawio, .dio, .drawio.svg and .drawio.png files in the Draw.io editor inside VS Code. It ships an offline copy of Draw.io by default, so diagrams can be edited without a network connection. Empty files with these extensions can be opened to start a new diagram, and a convert command switches between formats.
Is vscode-drawio free to use? What license does it have?
vscode-drawio is open source under the GPL-3.0 license. Check the license terms before using it in commercial products.
Is vscode-drawio still maintained?
Actively maintained. The last commit to vscode-drawio was on Nov 6, 2026.
What can I use vscode-drawio for?
Keeping architecture diagrams in the same repository as the code they describe. Embedding diagrams that render directly in GitHub READMEs as SVG files. Reviewing diagram changes in pull requests through readable XML diffs. Sketching diagrams collaboratively with teammates over Live Share.
How do I install vscode-drawio?
Install the extension from the VS Code Marketplace Create an empty file ending in .drawio, .drawio.svg or .drawio.png and open it
Where can I get vscode-drawio?
The source code and installation instructions are on GitHub: https://github.com/hediet/vscode-drawio

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects