10 Tips For Creating Good Looking Diagrams Using Inkscape

After multiple attempts to find a good free diagraming application I think I have found a decent solution. I'm not creating enough diagrams to justify buying something expensive and I don't feel like finding a graphics designer to make Dia diagrams prettier. If you have a Mac you are probably not in as bad a situation since you can buy OmniGraffle for $79. But for those of us without a Mac or who are just very cheap I think the best solution starts with Inkscape. I've put together a list of 10 tips that will help make better looking diagrams with Inkscape.

You will want to download Inkscape first. They have binaries for Linux, Windows and Mac OS X so it should be easy enough to get it installed. After installing Inkscape it is a good idea to browse their tutorials via the help->tutorials menu.

1. Find a good color scheme

This is one of the most important things you need to do. You don't want the boring black and white diagrams, you want something that has a little color to it. You can use a color picker or you can check out colourlovers.com where people vote on different schemes. I like colourlovers.com because they take items like fruit baskets and convert those into schemes.

I'm using the following color scheme for the examples here:

2. Use all of the space

Don't be afraid to use the sides of the screen as a scratch pad. This comes in handy when you want to create smaller images to use in the main drawing area. When you are ready to export you can export just the "page" and you won't see the outside area in the final result.

3. Learn the hot keys

Learning the hot keys will speed up your drawing. The following hot keys are the ones I use the most:

  • group – Ctrl-G
  • un-group – Ctrl-Shift-G
  • create square – F4
  • create circle – F5
  • create polygons – *
  • transform – F1

4. Use zoom to work close in then zoom out and scale

I use the zoom function to find a blank area in the "scratch pad" when I want to assemble a shape that may require fine tuning. Since this is a vector drawing it is easy to resize the item later and place it in the correct place after returning to the normal zoom.

5. Learn how to using masking to make simple shapes

You can build complex shapes using different simple shapes with path set operations (see the path menu and the advanced tutorial). Here is an example of what a difference operation can create:

First draw a square:

Then draw a circle:

Then put the circle over the square:

Now highlight both the circle and the square:

And finally hit Ctrl–:

6. Don't use the connectors tool

I started out trying to use the connectors tool to connect the objects. I found that the tool didn't work very well because the connections don't lay themselves out. If you really want any type of bend you are out of luck. They do bend when you click the layout button but they are almost always too close to the objects.

I found that it wasn't that hard to just use the polygon tool to draw the lines after I finished laying out the objects. When using the polygon tool don't add the end markers to the lines however because changing the color of the lines doesn't change the color of the markers (see step #7). I've also found that adjusting the transparency of the lines makes for a better look.

7. Create your own markers

As I said in step 6 you will want to create your own markers. For one the attributes of a line don't carry over to the marker so you need them to be separate objects. After you create your marker zoom to the end of the line to do the alignment. I found that it isn't
that hard to align the markers once you have them created. Then use the group function to group the markers with the lines.

8. Overlay text on a color to go over lines.

The easiest way I have found to overlay the text on the lines is to first create a box the same color as the background of the drawing. After you create the box you will need to force it down using the button. Now that you have a box create your text and lay it over the box. Adjust the size of the box so the entire text is inside of it and then group the box and the text together as one unit. Now you can just place the resulting unit over the line.

9. Outline your objects

Outlining your objects seems to make them pop a little more. I also reduce the transparency a little to allow any text on top of the object to stand out. You will want to consult your color scheme to figure out what two colors to use for the fill and outline.

10. Import SVG graphics

I think if I had a pen tablet I could probably draw some more complicated objects but there is no way I could draw everything I might need. Luckily there are a number of sources you can use to get SVG graphics. A number of places sell their art in SVG format and there are a few open source or free sources of clip art/icons. The source I have been using is openclipart.org (one note on this site is that they are moving to new equipment and I had to use archive.org to download the latest open source clipart archive). Another option is to convert a raster image into SVG and then import it that way. You can then use free icons like the famfamfam icons in your diagrams. Although converting to SVG this way works it is best to find images that are sourced directly to SVG from their drawing.

Bonus Tip – How to add drop shadows

Someone asked if you could do drop shadows and it looks like you can by using the Gaussian Blur. This can make things look better too but you can't use transparent objects when you do this. After redoing the example I decided I liked the drop shadows better so I've included it here.

The first thing is to copy the object you want to have the drop shadow for:

Next you want to change the color of the copy to black and set the blur to 10 or so:

Now you send the object to the background:

And last you align the object a little bit offset from the original:

Here is the final result:

And another copy of the SVG: dropshadow example

I wanted to see if I could use these tips to create a diagram that looks similar to what is on the OmniGraffle page. Here is the result of that:

Good luck and I hope this keeps your next diagram from becoming a joke.

Here are a couple links so you can download the example SVG and the cloud SVG if you want.

Tags: ,

Leave a Reply

Your email address will not be published. Required fields are marked *