Overview
Draw.io (now branded as diagrams.net) is a free, open-source diagramming tool that runs in the browser or as a desktop application. It supports creating flowcharts, network diagrams, UML diagrams, org charts, mind maps, floor plans, and virtually any kind of visual diagram. Diagrams are saved as editable XML files that can be stored locally or in cloud services.
Draw.io integrates with Google Drive, OneDrive, Dropbox, GitHub, GitLab, Confluence, and Jira. The desktop version works offline on Windows, macOS, and Linux. The tool provides hundreds of shape libraries, custom styling, layers, and export to PNG, SVG, PDF, and other formats.
Installation
# macOS via Homebrew
brew install --cask drawio
# Linux via Snap
sudo snap install drawio
# Linux via Flatpak
flatpak install flathub com.jgraph.drawio.desktop
# Linux via deb package
wget https://github.com/jgraph/drawio-desktop/releases/latest/download/drawio-amd64.deb
sudo dpkg -i drawio-amd64.deb
# Windows via Chocolatey
choco install drawio
# Windows via winget
winget install JGraph.Draw
Web Version
Access at https://app.diagrams.net with no installation required.
Keyboard Shortcuts
| Shortcut | Action |
|---|
Ctrl+S | Save diagram |
Ctrl+Z | Undo |
Ctrl+Shift+Z | Redo |
Ctrl+A | Select all |
Ctrl+D | Duplicate selected |
Ctrl+G | Group selected shapes |
Ctrl+Shift+U | Ungroup |
Ctrl+Shift+F | Toggle format panel |
Ctrl+Shift+X | Insert/Edit XML |
Ctrl+F | Find/Replace |
Ctrl+E | Export as image |
Delete | Delete selected |
F2 | Edit selected cell label |
Ctrl+K | Insert link |
Ctrl++ / Ctrl+- | Zoom in / out |
Ctrl+Shift+H | Fit page |
Shape Libraries
| Library | Contents |
|---|
| General | Basic shapes, arrows, callouts |
| UML | Class, sequence, activity shapes |
| Network | Routers, switches, servers, cloud |
| AWS | Amazon Web Services architecture icons |
| Azure | Microsoft Azure service icons |
| GCP | Google Cloud Platform icons |
| Kubernetes | K8s pods, services, deployments |
| Flowchart | Standard flowchart symbols |
| Mockups | Wireframe and UI mockup elements |
| Floor Plans | Furniture, walls, doors, fixtures |
Core Operations
| Action | Method |
|---|
| Add shape | Drag from shape panel to canvas |
| Add text | Double-click on canvas |
| Connect shapes | Hover over shape then drag blue arrow |
| Clone and connect | Alt+Shift+drag from a shape |
| Add waypoints | Right-click connection then Add Waypoint |
Connection Styles
| Style | Description |
|---|
| Straight | Direct line between shapes |
| Curved | Bezier curve connections |
| Orthogonal | Right-angle connectors (default) |
| Entity Relation | ER-style with midpoint routing |
Layers
| Action | How To |
|---|
| Add layer | Edit then Layers then Add Layer |
| Switch layer | Click layer name in layers panel |
| Lock layer | Click lock icon next to layer |
| Hide layer | Click eye icon next to layer |
| Move to layer | Right-click shape then Move to Layer |
Export Options
| Format | Usage |
|---|
.drawio | Native editable XML format |
.png | Raster image (configurable DPI) |
.svg | Scalable vector graphics |
.pdf | Print-ready document |
.html | Embeddable interactive viewer |
.vsdx | Visio compatible format |
Configuration
URL Parameters (Web Version)
| Parameter | Description |
|---|
?lightbox=1 | View-only mode |
?edit=_blank | Allow editing in new tab |
?layers=1 | Show layers panel |
?dark=1 | Dark mode |
?grid=0 | Hide grid |
Embedding in HTML
<div class="mxgraph" style="max-width:100%;"
data-mxgraph='{"highlight":"#0000ff","nav":true,"resize":true,"url":"diagram.drawio"}'>
</div>
<script type="text/javascript"
src="https://viewer.diagrams.net/js/viewer-static.min.js">
</script>
Advanced Usage
Templates
File then New then From Template to choose from categories including Basic, Business, Engineering, Network, Software, and more.
Confluence Integration
Install the draw.io app from Atlassian Marketplace to insert diagrams directly in Confluence pages with version history tracked through Confluence.
GitHub Integration
Store .drawio files in your repository. GitHub renders a preview of .drawio.svg files. Use GitHub Actions to auto-export diagrams on commit.
VS Code Extension
Extension ID: hediet.vscode-drawio
Allows editing .drawio files directly in VS Code
Troubleshooting
| Issue | Solution |
|---|
| Shapes not aligning | Enable snap to grid: View then Grid |
| Connection won’t attach | Zoom in; ensure hovering over blue connection point |
| File too large | Reduce image quality; use SVG shapes instead of embedded images |
| Fonts different on export | Use web-safe fonts or embed fonts in SVG export |
| Lost work | Check File then Open Recent; look for auto-saved backups |
| Slow with many shapes | Use layers to hide inactive parts |
| Import from Visio failing | Ensure .vsdx format (not legacy .vsd) |
| SVG export missing fonts | Enable include a copy of the diagram in export settings |
