Graphical options

Overview

Brainboard graphical elements within the design area help you control the visual of some aspects of the interface or display useful information.

There are four groups of graphical options:

1. Options bar: It contains options that allow you to control the graphical options that are not related to a node, like the grid, the zoom, etc.
2. Templates button: It opens the templates catalog, where you can see the available cloud architecture templates and use them.
3. Nodes number: Shows either the number of nodes that are selected or present in the design area when no node is selected.
4. Groups: This button allows you to list & update all nodes' groups / Terraform files.

---

1. Options bar

#	Feature	Description
1	Select/Grab Mode	Using this option you can switch between select and grab modes. Select mode (arrow icon) allows you to select resources and interact with them Grab mode (hand icon) allows you to move the canvas.
2	Zoom in	It zooms in on the design area using its center as the zoom point. ⇒ You can also use the CTRL + mouse scroll to zoom in the canvas.
3	Fit content	It centralizes the resources present in the design area in the middle, where all nodes are visible.
4	Zoom out	It zooms out the design area using its center as the zoom point. ⇒ You can also use the CTRL + mouse scroll to zoom out the canvas.
5	Undo	Reverses the changes.
6	Redo	Restores the changes.
7	Sync information	This button opens the window that shows you architectures that are synced with the currently opened architecture design.
8	Export architecture	A. Using this option, you can either download your diagram as a PNG, SVG or PDF file. You can also include the background grid in the download or set a transparent background. B. Or, you can also export your file in Brainboard format(JSON). ⇒ You can share the JSON file with someone else or restore it in a different organization, it will create the architecture exactly as it is with its Terraform code, variables, output and ReadMe file.
9	Version history	Show architecture versions. Refer to the versioning page for more details about how to list versions and how to restore a specific one.
10	Grid view options	Available options for grid view are: Dots, Lines, and Hide.
11	Node view options	You can configure the node design using the options available in this drop-down menu. You can enable/disable the following for the nodes in your design. Show titles Show connectors Show connector labels Animate connector line Animate connector circles ⇒ These settings apply to all the nodes of the currently opened architecture diagram.
12	Readme	This opens the README of the architecture, where you can update its content. ⇒ This file will be included in the list of the files to push to git when you perform a pull request.

{% hint style="info" %} Universal Undo/Redo

Brainboard uses the backend as a store for undo and redo actions, which means, even if you reload your page, close & reopen the browser or even connect from a different computer, you can undo & redo your actions. {% endhint %}

---

2. Templates button

It allows you to open the templates catalog window, where you can see the public and private templates.

{% hint style="info" %} Refer to the template catalog page for detailed information about how to use it. {% endhint %}

---

3. Number of nodes

This button is located in the bottom-left corner of the architecture, and it shows the number of nodes in the architecture.

Selected nodes

When you select more than one node at a time, for example, when you select multiple nodes to group them, then the total number of currently selected nodes is displayed instead of all the nodes available in your architecture design.

For instance, two nodes are selected in the screenshot shared below.

---

4. Groups

You can group nodes, and they will also be moved to the same Terraform file.

The hamburger-icon button located in the bottom-right corner of the design area displays all the groups you have in the currently opened architecture design

1. Show resources: This will select and highlight all the nodes of the group in the design area. Then, you can apply bulk formatting to all the nodes of the selected group. For example, the two grouped nodes, the even_handler and the Dead Letter Queue in the screenshot shared below have a green border of the same width.

2. Delete the group: Clicking this will delete the group and put all its resources in the main file (main.tf).

❗This action doesn't delete the resources.

{% hint style="info" %} By default, all the nodes are listed/grouped in the main Terraform file, and this file cannot be deleted. {% endhint %}

How to group nodes?

To group any nodes, follow these simple steps:

1. Use the drag and select (box select) method, i.e., click and hold the left mouse button in an empty area near the first node, then drag a rectangle over the node(s) that you want to group with the first node.
2. Then, right-click over the selected nodes area, and click the Move to file option in the context menu.
3. On the Edit terraform file name popup modal, give a reasonable name to your group, and click Save.

{% hint style="success" %} Once a group is created, it is listed among other groups in the file and can be accessed using the group button (the hamburger icon) available in the bottom right corner of your Brainboard canvas. {% endhint %}