# VS Code Draw.io — Diagram Editing Inside Your Editor

> An unofficial VS Code extension that integrates the full Draw.io diagramming editor directly into Visual Studio Code for seamless architecture and flowchart creation.

## Install

Save as a script file and run:

# VS Code Draw.io — Diagram Editing Inside Your Editor

## Quick Use
```bash
# Install from VS Code marketplace
code --install-extension hediet.vscode-drawio
# Create a new diagram
touch architecture.drawio
code architecture.drawio
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-a12657de
Author: Script Depot