Tutorial

Building Your First Network Diagram

Welcome to the tutorial on creating your initial network diagram. In this session, we will guide you through the process of constructing a straightforward website architecture. The diagram will showcase a frontend node accessible on the Internet, accompanied by backend nodes, including an API bakcned node and a Database node. Following this, we will incorporate various flows to illustrate the communication dynamics among these distinct nodes. Let's dive in!

Let's start by incorporating the frontend network. To achieve this, introduce a new key under the networks mapping. Currently, set its value as empty; we will fill in the details shortly.

networks:
  Frontend:

This is the result.

Now, let's add the website node to this frontend network:

networks:
  Frontend:
    nodes: Website

A new node, named Website has been added to the diagram:

Note

In this example, the Website node was implicitly defined by including it within a network. However, we'll explore later how it is also feasible to explicitly define a node, offering greater customization options and additional settings.

Next, include the backend network and establish a connection for the Website node to this newly introduced network. To accomplish this, extend the configuration to accommodate the backend network:

networks:
  Frontend:
    nodes: Website
  Backend:
    nodes: Website

As you figured it out, a node has the capability to be linked to multiple networks concurrently:

Let's proceed by introducing API, Database and Cache nodes to the backend network. To achieve this, employ list syntax to enumerate and connect multiple nodes within the backend network.

networks:
  Frontend:
    nodes: Website
  Backend:
    nodes: [Website, API backend, Database, Cache]

The application automatically arranges the new nodes and sizes them based on the necessary space to accommodate their respective names. This automated layout ensures an organized and visually appealing representation of the nodes within the diagram.

Note

You might have observed that we utilized a combination of strings and lists for the nodes values. The application detects these variations and dynamically determines how to interpret the nodes data.

Now, let's establish representation of the communication dynamics within our architecture. Flows are defined under the flows key. Let's define an API flow from our website to our API backend node:

networks:
  Frontend:
    nodes: Website
  Backend:
    nodes: [Website, API backend, Database, Cache]

flows:
  API:
    from: Website
    to: API backend