Create architecture diagrams and flowcharts inside VS Code without switching to a separate tool
Save diagrams as .drawio.svg files and embed them directly in GitHub READMEs as images with no export step
Collaborate on diagrams in real time with a teammate using VS Code Liveshare
Link diagram nodes to code classes so double-clicking a node jumps to the matching code symbol
This is an unofficial extension that brings Draw.io, a free diagramming tool, directly into Visual Studio Code. Draw.io (also called diagrams.net) is a web-based tool many people use to create flowcharts, architecture diagrams, network maps, and other visual layouts. With this extension, you can open and edit those diagrams without leaving your code editor. The extension supports several file formats. The standard format is .drawio, but you can also save diagrams as .drawio.svg or .drawio.png. The clever part is that these files are valid image files at the same time. A .drawio.svg can be dropped directly into a GitHub README and will render as an image, with no separate export step needed. The same applies to .drawio.png. The diagram data is embedded inside the image file itself. A feature called code linking lets you connect diagram nodes to actual code symbols. If you label a node in your diagram with something like #MyClass, double-clicking that node in the editor will jump directly to the matching class in your codebase. This can be useful for keeping architecture diagrams connected to the code they describe. The extension also works with VS Code Liveshare, which is a tool for real-time collaborative editing. Two people can work on the same diagram at the same time, with each person's cursor visible to the other. The README mentions this can serve as a whiteboard for remote code interviews or team brainstorming. Additionally, you can open the same diagram file in two panels side by side: one showing the visual editor and one showing the underlying XML. Both stay in sync, so edits in one view immediately appear in the other. The extension runs Draw.io in an offline mode by default, so it does not require an internet connection.
← hediet on gitmyhub — every repo by this author, as a profile.
Verify against the repo before relying on details.