Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.1 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the section entitled GNU Free Documentation License.
This tutorial introduces Dia, the GTK-based GNU diagramming tool. We will install and configure the tool, then learn to use the basic shapes, then explore advanced features.
See the current version's INSTALL file for requirements.
To build dia, you need to install (in order):
Each of these is an autoconf-style install from sources. Binaries are available for some platforms. If you have a recent Linux installation, you may have all the pieces already.
The first time up, you click File...Preferences and fill in personal choices. These are saved in your home dir as .dia/diarc. For example, I generally use the defaults except I make sure it is set to:
After clicking OK on the preferences, you can make a diagram.
Clicking File...New gives:
Right-clicking in that window gives a diagram-specific menu. From that select File...page setup:
After clicking OK, the page setup goes away and you are ready to populate the diagram.
An organization chart requires several boxes with text, some piped solid lines, and a few dashed lines. This can be done with the basic tools. So how do we use the basic tools?
Notice the mainwindow's layout:
If you hold the mouse over an icon, a tooltip will appear. If you click an icon, the tool is activated and any clicks in the diagram will provide a copy of that tool. After clicking and placing one or more copies of a shape, click the pointer tool (top left arrow icon) before attempting to move things around. (Otherwise you will get lots of unexpected shapes.)
The easiest way to work is to:
For an org chart, we'll start with:
That looks terrible. The text doesn't line up with the boxes, and the font is tacky. How can we fix it?
We could use a box which knows about text, and resizes around text. The boxes in the Flowchart library (e.g., the square) can do this. We could even make our own shape which knows about text.
But let's do it the hard way for now, with the basic box.
First, get the font right. Select a text item. Right-click to get the menu, then Dialogs...Properties. Select Helvetica. Leave the size as is -- we can scale later. Do this for each text item.
Next, carefully center the text in the box. Drag the box bigger if needed. Since the default is snap-to-grid, it will be difficult to align the text. So let's turn off snap-to-grid for a moment: With the pointer tool, click somewhere in the diagram (but not on a specific item), and type "g". Drag the text as needed, then type "g" again to toggle back to snap-to-grid.
Ok, the text is the right font and is aligned nicely. Let's lock those box-and-text combinations together. Use the pointer to drag a selection box (dashed lines) around a box-and-text combo. Type "Ctl-G" to make them a group. Do this for each of the boxes.
If you need to un-group a combo (e.g., to edit the text or realign), type "Ctl-U". For example, we notice misspellings, so we ungroup to fix those and then regroup.
We now have:
Now we can draw some lines. We'll use the piped lines (90 degree turns). We draw them approximately from one item to the next, and then use the pointer to drag the ends directly to the handles at each end. The line end turns red when it locks in to a handle.
We want to make the lines more interesting.
In general, lines are controlled from the main window in several ways:
All of these apply to future lines. You can also modify an already-drawn line. Select it using the pointer. Right-click to get the diagram menu. Select Dialogs...properties. This brings up a dialog for changing any of the line's properties.
Thus, to fix our current lines: For each line, select the line, right-click to get the menu, select Dialogs...Properties, and change the line width from 0.1 to 0.2. Change the System Architect-to-Project Manager line to dotted line. But the wide dots look odd, so we change to dashed lines. The dashes are too long, so we make the dash interval 0.5. The net effect is:
Let's say the Systems Architect actually reports to the CIO (via a long chain of middle managers of course). We want to note that, but not over emphasize it. So we draw it in a thin line:
Ugh. We want that line to go around the outside. But there aren't enough middle bending points in the line to do it. So we select the line and the middle-click, to get the add-segment dialog. After adding a segment or two, we can drag the line to make a nice connection:
Ok, the diagram looks pretty good. Time to save it. First, we want to save the intellectual content, so we can later modify it. Second, we want to export it as a specific graphic format.
To save it, right-click for the menu, then File...Save. Insert the name, e.g., org.dia, and click OK. If you are saving a whole series of variants on the same file and need to save each to a separate file, use File...Save As. The file is saved in an XML format which is mostly Scalable Vector graphics (SVG). NOTE: Since we set Compress to No in the user preferences, we can examine the file in a text editor. Go take a look.
To export a usable image, select File...Export, and then enter the name with an appropriate extension, e.g., org.png. Look at the extensions list for candidates. If you don't have a preference, we suggest png (Portable Network Graphics).
A simple export may make a rather large image. If you look closely at the diagram window, you can see blue lines representing printable pages. Your diagram probably extends over several pages. So if you print out the diagram to a physical printer, you will need to tape the pieces together. This is not much of a concern for HTML, where the browser can pan back and forth over a large image. However, even for HTML a large image can be awkward.
So here is the recommendation:
Suppose we have four UML "class" objects, and want to draw a box around two of them. Doing so leaves the box on top and obstructs view of the two boxed classes. Putting the box in the background solves the problem.
Putting an object in the background is done by first selecting it, and then:
Now suppose we have a common background (e.g., project logo) and want to build our diagram on top of that. It is no longer convenient to do this object by object. Instead we want to establish the layers in advance and use them over time.
If you are familiar with Gimp layers, you are in business -- it is the same mechanism. Otherwise, listen carefully.
When you start a new diagram, after doing page setup, select right-click...Objects...layers. This gives:
Click on the "new layer" icon (page with corner turned down), and you will get a "New layer". It is automatically placed above the Background layer. Click on the layer's name to select it. Once selected, you can move it relative to the other layers using the up and down arrows. Of course you should leave the Background layer at the bottom of the stack.
Clicking on the eyeball next to a layer toggles whether or not it is visible in the diagram. Generally, you build each layer separately, with just it visible, but turn on all layers occasionally to check alignment.
For our example, we put a text object which says "DRAFT" on the background layer. We make this text object grey using the color selector. Then we go to the new layer and make a diagram. Making both layers visible gives:
Suppose we have several objects roughly aligned:
We could very carefully drag them around to get them aligned. But a better approach is to use the alignment functions. Select the almost-vertically-aligned circles. Right-click to get the menu, then...Objects...Horizontal...center. This moves the objects horizontally until their centers are aligned vertically.
Yes, it is a bit confusing: To align on a vertical axis, you have to select horizontal, because that is the axis on which the movement takes place.
Similarly, to align objects along a single horizontal axis, you select Objects...Vertical...center. After aligning groups vertically and horizontally, we get:
The obvious ways to select are:
But you might want something fancier. In that case, Right-click to get the menu and then Select.... This gives the dialog:
For example, applied to this diagram, after selecting the "A" object:
NOTE: If I ever figure out what the check boxes do, I'll let you know.
Dia comes with several shape libraries. It is also designed to allow you to add your own.
These libraries are of course domain-specific, so their use should be described in other contexts (e.g., UML should be discussed in a tutorial on software engineering). Here we will concentrate on the mechanics of using the shape libraries.
The libraries are saved in the share dir for wherever dia is installed. For example if which dia gives /usr/bin/dia, then we want to look at /usr/share.dia:
/usr/share/dia/ dia_logo.png Dia's logo shapes/ Flowchart/ objects, in paired files (icon and shape) magdisk.xpm icon magdisk.shape shape description ... sheets/ object descriptions in various languages (XML) ER.sheet Flowchart.sheet UML.sheet ...
For example, if we are interested in the Flowchart library, and specifically in the magnetic disk object, we find the magdisk.shape file:
<?xml version="1.0"?> <shape xmlns="http://www.daa.com.au/~james/dia-shape-ns" xmlns:svg="http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd"> <name>Flowchart - Magnetic Disk</name> <description>Magnetic Disk</description> <icon>magdisk.xpm</icon> <connections> <point x="0" y="2"/> <point x="2.5" y="0.4375"/> <point x="5" y="0"/> <point x="7.5" y="0.4375"/> <point x="10" y="0"/> <point x="0" y="2.5"/> <point x="0" y="7.5"/> <point x="0" y="5"/> <point x="0" y="10"/> <point x="10" y="2.5"/> <point x="10" y="5"/> <point x="10" y="7.5"/> <point x="10" y="10"/> <point x="2.5" y="11.5625"/> <point x="5" y="12"/> <point x="7.5" y="11.5625"/> </connections> <textbox x1="0" y1="4" x2="10" y2="10"/> <svg:svg width="10" height="12"> <svg:path d="M 0,2 c 2,-1.5 3,-2 5,-2 s 3,0.5 5,2 v 8 c -2,1.5 -3,2 -5,2 s -3,-0.5 -5,-2 v -8 z M 0,2 c 2,1.5 3,2 5,2 s 3,-0.5 5,-2" style="fill: default"/> </svg:svg> </shape>
You can make your own sheets/shapes by following the above patterns.
Some shape libraries (e.g., UML) have associated processing and therefore are not just .shape files. To make your own library-with-processing requires going into the C code, and that is beyond the scope of this tutorial. (Perhaps embedded python will be supported in the future, simplifying even this adventure.)
Creator: Harry George