If you want an integrated solution and avoid multiple external tools (like Visio, PowerPoint, etc.) to create diagrams, here is a very helpful extension.
This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.
Start on your desktop
- Open Draw.io Integration in the VS Code Marketplace and review/install the extension in desktop VS Code.
- Create an empty
architecture.drawiofile in your project, open it and add two labelled shapes with a connector. - Save, close and reopen the file. Confirm the shapes remain editable, then review and version the file with your code.
On a phone, bookmark the extension link for your workstation; installation is not a mobile browser task. No tested extension version or execution date is recorded here.
Choose a format
| Format | Choose when | Check |
|---|---|---|
.drawio | The editable source is the primary deliverable | Export a separate image when needed |
.drawio.svg | You want a vector preview plus embedded editable source | Reopen after other tools process it; optimisation can remove embedded metadata |
.drawio.png | A raster preview is needed by the destination | Image dimensions affect readability; preserve embedded source metadata |
To create a new diagram, just create an empty *.drawio, *.drawio.svg, or *.drawio.png file and open it.
.drawio.svgfiles are valid.svgfiles that can be embedded in GitHub readme files - no export needed..drawio.pngfiles are valid.pngfiles - no export needed.
You should use .svg whenever possible. It's very practical when you make updates without re-importing everything - just make the change and that's all.
Download is available here: Draw.io Integration - Visual Studio Marketplace
Here is the demo:
The three numbered steps above are the text alternative to the animation. For reusable source examples, use the extension repository's documentation and examples ; for cloud symbols, browse the site's icon gallery. Check each asset's source terms rather than assuming a blanket licence.