1/5/13

10 Tips For Creating Good Looking Diagrams Using Inkscape

IONCANNON
ThoughtsonSoftwareDevelopmentandEngineering About Archives Projects Contact Sitemap

10TipsForCreatingGoodLooking DiagramsUsingInkscape
ByCARSON|Published:JULY 11, 2007

AboutMe
I am Carson McDonald a software engineer and this blog is a small slice of what I do every day. I started developing software in 1989 and since then have work with a wide range of languages and systems. You can also find me at the following: GitHub Twitter LinkedIn Stack Overflow

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.Findagoodcolorscheme 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:

Search
To search, type and hit enter

Categories
database administration gis java linux meta php programming ruby software system administration Uncategorized utilities web design

RSSLinks
All posts All comments

2.Useallofthespace Don't be afraid to use the sides of the screen as a scratch pad. This comes in
www.ioncannon.net/utilities/123/10tipsforcreatinggoodlookingdiagramsusinginkscape/ 1/15

1/5/13

10 Tips For Creating Good Looking Diagrams Using Inkscape

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.Learnthehotkeys 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.Usezoomtoworkcloseinthenzoomoutandscale 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.Learnhowtousingmaskingtomakesimpleshapes 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:

www.ioncannon.net/utilities/123/10tipsforcreatinggoodlookingdiagramsusinginkscape/

2/15

1/5/13

10 Tips For Creating Good Looking Diagrams Using Inkscape

Then draw a circle:

Then put the circle over the square:

www.ioncannon.net/utilities/123/10tipsforcreatinggoodlookingdiagramsusinginkscape/

3/15

1/5/13

10 Tips For Creating Good Looking Diagrams Using Inkscape

Now highlight both the circle and the square:

And finally hit Ctrl:

www.ioncannon.net/utilities/123/10tipsforcreatinggoodlookingdiagramsusinginkscape/

4/15

1/5/13

10 Tips For Creating Good Looking Diagrams Using Inkscape

6.Don'tusetheconnectorstool 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.Createyourownmarkers 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.Overlaytextonacolortogooverlines. 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.

www.ioncannon.net/utilities/123/10tipsforcreatinggoodlookingdiagramsusinginkscape/

5/15

1/5/13

10 Tips For Creating Good Looking Diagrams Using Inkscape

9.Outlineyourobjects 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.ImportSVGgraphics 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.

www.ioncannon.net/utilities/123/10tipsforcreatinggoodlookingdiagramsusinginkscape/

6/15

1/5/13

10 Tips For Creating Good Looking Diagrams Using Inkscape

BonusTipHowtoadddropshadows 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:

www.ioncannon.net/utilities/123/10tipsforcreatinggoodlookingdiagramsusinginkscape/

7/15

1/5/13

10 Tips For Creating Good Looking Diagrams Using Inkscape

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:

www.ioncannon.net/utilities/123/10tipsforcreatinggoodlookingdiagramsusinginkscape/

8/15

1/5/13

10 Tips For Creating Good Looking Diagrams Using Inkscape

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

Here is the final result:

www.ioncannon.net/utilities/123/10tipsforcreatinggoodlookingdiagramsusinginkscape/

9/15

1/5/13

10 Tips For Creating Good Looking Diagrams Using Inkscape

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:

www.ioncannon.net/utilities/123/10tipsforcreatinggoodlookingdiagramsusinginkscape/

10/15

1/5/13

10 Tips For Creating Good Looking Diagrams Using Inkscape

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: inkscape, diagram

RelatedPosts
VNC on OS X + Devils Pie = seamless desktop Creating Flash Videos Using FFMpeg How to create iPhone wireframes with Inkscape How to set up different window managers with VNC Tape drives are obsolete Bookmarkto:

This entry was posted in utilities

HowtocreateaFedora7InstanceforEC2

ConnectiontimeoutswiththeApache commonsTelnetClient

14Comments
www.ioncannon.net/utilities/123/10tipsforcreatinggoodlookingdiagramsusinginkscape/ 11/15

1/5/13

10 Tips For Creating Good Looking Diagrams Using Inkscape

DemetriosKyriakis
July11,2007at12:34pm

What about "drop shadows" and "outer glow" ? How to do them easily with InkScape? (I only know a very complicated solution) I think they are the most used "effects" for good looking diagrams (just look at Omnigraffle they are default enabled so no extrawork is required). Those effects with a few rounded corners make even black and white diagrams look good. Thank you, Demerios.

carson
July11,2007at12:44pm

I'll see if I can get the drop shadows and outer glow going then update the post. I'm pretty sure you can.

AndrewMcVeigh
July12,2007at4:10am

Hey very nice. thanks for the explanation of an impressive looking diagram. Cheers, Andrew

DemetriosKyriakis
July12,2007at5:33am

Thank you very much for the update. However, this is exactly the "complicated" method I was aware of :(. I was hoping (wish thinking, I know :) ) that there's some trick (or plug-in or macro) to do it simpler. This approach has several disadvantages (I mention just a few): #1. it's just too much work compared to a simple setting (or even nothing) that other tools offer. #2. you mentioned it no transparent or translucent "nodes". #3. Not just creation is a lot of work, but modification too. The lifecycle of a diagram does not consist of only one version, so every modification will imply redoing a lot of work, since the "shadow" is not "sticky" nor "intelligent", to move or scale or transform together with the "node". #4. It's hard to do it uniform for all nodes since it's not automatic, nor are there simple ways to ensure that the "delta" is equal (or looks equal for all nodes). Even worse, after small changes, even if the shadows were aligned perfectly it happens that the modified one is no more aligned. (it happened to just too many times) #5. The 10% blur doesn't make shadows look uniform on all node forms or colors. One needs a very good eye and many adjustments (tools do that that automatically, so one is not even aware of the problem). #6. For lines is even worse cause one is tunning them allot to look perfect, so this requires a lot of changes for the shadows too. #7. Adding other effects (like glow or highlight) requires even more tricks with extra layers/copies and this ampliffies the problems from #1 to #6 even more. Sorry for the many "negative" points, but I was hoping for a "productive" solution like is the one in Photoshop (where it's a simple click or shortcut), or Omnigraffle and other diagram tools where is a system wide setting and the tool knows to calculate and adjust everything to look uniform.

www.ioncannon.net/utilities/123/10tipsforcreatinggoodlookingdiagramsusinginkscape/

12/15

1/5/13

10 Tips For Creating Good Looking Diagrams Using Inkscape You own a great merit for taking the time to describe this, and it's fantastic that you could achieve the same result. The problem is however: what price does to user pays for using Inkscape? In this case: extremly huge amount of time :(. To make an analogy using Inkscape looks like using Assembler instead of a ligh level language: one can achieve the same results, but the effort :(. One more time, I would like to thank you for the great article. Demetrios.

tom
July12,2007at6:44am

Re using blur as a drop shadow, tip 1: select *all* the objects that you what to have a shadow of at once, duplicate, change colour, add blur, use arrow keys to offset and then lower to bottom of the stack. note that all the drop shadows are now the same size This works remarkably well, and is much quicker. should address your problems 1 and 5 although your other points still stand :-(

carson
July12,2007at7:07am

I think the key is to buy something like OmniGraffle if you are creating diagrams all the time or creating them directly to be shown. I don't mind looking at a Dia diagram or a scribble myself but there are times when you need to convert those finished diagrams into something that won't burn peoples eyes.

levhita
July16,2007at3:16pm

You can always make your diagrams in Dia (easy to make and modify) and export them to SVG (actually Dia uses SVG internally) to final editing and presentation. Dia already has pretty neat shapes, arrows and lines. they only need a little color with some shadows.

Alex
August24,2007at4:05am

I think the issue with dropshadows can be simplified a bit; the workaround is as follows: 1. create one shape of each type and size 2. place them on a pallette outside the page area 3. add dropshadows as you like 4. use Alt+D instead of Ctrl+D when you copy a shape and move it to a diagram Alt+D will not make a copy, but use a reference to the original shape. If you modify either the reference, or the original, all the other shapes that reference it will also be modified automatically. This is something like having a pointer to a variable in C :-) If you update the value, anything else that points to it is also updated.

doug www.ioncannon.net/utilities/123/10tipsforcreatinggoodlookingdiagramsusinginkscape/ 13/15

1/5/13
September6,2007at4:34pm

10 Tips For Creating Good Looking Diagrams Using Inkscape

You glossed over the part about creating the connectors. I've found this REALLY challenging to do in Inkscape, so making flowcharts is a total pita. Do you have any howto tips for creating the connectors, arrows, etc.?

Morten
September27,2007at7:50am

Making the line markers have the same color as the lines can be done using Effects Change Path Color Markers to Match Stroke.

Gerald
December11,2008at9:46pm

Thanks a lot for this nice set of tips. I found myself in the same situation as you, considering for example Jude diagrams too boring and unpretty, and wanted something better. For now, getting used to the key bindings of Inkscape and knowing some tips (thank you!) is enough for me to create diagrams quite quickly. About connectors, I was trying to use them effectively but this is a hard thing to do. As you cannot control the path of the connectors, break them into multilines, or choosing another anchor point than the center of objects, drawing UML diagrams is quite a challenge I found that using normal path, or polygons is just worth it. Anyway, thanks for the tips and the ideas!

artworkbean
March19,2009at8:37am

thank for very basic tips that average joe could do somethin cool with inkscape. check this guy do cartoon with inkscape too: http://inkscapetutorials.blogspot.com/2009/03/trace-marie-cats-head.html

SteveDodier
June1,2009at2:40am

Hey, for the arrows not being colored, you can turn the line+end marker into a path (there's a menu entry for that, i can't remember it's english exact name though). Then, you can colorize the whole path as any other object !

Peter
August3,2009at3:29pm

Excellent tutorial. As for drop shadows, it looks like the Inkscape manual shows how to make a live drop-shadow filter! Now we're getting closer to OmniGraffle territory

6Trackbacks
1. By 10 Tips For Creating Good Looking Diagrams Using Inkscape the inkscape tutorials blog a big list of cool inkscape tutorials on August 15, 2007 at 5:15 pm 2. By 10 Tips For Creating Good Looking Diagrams Using Inkscape @ IONCANNON Craignicols Weblog on September 4, 2007 at 6:09 am 3. By 25 Tutorials To Get You Started With Inkscape | LinuxHaxor.net on March 31, 2009 at 11:00 am 4. By How to create iPhone wireframes with Inkscape | IONCANNON on June 12, 2009 at 5:40 am 5. By Web Hosting News Blog Archive MOD Validation Workflow on October 5, 2009 www.ioncannon.net/utilities/123/10tipsforcreatinggoodlookingdiagramsusinginkscape/ 14/15

1/5/13

10 Tips For Creating Good Looking Diagrams Using Inkscape at 8:30 am 6. By phpBB Blog MOD Validation Workflow on October 21, 2009 at 6:08 am

PostaComment
Your email is never published nor shared. Required fields are marked *
Name *

Email *

Website

Comment

YoumayusetheseHTMLtagsandattributes: < ah r e f = " "t i t l e = " " >< a b b rt i t l e = " " > < a c r o n y mt i t l e = " " >< b >< b l o c k q u o t ec i t e = " " >< c i t e >< c o d e >< d e ld a t e t i m e = " " > < e m >< i >< qc i t e = " " >< s t r i k e >< s t r o n g > Post Comment

IONCANNON 2013

www.ioncannon.net/utilities/123/10tipsforcreatinggoodlookingdiagramsusinginkscape/

15/15