Master Diagramming with draw.io: Tips, Tools, and Best Practices

Hello, I'm Su San. Since the launch of my illustration website, many readers have asked which tool I use for the diagrams in my technical articles, so I’m sharing my experience.

Images are the soul of my illustration articles; without them the text feels dry and readers often lose interest. A single well‑designed diagram can convey more information than thousands of words.

Even if you don’t write articles, diagramming helps in work, such as reporting business processes to leadership or documenting code flow for project hand‑over.

Diagramming Tool

“Xiaolin, I love your style—what do you use?”

I’ve been using draw.io for the past two years, creating over 1,000 diagrams. It’s free, saves source files directly to GitHub for cloud backup, and can be used online, as a desktop app, or as a VS Code extension.

The online editor is accessed at https://app.diagrams.net . The interface has three main areas: shape selection, drawing canvas, and property panel.

The left panel offers many shapes, including flowcharts, sequence diagrams, tables, and additional icons like network devices.

The right property panel lets you adjust font size, colors, line styles, etc. I often use light‑colored palettes for better readability.

Basic Shape Introduction

I frequently use rounded rectangle shapes, but the default dark color can be hard to read, so I switch to a lighter shade in the property panel. I also increase the default font size to 16px.

If you dislike the default “scratched” style, you can choose a cleaner rounded rectangle.

This simple shape, combined with colors, can form many structures, such as a CPU cache diagram.

Rectangular shapes are also useful for tables, which I’ve used to compare storage costs across hierarchy levels.

Enabling the Comic style gives a hand‑drawn look, which I used for a TCP three‑way handshake diagram.

Combining rectangles with diamonds lets me create simple flowcharts, such as a direct‑mapped cache update model.

Basic shapes can be assembled into clear, layered diagrams when the concept is well‑structured.

Various Combinations

Beyond simple flowcharts, you can combine shapes and lines to create sequence diagrams, such as illustrating multiple threads acquiring a mutex.

Diagrams also clarify zero‑copy techniques.

You can depict an entire MySQL query execution flow in a single image.

draw.io also provides device icons for network diagrams, such as router addressing.

One of my most complex diagrams illustrated TCP flow control with interaction details and sliding‑window status.

Image Hosting

Free image hosts often become unavailable, causing migration headaches; I eventually paid for an OSS storage with CDN to host my images.

Earlier I wrote about migrating images here .

Mind‑Map Tool

I use XMind, a Chinese mind‑mapping app with clean UI and colorful themes.

XMind’s right‑side panel offers icons like emojis, tags, and progress images, useful for note‑taking.

For occasional mind‑maps, I also use Effie, a writing tool that can generate mind maps from text.

Code‑Screenshot Tool

To showcase code with attractive styling, I use Carbon.

Website: https://carbon.now.sh

Exported images provide clean code snapshots.

Conclusion

In the past two years I’ve drawn 1000+ diagrams, each requiring time and effort, but the visual clarity they bring to articles is invaluable.

Ultimately, drawing helps convey ideas and attract readers; practice by mimicking existing diagrams, then develop your own style tailored to work or article needs.

My frequently used tools:

Diagramming: draw.io

Mind‑mapping: XMind

Code screenshots: Carbon

Writing: Typora, Yuque

If you know other good diagram tools, feel free to share.