An unofficial VS Code extension that integrates the Draw.io diagram editor directly into your IDE.
hediet/vscode-drawio is an unofficial Visual Studio Code extension that integrates the Draw.io (diagrams.net) diagram editor directly into the IDE. It allows developers to create, edit, and manage diagrams in formats like .drawio, .drawio.svg, and .drawio.png without leaving their coding environment. The extension solves the problem of context switching by embedding a full-featured diagram tool within VS Code.
Developers, technical writers, and teams who use VS Code and need to create or maintain diagrams, flowcharts, or architecture visualizations as part of their workflow.
Developers choose this extension because it eliminates the need for external diagram tools, supports collaborative editing via Live Share, and enables deep integration like linking diagram nodes to source code symbols, all while working offline by default.
This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Directly edits .drawio, .drawio.svg, and .drawio.png files in VS Code, with SVG and PNG variants being valid image files for embedding without export, as shown in the demo GIFs.
Uses a bundled offline version of Draw.io by default, ensuring diagram editing is always available without an internet connection, as stated in the features.
Integrates with VS Code Live Share for real-time collaborative editing with cursor visibility, ideal for remote brainstorming or code interviews, demonstrated in the Liveshare demo GIF.
Enables double-clicking nodes labeled with # to jump to corresponding source code symbols in the workspace, enhancing documentation and navigation, though it requires at least one project file to be open.
Cannot edit standard SVG files; only works with those created by Draw.io, requiring manual settings.json changes for association, as cautioned in the README.
Simultaneous modifications during Live Share sessions can cause conflicts because the extension syncs diagrams via text documents without deep understanding, as noted internally.
Tied strictly to Visual Studio Code, making it unsuitable for developers using other editors or environments, limiting its adoption in diverse toolchains.