How to draw a diagram

  |   Source

I am not a designer. I draw diagrams to understand and to describe technical content. And what follows is my personal practical guide to drawing. Use with care.

Fix palette

When you start using a generic tool, the main problem you usually face is that there is just too much choice. It is extremely easy to get lost in thousands of questions like: which color should I choose for the background, #f0f3f1 or #f0f3f2?

So the first thing you should do is to limit the choice to a safe minimum.

Palette is a small set of basic elements. It saves your time, as you don't need to carefully choose and design each new element. And it saves your readers as, let's face it, the more you design the crazier it looks.

In the ideal world palette is given to you by your company or project. It is based on project brand colors and style and so on.

In reality there is no such thing, and when there is, it is typically unusable, so you better create your own.

The minimalist palette is a simple SVG-file with a text object, a box and an arrow. You copy-paste required amount of elements to your document and that's it.

Note though, that palette is not a clipart-like library of objects, it is more like CSS - collection of object styles and properties. The text object in a palette is in fact an easy-to-use container to hold font type and font size values. Thus I prefer thinking of a palette by properties it holds rather than objects it contains.

My starting set usually includes:

  • colors: background, foreground, box background and accent;
  • fonts: one type, one or two sizes;
  • shapes: ellipse, rectangle and arrow.

You don't have to start with the same list and you can extend the list when required. But keep an eye on it and don't introduce new shapes, colors and font styles unless there is a clear reason to do so.

Place all labels first

While this might look strange (every diagram starts with a box, doesn't it?) in fact labels are the most important part of the diagram. They define its content and layout. And as a pure text content, they are easy to create and modify. Remember, we have one fixed font and one size, so there is no need to choose or design anything yet.

Labels make the best candidate for initial brainstorming/sketching: simply put all of them on the canvas as for a mindmap, and then add, remove, align and rearrange until structure appears.

Then apply Object -> Align and Distribute to make the structure visible.

Create shapes

As labels are already set and arranged, shapes now do not serve as building blocks of a diagram. Instead consider shapes as a marker tool which highlight objects and their features on top of already existing structure.

  • use Object -> Lower to put shape under label;
  • use Object -> Align and Distribute to center shape relative to its label;
  • use Palette and Color Picker tool to add colors.

Add arrows

Postpone arrows to the very last moment.

This rule originally comes from the limitations of Inkscape. As a generic drawing tool it has no extended support for diagrams, which means there is no good way to move an object together with its connections (arrows).

If you add arrows and then realize you need to change part of the diagram, it is often easier to remove them altogether and re-add later, than change them one by one.

While some consider this as a showstoper, I would say this is a part of the process. I have never seen autogenerated connections which do not require manual adjustments anyway. And added too early, they become an obstacle even when automatically redrawn.

So to get clean and nice-looking diagram leave adding arrows for a finishing touch.

The end

The final goal of this process is to get simple but functional diagram, which doesn't require a lot of skill but gets to the point. And here is the example, how it might look: