draw.io — Free Browser-Based Diagramming and Whiteboard Tool

Introduction

draw.io (also known as diagrams.net) is a free, open-source diagramming tool that runs entirely in the browser with no server-side processing. Developers use it for architecture diagrams, flowcharts, UML, ERDs, and network topologies. It integrates natively with GitHub, GitLab, Google Drive, and Confluence, making it a zero-friction choice for teams.

What draw.io Does

• Creates flowcharts, UML diagrams, network maps, and ERDs with drag-and-drop
• Stores diagrams in XML format for version control alongside code
• Integrates with GitHub, GitLab, Google Drive, OneDrive, and Confluence
• Exports to PNG, SVG, PDF, VSDX, and other formats
• Supports real-time collaboration when used with cloud storage

Architecture Overview

draw.io is a client-side JavaScript application built on the mxGraph library. All rendering and editing happens in the browser using SVG and HTML5 Canvas. Diagram data is stored as XML, which can be embedded in PNG metadata or committed directly to Git repositories. No data passes through draw.io servers when using local storage or direct cloud integrations.

Self-Hosting & Configuration

• Use the hosted version at app.diagrams.net with no installation
• Self-host by serving the static files from the GitHub repository
• Deploy as a Docker container for internal team access
• Install the VS Code extension for in-editor diagram editing
• Configure custom shape libraries and templates for your team

Key Features

• Completely free with no feature gating or user limits
• Client-side processing ensures diagrams never leave your browser
• Native integrations with GitHub, Confluence, and Google Workspace
• Extensive shape libraries for AWS, Azure, GCP, Kubernetes, and UML
• VS Code extension for editing diagrams alongside code

Comparison with Similar Tools

• Excalidraw — hand-drawn style whiteboard; draw.io is more structured and feature-rich
• Lucidchart — polished commercial tool with collaboration; requires subscription
• Mermaid — text-to-diagram for Markdown; draw.io offers visual drag-and-drop editing
• PlantUML — code-based UML generation; less visual, more version-control friendly
• Figma — design tool with diagramming capabilities; heavier and design-focused

FAQ

Q: Is draw.io really free? A: Yes. The core editor is completely free and open source. Revenue comes from Confluence and Jira integrations sold by the parent company.

Q: Can I use draw.io offline? A: Yes. The desktop application (draw.io Desktop) works fully offline and stores files locally.

Q: How do I version-control diagrams? A: Save diagrams as .drawio XML files in your Git repository. The VS Code extension lets you edit them in place.

Q: Does draw.io support real-time collaboration? A: Real-time co-editing is available when diagrams are stored in Google Drive or Confluence.

Sources

• https://github.com/jgraph/drawio
• https://www.diagrams.net/