Building Diagram Documents

Print Friendly, PDF & Email

◷ Reading Time: 8 minutes

Preparation

When the editor is a Diagram editor, then all the techniques we described for building tree are applicable. However, creating a diagram using the keyboard may not be as easy as using a tree. Also, please keep in mind that positioning an item is not valid in a diagram.

Let’s set up a project and add a new Generic Flow rule to it:

Drag and Drop

Using drag and drop techniques, add three nodes to the Diagram:

  1. Start
  2. Action
  3. End

And build the following Diagram model:

Hover and Select Nodes

When you hover (going over) any node on the diagram, you will see that a couple of small red circles will appear on that element.

Multiple Nodes Selection

To select multiple nodes, you can just press your left mouse button on an empty space, hold the mouse button down and drag your mouse until you cover all the nodes you want to select by the transparent blue selection guild

and then release your mouse button

What you will see is that multiple items will be selected (having the small white and gray rectangle around them).

Move and Resize Nodes

To move one or more nodes in a Diagram, you need to select them and then move your mouse to the center of a node over the white or gray rectangle. Then hold down your left mouse button and drag it.

After you have have positioned the node in the new location, release your mouse button. If you select multiple nodes, you can move them all together.

For resizing a node, you do the same, but instead of pointing your mouse at the center of the node, you go over the corner rectangles. Then you press the left mouse button, hold and drag it.

And when it is the size you want, release your mouse button. You can resize nodes in any direction you want by using all the edges controlling the white rectangles.

Adding Text

You can add display text to nodes on a diagram. To add a text you need to hover on the node and then double click on that node. When you do that, a text editor will appear.

And once you have finished editing the text, click somewhere outside of that text editor.

Please note that in the in-place text editor ‘Enter’ goes to the next line, which is useful if you need to add multiple lines of text.

Resize and Relocate Text

From version 8 of FlexRule Designer you will have the ability to move and resize the nodes’ label.

For example, below is an Activity node.

If you click on the node, you will see the anchor points to resize or move.

If you click on the node while pressing ALT button on the keyboard you will see the anchor points around the labels.

It gives you the ability to resize and move the labels.

Oversized Model

If you have an oversized model that does not fit into your screen, the scroll bars will let you scroll to the model and view different parts of it.

You also can use tools for an oversized model that let you manage a big model.

Overview: This loads the smaller version of diagram in a separate window.

Then you can select what part of the diagram comes to the current view by moving the active area on the overview window.

Zooms:

  • Zooms the model in.
  • Zooms the model out, so that it will fit on your screen.
  • Sets the zoom option in the normal view.

Connecting Nodes

To connect nodes, you need to first select the type of connection from your toolbox

and then:

Hover on the source node that you want to connect to a destination node. Please note when a connection is selected in the toolbox, by hovering on a node, your mouse icon becomes like a small hand.

Press the left mouse button and drag it to the other element you want to connect to

And release the mouse button – the connection will be created

Connection Types

You have different types of connection shapes in your toolbox:

  1. Straight
  2. Bezier
  3. Right Angle

And you can change an existing connection to another type. First, you need to:

Select a connection

Press the small arrow-down to open the menu on the toolbar and select the connection type you like. The icon of the button will be changed.

Click on the Change button on the toolbar.

The connection type is changed.

Updated on August 5, 2019

Was this article helpful?

Related Articles