Why Every Developer Should Master draw.io for Clear Diagrams

Hello, I’m Su San. Many readers love the illustrations in my technical posts and often ask which tool I use to create them, so today I’ll talk about diagramming.

Images are the soul of my articles; without them the text becomes dull and readers either quit or fall asleep. A single well‑crafted diagram can convey more information than thousands of words.

Even if you don’t write articles, diagrams help in work: a visual workflow speeds up communication with managers, and a code flowchart aids onboarding and presentations.

Diagramming Tool

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

I’ve been using draw.io for the past two years, creating over 1,000 diagrams.

It’s free, stores source files directly on 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 from left to right: shape library, canvas, and property panel.

The left panel offers many shapes—flowcharts, sequence diagrams, tables, and more via “More Shapes”.

The right panel lets you adjust font size, colors, line styles, etc. I usually pick light colors for readability.

Basic Shapes

I often use rounded rectangles. The default dark color can be hard to read, so I switch to a lighter shade in the property panel and increase the font size to 16px.

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

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

Rectangular shapes are also useful for tables, e.g., a cost‑comparison table of storage tiers.

Checking “Comic” in the style options gives a hand‑drawn look, which I used for a TCP three‑way handshake diagram.

Combining rectangles with diamonds creates simple flowcharts, such as a cache‑update model.

Advanced Combinations

By mixing basic shapes and lines you can draw sequence diagrams, e.g., multiple threads acquiring a mutex.

Complex processes like zero‑copy transfers are clearer with diagrams.

A single diagram can also illustrate the MySQL query execution flow.

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

I once diagrammed the entire TCP flow‑control process with sliding‑window details.

Image Hosting

Free image hosts often become unavailable, causing migration headaches. I now host images on my own OSS + CDN.

Mind‑Map Tool

I use XMind for mind maps; it offers many colorful themes and convenient icon libraries.

Code Screenshot Tool

For beautiful code snippets, I use https://carbon.now.sh to generate images.

Exported images provide polished code illustrations.

Conclusion

In the past two years I’ve created over 1000+ diagrams. Drawing takes time, but it makes articles more engaging and helps convey ideas clearly. Practice by copying existing diagrams, then adapt them to your own needs.

Diagram tool: draw.io

Mind‑map tool: XMind

Code screenshot tool: carbon

Writing tools: Typora, Yuque