📌 How to design cloud architectures?
Published: 2024-01-05 08:00:00

## I. Options bar

The options bar is a bar situated on top of the architecture that allows you to configure visual elements. It is always visible and can be moved around the page easily.

![Option bar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3z5xnr7m7xhvruwcwtr.png)

The options bar contains the following elements:

- **Change the grid to squares**: This button allows you to change the grid to squares. It is useful when you want to align resources in the architecture.

![Change the grid to squares](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jcd2fktznamnm4pnes95.png)

- **Change the grid to dots**: This button allows you to change the grid to dots.

![Change the grid to dots](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yl44v5lsgbxecbb0vo4n.png)

- **Zoom in**: This button allows you to zoom in on the architecture.

![Zoom in](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ao0y2j9n3vgecbjijnnp.png)

- **Fit content**: This button allows you to automatically fit the content of the architecture in the screen. It is useful when you have zoomed in or out of the architecture and you want to go back to the original size.

![Fit content](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3vb6t2vl8192fqur3mc.png)

- **Zoom out**: This button allows you to zoom out the architecture.

![Zoom out](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jq9jay8g21lmzjyi28v.png)

- **Undo**: This button allows you to undo the last action you did in the architecture.

![Undo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhpurqid3dj1u1aegz87.png)

- **Redo**: This button allows you to redo the last action you did in the architecture.

![Redo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jsnsrinhtpvcpz4iba41.png)

- **Export the architecture in the Brainboard format**: This button allows you to export the architecture in Brainboard format. It is useful when you want to save the architecture on your computer or share it with someone else.

![Export](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pxehhjxyqif99fxa5hwe.png)

- **Download the diagram**: This button allows you to download the architecture in multiple formats: PNG, SVG or PDF. You can also include the background grid in the download or set a transparent background.

![Download](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/073zcmhhlghmzi4t76kc.png)

![Download the diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pl8tkj7retpdpy3hu5yn.png)

- **Create a new version**: Brainboard allows you to create multiple versions of the same architecture. This button allows you to create a new version of the architecture. It is useful when you want to create a new version of the architecture before making changes to it.

![Create a new version](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2m1wg0fq6bcw8qetkokj.png)

- **Show versions**: This button allows you to see the versions of the architecture. It is useful when you want to see the versions of the architecture and switch between them.

![Show versions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uirv6h5g01vzw519vjpl.png)

- **Readme**: This button allows you to see the readme of the architecture. It is useful when want to create a proper description of the architecture so that other team members can better understand the use case of the architecture.

![Readme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cx6byb5rdq2hbye60ojn.png)

- **Shortcuts**: This button allows you to see the shortcuts you can use inside the Brainboard editor. Knowing the shortcuts can help you speed up your workflow.

![Shortcuts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bqhnk6kip69350v5yd9.png)

![Quick shortcuts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r69mdkhrmiqprhzbwgj2.png)


- **Templates button**: The templates button is a button that allows you to open the templates modal. It is situated in the top right corner of the architecture.

![Templates](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c53uyray2671ugnzlbco.png)

- **Visibility action buttons**: The visibility actions are a set of floating action buttons that allow you to show or hide elements (main grid, titles, connectors, depends_on connectors and icons) in the architecture. They are situated in the top right corner of the architecture.

![Action buttons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xm586dc85y4849fn942.png)

- **Search resources**: The search resources is a search bar that allows you to search for resources in the architecture. It is situated in the bottom center of the architecture and it allows you to search for resources by name or by type. If a resource matches your search, it will be highlighted in the architecture, while the rest of the resources that do not match will be greyed out.

![Search resources](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qvi6w84mk1633liymt4n.png)

- **Command palette**: With just a quick keystroke (Command + K), the Command Palette opens up, allowing you to search and execute commands with lightning speed. Whether you're trying to troubleshoot an issue, switching from one architecture to another, or finding a specific configuration, you can easily find what you need by typing in your query. For example, if you want to "Create an architecture," simply type that phrase into the Command Palette and start performing complex tasks in no time.

You can watch how to use it on our YouTube channel: https://www.youtube.com/watch?v=0I-J9HlLYtI

😍 We're committed to continuously improving our product and welcome your feedback 

You can design all your cloud architectures here 👉 https://app.brainboard.co