draw.io: What It Is and How to Get Started with Diagramming

What it is

draw.io is a configurable diagramming and digital whiteboarding application designed for creating flowcharts, system layouts, workflows, and organizational charts. At its technical core, it operates as a client-side JavaScript editor. This means the editing interface executes directly inside the user’s web browser or local desktop environment rather than executing computations on an external host server.

The software is jointly owned and actively maintained by draw.io Ltd (a company previously known as JGraph) and draw.io AG. Operating as an independent, privately held organization rather than a venture-capital-backed startup, the team focuses on software longevity rather than speculative growth targets. Alongside the open codebase, the organization hosts a public web version accessible at app.diagrams.net. According to the project’s official website, draw.io has been trusted for twenty years since its origins in 2005 and has reached over 100 million users across the globe.

A central design principle behind draw.io is a security-first approach to user information. Under this model, the service adopts a “bring your own storage” philosophy. Diagram files are stored wherever the user prefers—whether on a local hard drive or within a linked cloud storage account. The platform creators cannot view, intercept, or store diagram content. Furthermore, beginning a project requires no user account creation, no sign-up forms, and no payment details, preventing vendor lock-in from the outset.

What it can do

draw.io provides a broad set of tools for modeling ideas, workflows, and visual plans on an expansive canvas. Its capabilities span everyday diagramming tasks and structured technical documentation:

• Long-Term File Compatibility: According to the official website, diagrams constructed in 2005 can still be loaded and rendered inside modern editions of the application, ensuring visual assets do not become unusable over time.
• Frictionless Document Sharing: Diagrams use an open structure so that anyone across different operating systems can view and edit draw.io documents without running into licensing conflicts.
• Collaborative Working Modes: According to the official website, draw.io supports real-time collaboration where team members can work together on the same canvas with shared visual cursors. At the same time, the project’s GitHub repository README specifies that real-time collaborative editing is not supported in that specific repository version.
• Multiple Output Formats: Users can export finished work as PNG bitmap images, PDF documents, or Scalable Vector Graphics (SVG). Projects can also remain in an editable format for future modifications.
• Specific Vector Scope: The developers explicitly state in the project documentation that draw.io is intended as a diagramming and whiteboarding platform rather than a general SVG vector editor. Its SVG export function is meant for embedding visuals directly into web pages rather than conducting multi-layered artwork edits in third-party vector applications.
• Extensive Ecosystem Integrations: The editor connects natively into widely used productivity, engineering, and collaboration environments without tedious file imports. Supported platforms include Google Drive, Google Docs, and Google Slides; Microsoft Teams, SharePoint, and OneDrive; Atlassian Jira and Confluence; Notion; a Google Chrome extension; and a dedicated extension for the Visual Studio Code (VS Code) code editor. It also integrates directly with GitHub repositories and Markdown files.
• Developer Embedding: Software developers and technical writers can integrate editable or static diagrams directly into web applications, internal wikis, and documentation pages using standard HTML iframe elements.

How to get started

Getting started with draw.io is straightforward because it offers multiple access points depending on your privacy, technical, and infrastructure requirements:

1. Using the Online Editor: The quickest way to begin is by visiting the hosted deployment at app.diagrams.net or through the official website. Because there is no sign-up requirement or paywall, the drawing canvas opens immediately. From there, you can choose to save your diagram directly to your local computer or connect a personal storage provider such as Google Drive or Microsoft OneDrive.
2. Installing draw.io Desktop: For those who prefer working completely offline or need to comply with strict local data-retention guidelines, a standalone desktop version is available for download at get.diagrams.net.
3. Publishing to GitHub Pages: Users who want their own hosted web instance can fork the official GitHub repository and publish it through GitHub Pages. According to the repository documentation, this delivers a fully functional diagram editor, though it operates without external third-party integrations.
4. Deploying via Docker: System administrators can self-host an isolated instance on internal networks or private servers by pulling the official Docker image provided by the development team.
5. Running Packaged Web Archives: For environments running Java servlet containers, pre-built .war (Web Application Archive) packages can be retrieved directly from the project’s GitHub releases page.

For developers seeking to embed interactive diagrams into web pages or internal documentation portals, the official website provides this standard HTML implementation:

<!-- Embed an editable diagram -->
<iframe src="https://viewer.diagrams.net/? edit=_blank& layers=1& nav=1#Uhttps://..." style="width:100%; height:400px; border:0;">
</iframe>

Community support, troubleshooting questions, and usage discussions are primarily handled through the project’s GitHub Discussions forum and Stack Overflow. Note that the core development team does not accept external pull requests on GitHub, as all code changes are managed internally.

Pricing and requirements

Current pricing tiers, licensing structures, and commercial plan details are subject to change and should be reviewed directly on the draw.io official website.

According to project resources, the underlying application does not impose artificial feature limitations, paywalled capabilities, or enterprise-exclusive upgrades for features like single sign-on (SSO). The core source code published in the project’s repository is made available under the Apache License 2.0, and included third-party JavaScript dependencies strictly use Apache 2.0-compatible terms without relying on copyleft licenses such as GPL or AGPL. The developers make no copyright ownership claims over the diagrams produced by end users.

However, specific licensing and trademark conditions govern the platform’s assets and identity:

• Stencil and Template Restrictions: The included stencil libraries, icon sets, and diagram templates carry clear distribution limits. They—and any derived visual formats, traced reproductions, or AI-generated variations based on them—may not be bundled as software assets or integrated into Atlassian products or Atlassian marketplace applications without explicit written permission. This rule does not restrict end users from utilizing those shapes in exported diagrams or everyday documents.
• Trademark Guidelines: “draw.io” is a registered European Union trademark (#018062448). The team prohibits unauthorized use or alteration of the draw.io name and logo for outside commercial branding, domain registrations, social media profiles, or any context suggesting official sponsorship or endorsement.

Regarding system compatibility, running draw.io inside a web browser requires a modern environment. According to the project’s README, the supported browser versions are:

• Google Chrome version 123 or higher
• Mozilla Firefox version 120 or higher
• Apple Safari version 17.5 or higher
• Opera version 109 or higher
• Microsoft Edge version 123 or higher
• Android WebView version 137 or higher
• Apple iOS Safari version 18.5 or higher

Who it is for

Because draw.io provides a flexible canvas with multiple deployment methods, it serves several distinct audiences:

• Security-Conscious Organizations: Teams with strict regulatory, confidentiality, or data-governance mandates benefit from the client-side architecture where file storage remains entirely within internal drives or sanctioned enterprise cloud drives.
• Software Engineers and Architects: Developers can sketch database schemas, microservice architectures, and system state charts within their existing development flow, leveraging integrations with VS Code, GitHub repositories, and Markdown documents.
• Product Managers and Business Analysts: Professionals organizing user journeys, organizational charts, and process workflows can build diagrams without needing an active subscription or complex onboarding.
• Cross-Functional Workspace Teams: Organizations utilizing Google Workspace (Docs, Slides) or Microsoft 365 (Teams, OneDrive, SharePoint) can embed diagrams into everyday collaboration workflows.
• Students, Educators, and Casual Users: Individuals who need a quick, reliable visual tool without entering a credit card or creating an account can produce diagrams immediately.

Alternatives

• Excalidraw is an open-source visual tool for sketching and diagramming.
• Mermaid is an open-source diagramming and charting tool that renders diagrams from text definitions.

Sources

• https://github.com/jgraph/drawio
• https://www.drawio.com/
• https://github.com/excalidraw/excalidraw
• https://github.com/mermaid-js/mermaid