Architecture diagram
Architecture diagrams are used to show the relationships between services and resources commonly found in cloud or CI/CD deployments. In an architecture diagram, services (nodes) are connected by lines. Related services can be placed in groups to better illustrate how they are organized.
Example
Copy
Embed
architecture-beta
group api(cloud)[API]
service db(database)[Database] in api
service disk1(disk)[Storage] in api
service disk2(disk)[Storage] in api
service server(server)[Server] in api
db:L -- R:server
disk1:T -- B:server
disk2:T -- B:db
Syntax
The building blocks of an architecture diagram are: groups, services, links, and junctions.
For supported components, an icon is declared by enclosing the icon in parentheses (), and a label is declared by enclosing the text in square brackets [].
To start an architecture diagram, you need to use the architecture-beta syntax, then list the groups, services, links, and junctions. Although these 3 building blocks can be declared in any order, you must ensure that the identifier has been declared previously by another component.
Group
The syntax for declaring a group is:
Copy
Embed
group {group id}({icon name})[{title}] (in {parent id})?
When combined:
Copy
Embed
group public_api(cloud)[Public API]
Creates a group named public_api, using the icon cloud, with the label Public API.
In addition, the optional in syntax can be used to place a group within another group.
Copy
Embed
group private_api(cloud)[Private API] in public_api
Service
The syntax for declaring a service is:
Copy
Embed
service {service id}({icon name})[{title}] (in {parent id})?
When combined:
Copy
Embed
service database1(database)[My Database]
Creates a service named database1, using the icon database, with the label My Database.
If the service belongs to a group, it can be placed within it using the optional in syntax
Copy
Embed
service database1(database)[My Database] in private_api
Link
The syntax for declaring a link is:
Copy
Embed
{serviceId}{{group}}?:{T|B|L|R} {<}?--{>}? {T|B|L|R}:{serviceId}{{group}}?
Link direction
Which side of the service the link comes out of can be specified by adding a colon : on the service side of the connection arrow along with L|R|T|B.
For example:
Copy
Embed
db:R -- L:server
Creates a link between services db and server that extends from the right side of db to the left side of server.
Copy
Embed
db:T -- L:server
Creates a 90-degree link between services db and server that extends from the top of db and the left of server.
Arrow
By adding < before the left direction, or > after the right direction, an arrow can be added to each side of the link.
For example:
Copy
Embed
subnet:R --> L:gateway
Creates a link with an arrow pointing to the gateway service.
Links outside a group
To make a link go from one group to another group or to a service within another group, a {group} modifier can be added after the serviceId.
For example:
Copy
Embed
service server[Server] in groupOne
service subnet[Subnet] in groupTwo
server{group}:B --> T:subnet{group}
Creates a link that starts from groupOne, connects to a position adjacent to server, then enters groupTwo and connects to a position adjacent to subnet.
Note that groupId cannot be used to specify a link, and the {group} modifier can only be used for services within a group.
Junction
A junction is a special type of node that can serve as a potential four-way branching point for links.
The syntax for declaring a junction is:
Copy
Embed
junction {junction id} (in {parent id})?
Copy
Embed
architecture-beta
service left_disk(disk)[Disk]
service top_disk(disk)[Disk]
service bottom_disk(disk)[Disk]
service top_gateway(internet)[Gateway]
service bottom_gateway(internet)[Gateway]
junction junctionCenter
junction junctionRight
left_disk:R -- L:junctionCenter
top_disk:B -- T:junctionCenter
bottom_disk:T -- B:junctionCenter
junctionCenter:R -- L:junctionRight
top_gateway:B -- T:junctionRight
bottom_gateway:T -- B:junctionRight
