VS Code Draw.io — Diagram Editing Inside Your Editor

Introduction

VS Code Draw.io integrates the full Draw.io (diagrams.net) editor into Visual Studio Code, letting you create and edit diagrams without leaving your IDE. Diagrams are stored as editable XML files that live alongside your code and work naturally with version control.

What VS Code Draw.io Does

• Opens .drawio, .drawio.svg, and .drawio.png files in an embedded editor
• Provides the complete Draw.io shape library and editing toolbar
• Saves diagrams as version-control-friendly XML or as exportable SVG/PNG
• Supports live collaboration when paired with VS Code Live Share
• Renders diagram previews in Markdown files

Architecture Overview

The extension embeds the Draw.io editor as a custom VS Code webview. It intercepts file open events for supported extensions, loads the diagram XML into the embedded editor, and writes changes back to the file system on save. SVG and PNG export modes embed the source XML as metadata so files remain editable.

Self-Hosting & Configuration

• Install directly from the VS Code marketplace or from the VSIX file
• Configure default export format (XML, SVG, or PNG) in VS Code settings
• Set a custom Draw.io theme to match your editor color scheme
• Enable or disable the offline mode for air-gapped environments
• Associate additional file extensions with the Draw.io editor

Key Features

• Zero-config setup: install the extension and start diagramming immediately
• Git-friendly XML format enables meaningful diffs and merge conflict resolution
• Dual export as .drawio.svg gives you both an editable source and a renderable image
• Full Draw.io feature set including layers, custom shapes, and connectors
• Works offline with no external service dependency

Comparison with Similar Tools

• Draw.io web app — same editor but requires a browser tab; VS Code integration keeps you in your IDE
• Mermaid — text-based diagrams; Draw.io offers freeform visual editing
• Excalidraw — hand-drawn style; Draw.io provides precise technical diagramming
• PlantUML — code-to-diagram; Draw.io supports drag-and-drop visual layout
• Lucidchart — cloud-based and proprietary; VS Code Draw.io is free and local

FAQ

Q: Are diagrams stored in a proprietary format? A: No. Diagrams use the open Draw.io XML format. SVG and PNG exports embed the XML so they remain editable.

Q: Can I use custom shape libraries? A: Yes. You can import custom Draw.io libraries and they persist across sessions.

Q: Does it work with VS Code on the web? A: The extension works in VS Code Desktop. Web-based VS Code environments may have limited support.

Q: How do I export a diagram as an image? A: Save the file with a .drawio.svg or .drawio.png extension. The extension auto-exports on save.

Sources

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