> For the complete documentation index, see [llms.txt](https://community-test.logicnets.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://community-test.logicnets.com/release-9/design-considerations-and-frameworks/frameworks/visual-navigation-framework/manual-layouting-in-designer-quick-reference-guide.md).
# Manual Layouting in Designer - Quick Reference Guide
Below are some of the common tools you can use when laying out visual guidelines.
| Main Canvas | | |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Toggle manual layout mode on/off |  | Enable or disable the manual layout mode by clicking the *manual* button on the navigator menu at the bottom-left of the canvas. |
| Drag the canvas to reposition the logicnet |  | To move the canvas, left-click your mouse and continue holding down the mouse button while moving the mouse. Release your mouse button to complete the action. |
| Zoom in or out |  | Use your mouse wheel to zoom the logicnet in or out, or use the zoom icons in the bottom-left menu. |
| Enable grid lines |  | You can enable or disable the grid lines by clicking on the *grid* button from the navigator menu at the bottom-left of the canvas. |
| Center the canvas |  | You can center the logicnet on the canvas by selecting the *center* option from the navigator menu at the bottom-left of the canvas. |
| **Linking Nodes** | | |
| Add a new link |  | Right-click on a node and select the add link option from the menu.
The system attaches a link to the node you select. Using your mouse, left-click on the node to which you want to connect the link. If a node has output options (the route on output setting in the node part editor), first select the output option you want to connect to the subsequent node.
|
| Delete a link |  | Right-click on a link and select the delete option from the popup menu.
If a link has output selectors, select the section of the link that has the arrow head attached to it to see the delete option.
|
| Add an elbow joint |  | Left-click on a link and the system displays a white circle in the middle of the section of the link you clicked on. Left-click on the white circle to add the joint. Then select the joint and drag it to where you want it, keeping your left mouse button down until it is located over the target node. |
| Change the position of an output label |  | Select and drag the output label text to any other position by pressing your left mouse button and moving your mouse. Let the mouse button go when the label is positioned where you want it. |
| Change the text of an output label |  | The system automatically generates output labels based on the Values field of the Options table in a radio list.
In the part editor, navigate to the Advanced tab and provide alternative display labels for one or more specific output selector options.
Check the Only use Display Label for connectors option to use display labels (including blanks) for all outputs.
|
| **Node Layout** | | |
| Select/copy/delete a node |  | Using your mouse, left-click on a node. When a node is selected any of the menu bar options apply to the selected node, including copy/delete, add a new node, and connect to selected node. |
| Add a new node onto an existing logicnet | 
| There are three ways you can add a node onto an existing logicnet.
1. Identify the new node type from the Node Toolbox, using the expand icon to show all nodes for a given type. Then left-click on the node type, drag it over the target node, and release your mouse button. (Shown left.)
2. Preselect the preceding node in your current logicnet by left-clicking your mouse. Select the node type. You do not need to drag it onto the canvas.
3. Add a new node to the canvas, and right-click on the preceding node. Choose add link and connect to the new node. You can use this approach for making connections to nodes already on the canvas as well. (Shown left.)
|
| Reposition a node |  | Drag a node to its position by left-clicking on the node and dragging it to its new position. The canvas automatically scrolls if you come close to the edge of the canvas. |
| Snap a node to the grid |  | When you move a node, the system automatically snaps it to the grid.
You can also move a node by using the Shift+Arrow keys on your keyboard. For non-snapping moves and making small position changes, use the Ctr+Arrow keys on your keyboard.
|
| Change the size of a node | 
| Move your mouse over the right edge or bottom edges of a node and the system displays the resize arrows. Left-click on the edge and drag the edges of a node to change the width and height.
You can also right-click on a node and use the option in the popup menu to set the exact width and height of a node.
|
| Change the shape of a node |  | Some part editors include an option to change the shape of the node. For example, if you add a radio form part you will see a dropdown menu near the bottom of the part editor with the label *shape*. This menu allows you to set the node shape to rectangle, diamond, or hexagon. |
| Change the label of a node |  | You can change the label of the node in two ways:
- Open the context menu of a node by using your mouse to right-click on the node. Select the edit label option and enter a new label. To force a line wrap at a certain position click the HTML button above the input area where you typed your new label. Enter the HTML
notation where you want the line to wrap.
- You can also change a node label by right-clicking on a node and navigating to the form details option. In the node editor, navigate to the Details tab and change the node label in the label field. Use the
notation to force line breaks.
Note: For long labels the system automatically calculates line breaks only if you did not add breaks manually.
|
| Open a node/part editor | | Double-click on a node with your left mouse button. |
| Close a node/part editor | | Double-click on the canvas/graph. |
| Open node/part menu | | Right-click on a node. The system displays the full menu of options, including add links, edit label, and other common options. |
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://community-test.logicnets.com/release-9/design-considerations-and-frameworks/frameworks/visual-navigation-framework/manual-layouting-in-designer-quick-reference-guide.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.