Nodes

Implicit vs. Explicit Node Description

In our tutorial exploration, we've delved into the process of connecting nodes to networks, primarily achieved by listing them under the nodes parameter of the respective networks. Let's examine this with a practical example:

networks:
  frontend:
    nodes: [Website, LB]

Here, the nodes Website and LB are implicitly described. Essentially, this creates a straightforward representation of the nodes. However, should you wish to finely tailor the appearance of a node, a more detailed, explicit description is necessary under the nodes parameter. This step allows you to exert control over various attributes such as color, icon, and other visual aspects of the node in the generated diagram.

To enable this customization, it's imperative to define these parameters under the same node name utilized in both the networks and flows sections.

Parameters

Label

Parameter name	Value type	Value
label	string	any

The label parameter offers the option to customize a label for the designated node. In cases where it is not explicitly defined, the node's name is automatically employed as the default label.

Example

nodes:
  LB:
    label: API Load Balancer

networks:
  frontend:
    nodes: [Website, LB]

Color

Parameter name	Value type	Value
color	string	any HTML color (prefixed with #) or a color from the built-in colors

INFO

Since the "#" symbol denotes the beginning of a comment, HTML colors (which start with #) must be enclosed in double quotes to prevent ambiguity.

Example

nodes:
  Website:
    color: orange     #picked from the built-in colors
  LB:
    color: "#4dd0e1"  #HTML color enclosed in double quotes

networks:
  frontend:
    nodes: [Website, LB]

Icon

Parameter name	Value type	Value
icon	string	name of a built-in icon

The official AWS, Microsoft Azure and Google Cloud Platform icons are available.

Example

nodes:
  Website:
    icon: aws-amazon-ec2
  DB:
    icon: gcp-cloud-sql

networks:
  frontend:
    nodes: Website
  backend:
    nodes: [Website, DB]