Master Free Online Diagramming with Diagrams (draw.io): A Complete Guide

Introduction

Many readers ask which tool I use to create the clean, eye‑catching diagrams that appear in my articles. The answer is the free online tool

diagrams

, also known as

draw.io

. This guide introduces the tool and shows how to use it effectively.

1. Which tool creates the pictures?

Traditional options like

visio

(paid, Windows‑only) and

process on

(free but limited to nine saved diagrams) are either costly or restrictive.

diagrams

/

draw.io

is a fully featured, free, web‑based solution that I use for all my diagrams.

The tool is accessible at https://app.diagrams.net/ (formerly https://draw.io/ ). An offline version exists, but the online version is my preferred choice.

2. How to open the drawing interface?

Enter the URL in a browser. The first load may be slow while the application initializes. A dialog then asks where to store your diagram; options include OneDrive, Device (local), GitHub, and GitLab. I usually select

Device

for simplicity, though

GitHub

is also viable.

After choosing the storage location, you decide whether to create a new diagram or open an existing one. Selecting “Create New Diagram” opens the main editor.

3. Main components of the editor

The editor consists of several distinct areas:

3.1 Menu bar

File

: New, Open, Save, Export, Print, etc.

Edit

: Undo, Redo, Cut, Copy, Paste, Delete, Find, Replace.

View

: Default layout, Outline, Layers, Grid, Fullscreen.

Arrange

: Bring to Front, Send to Back, Align, Distribute.

Extras

: Themes, Plugins, Configuration.

Help

: Search, Keyboard shortcuts, About.

3.2 Toolbar

The 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, etc.

3.3 Shape library (left panel)

This panel lists the default shape categories (seven groups). Clicking “More Shapes” reveals additional libraries, including iOS‑specific shapes. I often use the “General” category for most flowcharts.

3.4 Canvas (center area)

The canvas is where you drag shapes from the library and arrange them. You can also add a grid for alignment, and right‑click on empty space or on shapes to access context menus.

3.5 Style panel (right side)

The style panel lets you modify fill color, line style, opacity, text font, size, alignment, and more. Applying a style instantly changes the selected shape’s appearance.

3.6 Bottom bar

The bottom bar shows the current page name. Clicking the three‑dot menu lets you add, delete, rename, or reorder pages. Adding many diagrams on separate pages helps keep the workspace organized.

Conclusion

Diagrams (draw.io) is a powerful, free online diagramming tool that offers a comprehensive UI—including menu bar, toolbar, shape library, canvas, style panel, and page controls—to create professional flowcharts and other diagrams. Exploring its features hands‑on is the best way to master it.