# draw.io — Open-Source Diagram Editor for Every Developer

> draw.io (diagrams.net) is a free, open-source diagramming tool that runs in the browser, on the desktop, or embedded in Confluence and other platforms. It supports flowcharts, UML, network diagrams, ER diagrams, and more with a drag-and-drop interface and extensive shape libraries.

## Install

Save as a script file and run:

# draw.io — Open-Source Diagram Editor for Every Developer

## Quick Use
```bash
# Run draw.io desktop via Docker
docker run -d -p 8080:8080 jgraph/drawio

# Or install the desktop app (macOS)
brew install --cask drawio

# Open a diagram file
drawio my-architecture.drawio
```

## Introduction
draw.io (also known as diagrams.net) is a free, open-source diagramming application built by JGraph. It lets developers create professional diagrams directly in the browser, on the desktop, or embedded inside platforms like Confluence, GitHub, and VS Code — without sending data to external servers.

## What draw.io Does
- Provides a full-featured drag-and-drop diagram editor with hundreds of shape libraries
- Supports flowcharts, UML, ER diagrams, network topology, BPMN, and custom shapes
- Stores files locally, in Google Drive, OneDrive, Dropbox, or any Git repository
- Exports to PNG, SVG, PDF, VSDX, and XML formats
- Integrates with Confluence, Jira, GitHub, GitLab, Notion, and VS Code

## Architecture Overview
draw.io is a client-side JavaScript application backed by the mxGraph library (now bundled as maxGraph). All rendering and editing happen in the browser — no server-side processing of diagram content is required. The optional server component handles OAuth flows and file storage connectors. Diagrams are stored as compressed or uncompressed XML, making them diff-friendly in version control.

## Self-Hosting & Configuration
- Deploy with Docker: `docker run -d -p 8080:8080 jgraph/drawio`
- Configure storage backends via environment variables (local, S3, WebDAV)
- Restrict export formats and external font loading for air-gapped setups
- Enable HTTPS with a reverse proxy (Nginx, Caddy, Traefik)
- Embed in Confluence Server/Data Center via the official plugin

## Key Features
- Fully client-side rendering — diagrams never leave the browser unless you choose cloud storage
- Real-time collaboration when connected to Google Drive or OneDrive
- Scratchpad and custom shape libraries for reusable components
- Dark mode, grid snapping, auto-layout, and keyboard shortcuts
- Extensive import support including Visio (VSDX), Gliffy, and Lucidchart

## Comparison with Similar Tools
- **Excalidraw** — hand-drawn aesthetic, great for quick sketches; draw.io offers more formal diagram types and shape libraries
- **Mermaid** — text-to-diagram for docs-as-code; draw.io provides a visual editor with richer layout control
- **Lucidchart** — polished SaaS product; draw.io is fully free and self-hostable
- **PlantUML** — code-driven UML generation; draw.io covers broader diagram types with a GUI

## FAQ
**Q: Is draw.io truly free for commercial use?**
A: Yes. draw.io is licensed under Apache 2.0 and free for any use, including commercial.

**Q: Can I version-control draw.io diagrams in Git?**
A: Yes. Save as uncompressed XML (.drawio) and diffs are human-readable.

**Q: Does it work offline?**
A: The desktop app (Electron) works fully offline. The browser version can also work offline once cached.

**Q: How do I embed draw.io in a wiki or docs site?**
A: Use the Confluence plugin, the VS Code extension, or embed the editor via an iframe with URL parameters.

## Sources
- https://github.com/jgraph/drawio
- https://www.drawio.com/doc/

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