| 6dd74de | | | 1 | > **Warning** |
| 6dd74de | | | 2 | > |
| 6dd74de | | | 3 | > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. |
| 6dd74de | | | 4 | > |
| 6dd74de | | | 5 | > ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/architecture.md](../../packages/mermaid/src/docs/syntax/architecture.md). |
| 6dd74de | | | 6 | |
| 6dd74de | | | 7 | # Architecture Diagrams Documentation (v11.1.0+) |
| 6dd74de | | | 8 | |
| 6dd74de | | | 9 | > In the context of mermaid-js, the architecture diagram is used to show the relationship between services and resources commonly found within the Cloud or CI/CD deployments. In an architecture diagram, services (nodes) are connected by edges. Related services can be placed within groups to better illustrate how they are organized. |
| 6dd74de | | | 10 | |
| 6dd74de | | | 11 | ## Example |
| 6dd74de | | | 12 | |
| 6dd74de | | | 13 | ```mermaid-example |
| 6dd74de | | | 14 | architecture-beta |
| 6dd74de | | | 15 | group api(cloud)[API] |
| 6dd74de | | | 16 | |
| 6dd74de | | | 17 | service db(database)[Database] in api |
| 6dd74de | | | 18 | service disk1(disk)[Storage] in api |
| 6dd74de | | | 19 | service disk2(disk)[Storage] in api |
| 6dd74de | | | 20 | service server(server)[Server] in api |
| 6dd74de | | | 21 | |
| 6dd74de | | | 22 | db:L -- R:server |
| 6dd74de | | | 23 | disk1:T -- B:server |
| 6dd74de | | | 24 | disk2:T -- B:db |
| 6dd74de | | | 25 | ``` |
| 6dd74de | | | 26 | |
| 6dd74de | | | 27 | ```mermaid |
| 6dd74de | | | 28 | architecture-beta |
| 6dd74de | | | 29 | group api(cloud)[API] |
| 6dd74de | | | 30 | |
| 6dd74de | | | 31 | service db(database)[Database] in api |
| 6dd74de | | | 32 | service disk1(disk)[Storage] in api |
| 6dd74de | | | 33 | service disk2(disk)[Storage] in api |
| 6dd74de | | | 34 | service server(server)[Server] in api |
| 6dd74de | | | 35 | |
| 6dd74de | | | 36 | db:L -- R:server |
| 6dd74de | | | 37 | disk1:T -- B:server |
| 6dd74de | | | 38 | disk2:T -- B:db |
| 6dd74de | | | 39 | ``` |
| 6dd74de | | | 40 | |
| 6dd74de | | | 41 | ## Syntax |
| 6dd74de | | | 42 | |
| 6dd74de | | | 43 | The building blocks of an architecture are `groups`, `services`, `edges`, and `junctions`. |
| 6dd74de | | | 44 | |
| 6dd74de | | | 45 | For supporting components, icons are declared by surrounding the icon name with `()`, while labels are declared by surrounding the text with `[]`. |
| 6dd74de | | | 46 | |
| 6dd74de | | | 47 | To begin an architecture diagram, use the keyword `architecture-beta`, followed by your groups, services, edges, and junctions. While each of the 3 building blocks can be declared in any order, care must be taken to ensure the identifier was previously declared by another component. |
| 6dd74de | | | 48 | |
| 6dd74de | | | 49 | ### Groups |
| 6dd74de | | | 50 | |
| 6dd74de | | | 51 | The syntax for declaring a group is: |
| 6dd74de | | | 52 | |
| 6dd74de | | | 53 | ``` |
| 6dd74de | | | 54 | group {group id}({icon name})[{title}] (in {parent id})? |
| 6dd74de | | | 55 | ``` |
| 6dd74de | | | 56 | |
| 6dd74de | | | 57 | Put together: |
| 6dd74de | | | 58 | |
| 6dd74de | | | 59 | ``` |
| 6dd74de | | | 60 | group public_api(cloud)[Public API] |
| 6dd74de | | | 61 | ``` |
| 6dd74de | | | 62 | |
| 6dd74de | | | 63 | creates a group identified as `public_api`, uses the icon `cloud`, and has the label `Public API`. |
| 6dd74de | | | 64 | |
| 6dd74de | | | 65 | Additionally, groups can be placed within a group using the optional `in` keyword |
| 6dd74de | | | 66 | |
| 6dd74de | | | 67 | ``` |
| 6dd74de | | | 68 | group private_api(cloud)[Private API] in public_api |
| 6dd74de | | | 69 | ``` |
| 6dd74de | | | 70 | |
| 6dd74de | | | 71 | ### Services |
| 6dd74de | | | 72 | |
| 6dd74de | | | 73 | The syntax for declaring a service is: |
| 6dd74de | | | 74 | |
| 6dd74de | | | 75 | ``` |
| 6dd74de | | | 76 | service {service id}({icon name})[{title}] (in {parent id})? |
| 6dd74de | | | 77 | ``` |
| 6dd74de | | | 78 | |
| 6dd74de | | | 79 | Put together: |
| 6dd74de | | | 80 | |
| 6dd74de | | | 81 | ``` |
| 6dd74de | | | 82 | service database1(database)[My Database] |
| 6dd74de | | | 83 | ``` |
| 6dd74de | | | 84 | |
| 6dd74de | | | 85 | creates the service identified as `database1`, using the icon `database`, with the label `My Database`. |
| 6dd74de | | | 86 | |
| 6dd74de | | | 87 | If the service belongs to a group, it can be placed inside it through the optional `in` keyword |
| 6dd74de | | | 88 | |
| 6dd74de | | | 89 | ``` |
| 6dd74de | | | 90 | service database1(database)[My Database] in private_api |
| 6dd74de | | | 91 | ``` |
| 6dd74de | | | 92 | |
| 6dd74de | | | 93 | ### Edges |
| 6dd74de | | | 94 | |
| 6dd74de | | | 95 | The syntax for declaring an edge is: |
| 6dd74de | | | 96 | |
| 6dd74de | | | 97 | ``` |
| 6dd74de | | | 98 | {serviceId}{{group}}?:{T|B|L|R} {<}?--{>}? {T|B|L|R}:{serviceId}{{group}}? |
| 6dd74de | | | 99 | ``` |
| 6dd74de | | | 100 | |
| 6dd74de | | | 101 | #### Edge Direction |
| 6dd74de | | | 102 | |
| 6dd74de | | | 103 | The side of the service the edge comes out of is specified by adding a colon (`:`) to the side of the service connecting to the arrow and adding `L|R|T|B` |
| 6dd74de | | | 104 | |
| 6dd74de | | | 105 | For example: |
| 6dd74de | | | 106 | |
| 6dd74de | | | 107 | ``` |
| 6dd74de | | | 108 | db:R -- L:server |
| 6dd74de | | | 109 | ``` |
| 6dd74de | | | 110 | |
| 6dd74de | | | 111 | creates an edge between the services `db` and `server`, with the edge coming out of the right of `db` and the left of `server`. |
| 6dd74de | | | 112 | |
| 6dd74de | | | 113 | ``` |
| 6dd74de | | | 114 | db:T -- L:server |
| 6dd74de | | | 115 | ``` |
| 6dd74de | | | 116 | |
| 6dd74de | | | 117 | creates a 90 degree edge between the services `db` and `server`, with the edge coming out of the top of `db` and the left of `server`. |
| 6dd74de | | | 118 | |
| 6dd74de | | | 119 | #### Arrows |
| 6dd74de | | | 120 | |
| 6dd74de | | | 121 | Arrows can be added to each side of an edge by adding `<` before the direction on the left, and/or `>` after the direction on the right. |
| 6dd74de | | | 122 | |
| 6dd74de | | | 123 | For example: |
| 6dd74de | | | 124 | |
| 6dd74de | | | 125 | ``` |
| 6dd74de | | | 126 | subnet:R --> L:gateway |
| 6dd74de | | | 127 | ``` |
| 6dd74de | | | 128 | |
| 6dd74de | | | 129 | creates an edge with the arrow going into the `gateway` service |
| 6dd74de | | | 130 | |
| 6dd74de | | | 131 | #### Edges out of Groups |
| 6dd74de | | | 132 | |
| 6dd74de | | | 133 | To have an edge go from a group to another group or service within another group, the `{group}` modifier can be added after the `serviceId`. |
| 6dd74de | | | 134 | |
| 6dd74de | | | 135 | For example: |
| 6dd74de | | | 136 | |
| 6dd74de | | | 137 | ``` |
| 6dd74de | | | 138 | service server[Server] in groupOne |
| 6dd74de | | | 139 | service subnet[Subnet] in groupTwo |
| 6dd74de | | | 140 | |
| 6dd74de | | | 141 | server{group}:B --> T:subnet{group} |
| 6dd74de | | | 142 | ``` |
| 6dd74de | | | 143 | |
| 6dd74de | | | 144 | creates an edge going out of `groupOne`, adjacent to `server`, and into `groupTwo`, adjacent to `subnet`. |
| 6dd74de | | | 145 | |
| 6dd74de | | | 146 | It's important to note that `groupId`s cannot be used for specifying edges and the `{group}` modifier can only be used for services within a group. |
| 6dd74de | | | 147 | |
| 6dd74de | | | 148 | ### Junctions |
| 6dd74de | | | 149 | |
| 6dd74de | | | 150 | Junctions are a special type of node which acts as a potential 4-way split between edges. |
| 6dd74de | | | 151 | |
| 6dd74de | | | 152 | The syntax for declaring a junction is: |
| 6dd74de | | | 153 | |
| 6dd74de | | | 154 | ``` |
| 6dd74de | | | 155 | junction {junction id} (in {parent id})? |
| 6dd74de | | | 156 | ``` |
| 6dd74de | | | 157 | |
| 6dd74de | | | 158 | ```mermaid-example |
| 6dd74de | | | 159 | architecture-beta |
| 6dd74de | | | 160 | service left_disk(disk)[Disk] |
| 6dd74de | | | 161 | service top_disk(disk)[Disk] |
| 6dd74de | | | 162 | service bottom_disk(disk)[Disk] |
| 6dd74de | | | 163 | service top_gateway(internet)[Gateway] |
| 6dd74de | | | 164 | service bottom_gateway(internet)[Gateway] |
| 6dd74de | | | 165 | junction junctionCenter |
| 6dd74de | | | 166 | junction junctionRight |
| 6dd74de | | | 167 | |
| 6dd74de | | | 168 | left_disk:R -- L:junctionCenter |
| 6dd74de | | | 169 | top_disk:B -- T:junctionCenter |
| 6dd74de | | | 170 | bottom_disk:T -- B:junctionCenter |
| 6dd74de | | | 171 | junctionCenter:R -- L:junctionRight |
| 6dd74de | | | 172 | top_gateway:B -- T:junctionRight |
| 6dd74de | | | 173 | bottom_gateway:T -- B:junctionRight |
| 6dd74de | | | 174 | ``` |
| 6dd74de | | | 175 | |
| 6dd74de | | | 176 | ```mermaid |
| 6dd74de | | | 177 | architecture-beta |
| 6dd74de | | | 178 | service left_disk(disk)[Disk] |
| 6dd74de | | | 179 | service top_disk(disk)[Disk] |
| 6dd74de | | | 180 | service bottom_disk(disk)[Disk] |
| 6dd74de | | | 181 | service top_gateway(internet)[Gateway] |
| 6dd74de | | | 182 | service bottom_gateway(internet)[Gateway] |
| 6dd74de | | | 183 | junction junctionCenter |
| 6dd74de | | | 184 | junction junctionRight |
| 6dd74de | | | 185 | |
| 6dd74de | | | 186 | left_disk:R -- L:junctionCenter |
| 6dd74de | | | 187 | top_disk:B -- T:junctionCenter |
| 6dd74de | | | 188 | bottom_disk:T -- B:junctionCenter |
| 6dd74de | | | 189 | junctionCenter:R -- L:junctionRight |
| 6dd74de | | | 190 | top_gateway:B -- T:junctionRight |
| 6dd74de | | | 191 | bottom_gateway:T -- B:junctionRight |
| 6dd74de | | | 192 | ``` |
| 6dd74de | | | 193 | |
| 6dd74de | | | 194 | ## Icons |
| 6dd74de | | | 195 | |
| 6dd74de | | | 196 | By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`. |
| 6dd74de | | | 197 | Users can use any of the 200,000+ icons available in iconify.design, or add other custom icons, by [registering an icon pack](../config/icons.md). |
| 6dd74de | | | 198 | |
| 6dd74de | | | 199 | After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack. |
| 6dd74de | | | 200 | |
| 6dd74de | | | 201 | ```mermaid-example |
| 6dd74de | | | 202 | architecture-beta |
| 6dd74de | | | 203 | group api(logos:aws-lambda)[API] |
| 6dd74de | | | 204 | |
| 6dd74de | | | 205 | service db(logos:aws-aurora)[Database] in api |
| 6dd74de | | | 206 | service disk1(logos:aws-glacier)[Storage] in api |
| 6dd74de | | | 207 | service disk2(logos:aws-s3)[Storage] in api |
| 6dd74de | | | 208 | service server(logos:aws-ec2)[Server] in api |
| 6dd74de | | | 209 | |
| 6dd74de | | | 210 | db:L -- R:server |
| 6dd74de | | | 211 | disk1:T -- B:server |
| 6dd74de | | | 212 | disk2:T -- B:db |
| 6dd74de | | | 213 | ``` |
| 6dd74de | | | 214 | |
| 6dd74de | | | 215 | ```mermaid |
| 6dd74de | | | 216 | architecture-beta |
| 6dd74de | | | 217 | group api(logos:aws-lambda)[API] |
| 6dd74de | | | 218 | |
| 6dd74de | | | 219 | service db(logos:aws-aurora)[Database] in api |
| 6dd74de | | | 220 | service disk1(logos:aws-glacier)[Storage] in api |
| 6dd74de | | | 221 | service disk2(logos:aws-s3)[Storage] in api |
| 6dd74de | | | 222 | service server(logos:aws-ec2)[Server] in api |
| 6dd74de | | | 223 | |
| 6dd74de | | | 224 | db:L -- R:server |
| 6dd74de | | | 225 | disk1:T -- B:server |
| 6dd74de | | | 226 | disk2:T -- B:db |
| 6dd74de | | | 227 | ``` |