Mastering Diagrams (draw.io): A Complete Guide to Free Online Diagramming

Introduction

Many readers ask which tool I use to create the clean, colorful diagrams in my articles. The answer is Diagrams, also known as draw.io, a free online diagramming platform that I use for most of my illustrations.

1. Which tool to use?

Traditional options like visio (a paid Microsoft desktop application) and process on (a free online tool with limited free saves) exist, but both have drawbacks. The free, powerful alternative is diagrams ( draw.io).

2. How to open the editor

Enter the URL https://draw.io/ in a browser. The first load may be slow due to initialization. After loading, a dialog asks where to store your diagram; options include OneDrive, Device, GitHub, and GitLab. I usually choose Device for local storage, though GitHub is also a good choice.

Next, choose “Create New Diagram” and you will see the main editing canvas.

3. Main components of the editor

The Diagrams workspace consists of several key areas:

3.1 Menu Bar

File

: New, open, save, export, print, etc. Edit: Undo, redo, cut, copy, paste, find, replace, etc. View: Reset layout, outline, layers, grid, fullscreen, etc. Arrange: Bring forward, send backward, align, etc. Extras: Themes, plugins, configuration, etc. Help: Search, shortcuts, about.

3.2 Toolbar

Provides quick access to actions such as zoom, undo/redo, delete, bring forward/backward, background color, font color, connectors, shadows, tables, shapes, fullscreen, expand/collapse, and more.

3.3 Shape Library (left panel)

The default library offers seven shape categories. Click “More Shapes” to load additional sets, such as iOS or General shapes, depending on your needs.

3.4 Canvas (center area)

This is where you drag shapes from the library to create your diagram. You can also copy existing shapes directly on the canvas. Right‑clicking the blank canvas shows options like adding a grid.

3.5 Style Panel (right side)

The style panel lets you customize the appearance of selected shapes—changing fill, line, shadow, and text styles. Adjusting these settings instantly updates the diagram.

3.6 Bottom Bar

The bottom bar displays page names. You can add, delete, rename, or reorder pages using the three‑dot menu or the plus button.

Conclusion

Diagrams (draw.io) is a free, feature‑rich online diagramming tool that includes a menu bar, toolbar, shape library, canvas, style panel, and page navigation. While this guide only scratches the surface, exploring the interface further will reveal its full power for creating professional diagrams.