Create block diagrams in the Diagram Designer

Diagram Designer is an application for creating flowcharts. In general, the application is able to connect any “blocks” so even components of electric concept can act as a unit. Elements-blocks can be the user. As there is a possibility of constructing graphs, slideshows and even a built-in calculator.

How to take:

On the official page there are multiple links to the latest version (below the inscription «Download with installer» in square [] brackets).

Link to supplement language (including Russian)…nguagePack.exe – «Download Language Pack (186 kb)». (Additional link two posts below)


Installing the software: Run DiagramDesignerSetup.exe → Accept → Browse → Specify the path to the folder in which you want to install Diagram Designer → Install → Wait until the installation is finished → OK (select language) → OK (choose the file associations).
Installing Russification: Run LanguagePack.exe → Browse → Specify the path to the folder in which you want to install Diagram Designer → Install → Wait until the installation is finished → OK (select language) → OK (choose the file associations).

If the language is not changed, go to the program directory: Run DiagramDesigner.exe → File → Options → Set program language → Select in the “Russian” in the list → OK → OK → OK → Close the program.


In order to master the program, try to create a simple flowchart. It is much more effective than describe how to do this or that action.

It is assumed that you have installed the package Russification, if this is not done, you can refer to the section “Installation” on the application.

To make it easier to understand each other, let us agree to call the left column of the work area, and the column on the right – a palette of patterns. What is above them – the toolbar and the document pane, the top line – the program panel. All this is shown in the image 1.

Image 1.

The main elements of the program interface.

Choose a template that was created specifically for this tutorial:

PKM in the “Palette templates» → Download Templates → simple palette

Image 2.

Boot Process «simple» template.

Note: The red arrow in the screenshot – where to move the mouse, a circle filled with red – PKM, red empty circle – LMB.

Create a block diagram showing the actions of man making himself tea. After the exercise it is recommended to test the algorithm. Let’s start with a rectangular block of rooms, which is a unit of “action”.

To clamp paint on the block “actions» → drag on the operation area (left column) → Release the LMB.

Image 3.

Adding the new unit “action” in the work area.

Note: in the screenshot empty blue circles – hold paint if it is not clamped or released if already squeezed.

We added our first unit in the block diagram. Moreover, we are now able to add blocks in principle – in general, we will be adding blocks moving to “Template Palettes” and its location in the “workspace”.

Now, let us specify what kind of action we are doing, because otherwise the unit does not make sense:

2hLKM → LMC in the input field → Enter text “Put the kettle on the gas» → Good

Image 4.

Change the description of the block “action” to correct us.

Note: Yellow empty circle – 2xLKM (double-click the left mouse button), the black arrow – means that you need to pay for anything attention, not to transfer to the mouse cursor.

The result – the text in the block will change the fact that we have introduced the editor. As to the process of adding a new block, change a block definition in the same monotonous – clicking on a unit that supports the description 2hLKM you can change it. For example, change the description of the conditional block and write it into the desired condition or conditions.

We continue! After setting the kettle on the gas (electricity turned off), we begin to prepare the dish. Add action block and change its description in “Get a cup.” After, add one more unit operations with the description “Cover the tea leaves.” Finally, the last block of the action “Add sugar to taste.” The results of my efforts can be seen in the image 5, and compare them with your own.

Picture 5.

Adding new units of action.

The blocks are scattered at random, and it bears little resemblance to a block diagram. Of course, you can place them more or less in the “column”, but it is difficult and tedious. So now we learn the indirect method lets you do this – connection blocks:

LMC on the element “line” toolbar → hold LMB on the center block of the lower frame “Put the kettle on the gas” (there is shown a red crosshair) → Bridging the center of the upper frame “Get a cup of” block → Make sure that the cross on which we have led has changed red → Release the green paint.

Image 6.

Putting blocks.

Now, these two units are connected, unless of course you were clamped and released in the right place. At first, it is difficult to “aim”, but you get used to work with the program. To ensure that the blocks were actually connected, highlight the space where you want to do such a test. In this area, all the connections will be highlighted in the “green”, ie tic will instead of red – green.

Oh, and of course so are connected not only to block action, and all the blocks. What is important is that you can connect them only at those places (indicated by red crosses) are provided by the unit. In addition to the right of the toolbar has other connecting lines – a line with an arrow connector, curve. I propose to deal with them at your leisure.

Do not be amiss to note that you can connect not only blocks, but also the line with each other. And yet – the connection does not have to be two-way. And in general – the line can “hang in the air.”

Now, about the alignment of the blocks. Grabbed by the block “Get a cup” and see what happens. Full instructions:

Tighten the “Get a cup of” coatings on the block → not move the unit to the left until the arrow connecting the blocks are not aligned → Release Unit.

Image 7.

Aligns coupled blocks.

This is already starting to get something similar to a flowchart. Not stopping at this, we connect and align all other blocks. And then add a new type of block – block “conditions”. He will provide us with the logic – a fork in the path, call it what you want. So:

hold LMB on the block “conditions» → Drag to “workspace» → Release the LMB.

Image 8.

Adding a block “conditions”.

As you can see, adding “conditions” block is the same as adding a block of “action”. But the consolidation of the material … which without him. Now, I propose to connect the unit of action “Add sugar to taste,” and the newly conditions of the unit. As soon as you get it, it is necessary to change the description of the terms of a standard unit to “boiled kettle.” Conditions “Kettle boils” may be “YES” or “NO” (to TRUE and FALSE) – so it fits. All that within the conditions of the block is converted to “YES” and “NO” to get the program branching path.

But how to represent these alternatives “YES” and “NO” event? Adopted execution path “YES” to represent a block of conditions and way of doing “NO” to the right of it, but not at the same level and below (this shows that the program is ongoing, but not at the same level).

To carry out communication by “conditions” box (where they?) Will create those units that will go on the road, “YES” in the way “NO”. Add the Action Blocks “Wait a minute” – under the conditions of the block, and the block “Pour tea” right. Here is what you should have:

Image 9.

Add the action blocks the path of “YES” and the way “NO”.

One may wonder: what prevents us to join them right now? In principle – nothing. But it should be understood that in order to ways to “YES” (the one that goes down) will be easy to connect an ordinary line, while to connect the unit of action “Pour tea” with the block conditions “Kettle boils” is necessary or two lines, or connector. The flowcharts are not allowed “obliquely” line, so a line can not do. An example of incorrect connection via one line is represented in the image 10 and the right options – in the images 11A (two lines) and 11.b (via connector).

The connector is on the palette of patterns, and more – for a better understanding it just connects the unit with conditions by the “NO.” Figure 11.b, pay attention to the blue circle with the number “1” on the top left of him. He shows how to take the connector. And the blue circle as we know, means “hold LMB”

Image 10.

The erroneous connection conditions of the block with the block the path of “NO”.


Image 11.

The correct connection conditions of the block with the block the path of “NO”: a) by means of two lines; b) using the connector.

The result is a fork of the algorithm (the same will happen with the program flow charts), but still worth pointing out where the “YES” and “NO” especially at the beginning it is not entirely obvious. Make it as it is shown in the image 12.

Picture 12.

Adding a description to the fork of the conditions Unit.

Now perfectly clear that when there is. It remains only to think of what will happen after the action “Wait a minute,” and after the action of “Pour tea” and add it.

After “Wait a minute,” obviously, you need to check again the kettle. Those. we are back in place before the unit conditions “Kettle boils.” Make a small line down from the block “Wait a minute”, it was joined by another line running a few centimeters to the left (so that the exit to the left, “Wait a minute” block), then – the line up to the level of the middle line between the blocks “Add sugar to taste “and” kettle boils. ” It should come out something like this:

Picture 13.

Adding the way back. Part one.

It now remains to “return” to the line that runs between the blocks “Add sugar to taste” and “kettle boils.” If this is the usual line, think – would it not be ambiguity on that from the block “Add sugar to taste” are two lines, and it is not clear where to direct the program. To avoid this, we continue our journey of the three lines of the fourth, but the arrow at the end:

Picture 14.

Adding the way back. Part two, the final.

Note: The fact that we are now organized in programming is called a cycle. Perhaps you already know what it is, and now we have seen what they look like. In fact, there are special units for cycles, but graphically portray them as. It is important also in the block diagram, that we can create a principle of our program, and to better understand how to do it. And flow charts give to make it all more clearly!

Not forgetting about the block “Pour tea” continue its path. For this form the way down arrows, and then left, so that once again be on the “centerline” flowchart. These are the rules, they do block scheme more visible. After that, add the block “drink tea” and connecting it with the last line, finish the block diagram:

(In the next post … here not climbed)

Knowing these basics, you can easily master the creation of any flow charts in this program. Experiment, look for new opportunities.

Pleasant trifles

The Diagram Designer many convenient “abilities” are not just to be found to make it easier, I’ll tell you about some of them:

1. If the connection blocks (or just draw the line when or from where) hold down the Ctrl key on the keyboard, then the line will be carried out by horizontal or vertical sheet (depending on where you are driving that line). This is useful, not to straighten “a little crooked” line.

2. F5 button will bring a lot of pleasant minutes after detection. The fact that it replaces the tedious “Clicking” on the toolbar. Pressing the F5 is similar to clicking on the last-used tool in the toolbox! For example, try to draw a triangle. Coatings on tool «line» Draw a line → → → Tighten the F5 paint at one end of the line and lead to a new point → → Release → Clamp the F5 paint at one end of the second line and lead to the beginning of the first line → Release. We have drawn three lines, but clicked on the tool line only once, in other cases it was caused by the F5 key, and after press the button faster than keep the mouse around the screen and clicking

3. Ctrl + A → Ctrl + C. The result will be a picture on the clipboard. In more simple words – you can insert a picture of his block diagrams into a Word document by pressing Ctrl-V (or RMB → Paste). If you want to save the image of “a long memory,” then look at the File → Export Page …

4. To change the block diagram of the sheet scale is convenient to use such actions: Tighten Ctrl → Spin the mouse wheel

5. Hold down the mouse wheel, you can move the sheet. Try to understand what is a good judge.

6. layers and supports multiple pages within the same block diagram. Look to the bottom pane (located under the “work area” and “palette templates”)

7. You can more accurately move any selected items, if you will clamp down the Ctrl key and will press the arrow keys (←, →, ↑, ↓). Precision movement is set to File → Options → Grid.

One thought on “Create block diagrams in the Diagram Designer

  • Tuesday May 30th, 2017 at 01:02 PM

    It is in reality a great and useful piece of info. I am
    happy that you simply shared this useful info with us.
    Please keep us informed like this. Thank you for sharing.


Leave a Reply

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