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

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/