draw io

What is draw io?

draw.io is an open-source vector diagramming application designed to construct, edit, and export complex structural diagrams. Maintained under the Apache-2.0 license, it solves the problem of vendor lock-in and high licensing fees associated with proprietary visual modeling tools. It is used extensively by software engineers, system architects, database administrators, and technical writers who require precise visual representations of logical systems. The application takes visual input in the form of graphical shapes, connector lines, text elements, and custom vector icons. It calculates precise coordinates, grid alignments, and line-routing algorithms to render an interactive vector canvas. The tool exports formatted visual output across multiple file formats, including Scalable Vector Graphics (SVG), Portable Network Graphics (PNG) with embedded source data, vector-based PDF documents, and structured XML schema files (.drawio). First, draw.io provides specialized symbol libraries tailored for industry standards. These include cloud infrastructure icons for Amazon Web Services (AWS), Microsoft Azure, and Google Cloud Platform, alongside complete shape sets for UML 2.5, Entity-Relationship Modeling (ERD), and BPMN 2.0 business processes. Second, the tool features dynamic edge routing that maintains connections between shapes dynamically. When an object moves across the visual grid, the path-finding algorithm calculates orthogonal or curved line segments to preserve visual clarity without overlapping adjacent labels. Third, custom metadata fields can be bound directly to individual shape objects. Users can assign custom key-value attributes (such as IP addresses, cost metrics, or component owners) to any cell, enabling automatic schema parsing and metadata extraction.

How it works

When a visual component is dragged onto the canvas, draw.io instantiates an object within its internal scene graph. The core engine calculates the geometry relative to a user-configurable grid matrix, typically defaulting to 10-pixel increments. Connection paths between objects utilize dynamic pathfinding logic, evaluating bounding box intersections to route edge vectors along optimal paths. Consider a basic scenario: connecting a software application node to a database node. The application node is assigned a unique identifier (such as `id="2"`) along with spatial coordinates (`x="100" y="100" width="120" height="60"`). The connector element stores `source="2"` and `target="3"` references within its metadata attributes. When the renderer executes, it generates standard HTML5 SVG vector directives (`<path d="M 220 130 L 300 130".../>`), displaying visual line segments on the display matrix. The core drawing functionality operates on the `mxGraph` JavaScript visualization engine, an open-source library integrated into the draw.io codebase. Vector rendering utilizes the HTML5 Scalable Vector Graphics (SVG) DOM interface, which allows hardware-accelerated transformation, crisp zooming at any scale, and low-latency interaction without rasterization artifacts. Data storage within draw.io is deterministic and structured. Diagrams are serialized into XML document trees compressed using standard deflate algorithms and encoded into base64 visual strings. When working with local storage or cloud integrations such as GitHub or Google Drive, standard OAuth 2.0 protocols and REST API endpoints manage file serialization directly within the client environment.

How to use it

1. 11. Access the editor interface through your desktop software client or open web window, then select 'Create New Diagram'.
2. 2Select 'Blank Diagram' or pick a standardized template (e.g., 'Class Diagram'), set your file name to 'system_architecture.drawio.png', and click 'Create'.
3. 3Locate the shape navigation pane on the left side of the interface, expand the 'UML' panel, and drag a 'Rectangle' shape onto the main grid canvas at coordinates (100, 200).
4. 4Double-click inside the newly placed shape to edit text, enter 'Auth Service', then press Esc to apply the label.
5. 5Select a second shape from the 'Entity Relation' library, place it at (400, 200), and enter 'PostgreSQL Instance'. Click the blue directional arrow on the 'Auth Service' node and drag it to the 'PostgreSQL Instance' node to create an orthogonal vector connection.
6. 6Export your finished work by clicking 'File > Export as > SVG...', ensuring the 'Embed Diagram' checkbox is selected to preserve editable XML metadata inside the graphic file.
7. 7If you need to verify data validation logic within your architectural endpoints, pair your system visual models with our JSON validator tools to confirm structure compliance before writing deployment scripts.
8. 8A frequent mistake involves importing heavy, high-resolution bitmap PNG screenshots into vector diagrams. This balloons the resulting `.drawio` file size from a light 15 Kilobytes to 20 Megabytes or more, causing rendering latency on multi-page files. To maintain performance, use SVG vector icons or compressed JPEG assets instead.

What it can do

• Utility

Use cases

Assumptions and limitations

Understanding the result

diagrams.net is the leading open-source diagramming tool. Flowcharts, UML, network diagrams, and more.

Tool details

More diagram

References

• jgraph/drawio — GitHub Repository

  Upstream project · GitHub

• Apache-2.0 License

  Upstream project

Frequently asked