Boost Your VSCode Workflow with Top Diagramming Extensions

Visual Studio Code (VSCode) is a free, open‑source code editor from Microsoft, released in 2015 and available on Windows, macOS, and Linux. Its extensive marketplace lets users add extensions for language support, formatting, version control, themes, and more.

1. Draw.io Integration

Draw.io (now diagrams.net) is a free, open‑source online diagram tool for flowcharts, network topologies, UML, ER diagrams, etc. The Draw.io Integration extension embeds this capability directly into VSCode, allowing developers to create and edit diagrams without leaving the editor.

Search the marketplace for Draw.io or use the link:

https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

After installing, create a file with the .drawio.png extension and open it in VSCode to start editing.

2. Excalidraw

Excalidraw is an open‑source virtual whiteboard that provides a simple, real‑time collaborative canvas for creating sketches and diagrams. It can be installed as an extension in VSCode.

Marketplace search keyword: Excalidraw

Extension link:

https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor

To use it, create an empty file with one of the following extensions: .excalidraw, .excalidraw.json, .excalidraw.svg, or .excalidraw.png, then open the file in VSCode.

3. tldraw

tldraw is a free, open‑source infinite‑canvas whiteboard that supports real‑time collaboration. The tldraw VSCode extension lets users create and edit tldraw files directly inside the editor.

Search the marketplace for tldraw or use the link:

https://marketplace.visualstudio.com/items?itemName=tldraw-org.tldraw-vscode

To start a new tldraw project, run the command "tldraw: New Project" in VSCode. Existing tldraw files can be opened by loading files with the .tldr extension.