We are committed to providing a seamless and intuitive diagram-building experience. We carefully designed features and operations to enhance clarity, improve accessibility, and make working with the canvas effortless. Whether you’re constructing complex systems from scratch or beautifying existing diagrams, our canvas functionalities are here to support your creativity and efficiency.

1. Automatically connect new nodes by double clicking

If you want to be faster when adding new components to your diagram, you can leverage the automatic connect feature to place them directly in the desired position on the canvas. Since the connection is built automatically, you can influence its direction and type by pressing the dedicated keyboard shortcuts. You can read more on our Framework Basics page.

SHIFT – creates a top connection;
CTRL – creates a down connection
SHIFT + CTRL – create a left connection
Moreover, holding ALT with any other shortcut will create a state connection between the two nodes;

To automatically create a new node and an adjacent connection, you must:
1. Select the origin node (already present on the canvas);
2. Double-click on a compatible node in the toolbar;
3. (Optional) Use keyboard shortcuts to modify the position of the new node;
4. Notice that the node from the toolbar is automatically linked by the origin node and added to the canvas;

info

The auto-connect tool will detect adjacent node anytime you would wish to connect multiple outputs from a single source note. As such you can simply double click to activate auto-connect and the new node will be placed next to existing nodes to avoid overlapping.

2. Use Auto-link for loose connections

When just creating a connection or when an endpoint of a connection is deleted, you are able to easily connect a new node by dragging it over the loose connection point. The canvas will inform you that the node will be automatically connected by displaying a blue circle over the endpoint. Moreover, you can activate the auto-link anchor point on both the origin and the target of any loose connections

warning

To avoid potential structural issues the auto-link anchor point will be highlighted red for incompatible nodes. A node is classified as incompatible for the following scenarios:

The node is always an origin for resource connections – Sources
The node is always a target for resource connections – Drain
The node can be connected only via state connections – Registers, End Conditions

3. Duplicate/Delete with Connections

For multiple scenarios, systems designers might want to model similar functionalities to existing ones in their diagram. To make this action as simple as possible, you can use the option Duplicate with Connections.
1. Select a node or a group of nodes;
2. Right-click on your selection to open the contextual menu;
3. Select “Duplicate w/ connections”
4. Notice that the entire selection is duplicated alongside the linked connections. The new connections are also connected to their existing origin nodes to ensure that the duplicated system uses the same values as the original one;

Using “Delete with connections” is similar to the duplicate functionality, as the selected components will be removed alongside any resource or state connection with their origin or target points linked to the selection.

info

Additionally, you can use the keyboard shortcut CTRL/CMD + SHIFT + D for duplicating w/ connections and SHIFT + Backspace for deleting with connections.

4. Highlight connected nodes

When a diagram increases in complexity and multiple subsystems interact, it can be difficult to keep track of the connections between different systems in the model. To aid with this problem, Machinations offers the functionality Highlight connected nodes, which improves visibility for selected nodes and all connected components.

When using the highlighting feature,e you are able to select the desired level of relation to the original node. As such, when selecting the first level only nodes connected by a single connection will be highlighted, however, for level 3, all chains of 3 connections will be showcased. Moreover, if the diagram contains multiple disconnected systems, you can select the last level of the highlighter – “All connected nodes” to showcase only a single subsystem.

To activate the highlight feature, right-click on your desired node, select “Highlight connected nodes” and choose your desired level of relevance.

5. Snap to grid and align with guides

The canvas Grid and Guides will help you to align your constructions automatically. When moving things around on the canvas, you will see blue guides that indicate and line up to the position of the nearest components. Moreover, using the canvas grid (colored dots) will ensure that nodes can be equidistant and symmetrical and connections follow straight lines.

info

You can enable and disable the Grid and Guide functionalities by changing the following options on global settings. Additionally you can customize the canvas by changing the color of the grid’s dots.

6. Custom multiple selection

When diagrams increase in complexity and size, modifying specific components can be tedious and time-consuming. As such, we have built the option to create a custom multiple selection containing only the desired nodes. Once the selection is created, the properties panel will display all the common fields of the selected nodes, and all their properties can be changed at once.

There are two methods of creating custom multiple selections:
A. Right-clicking on the canvas > Select > Choose the desired components – this will take into account all the components on the entire canvas;
B. Create a multiple selection > Right click one of the selected nodes > Filter selection > Choose the desired components – this will take into account only the nodes included in the original multiple selection.

warning

All the custom selections are applied only for the Selected Layer. To select nodes from multiple layers use the rubber band multiple selection by dragging the cursor over the canvas.

7. Add nodes using the Building Wizard

To enhance the experience and efficiency of creating models, you can use the diagram-building wizard to automatically create and connect components similar to the auto-connect double-click feature. To check out multiple methods of adding nodes to canvas, check out the following page: Framework Basics.

After selecting any node, hover the cursor over the directional arrows surrounding the component to display the wizard’s menu. On this panel, you can select any available node and both types of connections. This panel will detect which node you selected and display only the compatible nodes you can add as the output of the component.

Moreover, if you want to connect two existing nodes using the diagram-building wizard, select the origin node, click on the surrounding arrows, and drag the cursor toward the target node.

info

The building wizard can be enabled and disabled using the toggle “Show Diagram wizard” in the diagram’s global settings.

8. Copy and Paste Components Between Diagrams

Whether you are following a tutorial, adjusting a template, or using community diagrams, the canvas allows you to copy and paste any components between multiple diagrams. Simply create a multiple selection, press the keyboard shortcut, or click on copy on the context menu, and you can paste the nodes and connections on your new diagram.

Lab8_DinerDash

About

Tags

Enjoying what you see?Show your appreciation by saving it with a click!

Be the first to this diagram

More from Muhd Adlihaq

Product

Solutions

Roles

Resources

Compare

Pricing

Company

Enjoying what you see?
Show your appreciation by saving it with a click!