architecture.md

6.3 KB228 lines

1	> Warning
2	>
3	> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
4	>
5	> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/architecture.md](../../packages/mermaid/src/docs/syntax/architecture.md).
6
7	# Architecture Diagrams Documentation (v11.1.0+)
8
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.
10
11	## Example
12
13	```mermaid-example
14	architecture-beta
15	group api(cloud)[API]
16
17	service db(database)[Database] in api
18	service disk1(disk)[Storage] in api
19	service disk2(disk)[Storage] in api
20	service server(server)[Server] in api
21
22	db:L -- R:server
23	disk1:T -- B:server
24	disk2:T -- B:db
25	```
26
27	```mermaid
28	architecture-beta
29	group api(cloud)[API]
30
31	service db(database)[Database] in api
32	service disk1(disk)[Storage] in api
33	service disk2(disk)[Storage] in api
34	service server(server)[Server] in api
35
36	db:L -- R:server
37	disk1:T -- B:server
38	disk2:T -- B:db
39	```
40
41	## Syntax
42
43	The building blocks of an architecture are `groups`, `services`, `edges`, and `junctions`.
44
45	For supporting components, icons are declared by surrounding the icon name with `()`, while labels are declared by surrounding the text with `[]`.
46
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.
48
49	### Groups
50
51	The syntax for declaring a group is:
52
53	```
54	group {group id}({icon name})[{title}] (in {parent id})?
55	```
56
57	Put together:
58
59	```
60	group public_api(cloud)[Public API]
61	```
62
63	creates a group identified as `public_api`, uses the icon `cloud`, and has the label `Public API`.
64
65	Additionally, groups can be placed within a group using the optional `in` keyword
66
67	```
68	group private_api(cloud)[Private API] in public_api
69	```
70
71	### Services
72
73	The syntax for declaring a service is:
74
75	```
76	service {service id}({icon name})[{title}] (in {parent id})?
77	```
78
79	Put together:
80
81	```
82	service database1(database)[My Database]
83	```
84
85	creates the service identified as `database1`, using the icon `database`, with the label `My Database`.
86
87	If the service belongs to a group, it can be placed inside it through the optional `in` keyword
88
89	```
90	service database1(database)[My Database] in private_api
91	```
92
93	### Edges
94
95	The syntax for declaring an edge is:
96
97	```
98	{serviceId}{{group}}?:{T\|B\|L\|R} {<}?--{>}? {T\|B\|L\|R}:{serviceId}{{group}}?
99	```
100
101	#### Edge Direction
102
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`
104
105	For example:
106
107	```
108	db:R -- L:server
109	```
110
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`.
112
113	```
114	db:T -- L:server
115	```
116
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`.
118
119	#### Arrows
120
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.
122
123	For example:
124
125	```
126	subnet:R --> L:gateway
127	```
128
129	creates an edge with the arrow going into the `gateway` service
130
131	#### Edges out of Groups
132
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`.
134
135	For example:
136
137	```
138	service server[Server] in groupOne
139	service subnet[Subnet] in groupTwo
140
141	server{group}:B --> T:subnet{group}
142	```
143
144	creates an edge going out of `groupOne`, adjacent to `server`, and into `groupTwo`, adjacent to `subnet`.
145
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.
147
148	### Junctions
149
150	Junctions are a special type of node which acts as a potential 4-way split between edges.
151
152	The syntax for declaring a junction is:
153
154	```
155	junction {junction id} (in {parent id})?
156	```
157
158	```mermaid-example
159	architecture-beta
160	service left_disk(disk)[Disk]
161	service top_disk(disk)[Disk]
162	service bottom_disk(disk)[Disk]
163	service top_gateway(internet)[Gateway]
164	service bottom_gateway(internet)[Gateway]
165	junction junctionCenter
166	junction junctionRight
167
168	left_disk:R -- L:junctionCenter
169	top_disk:B -- T:junctionCenter
170	bottom_disk:T -- B:junctionCenter
171	junctionCenter:R -- L:junctionRight
172	top_gateway:B -- T:junctionRight
173	bottom_gateway:T -- B:junctionRight
174	```
175
176	```mermaid
177	architecture-beta
178	service left_disk(disk)[Disk]
179	service top_disk(disk)[Disk]
180	service bottom_disk(disk)[Disk]
181	service top_gateway(internet)[Gateway]
182	service bottom_gateway(internet)[Gateway]
183	junction junctionCenter
184	junction junctionRight
185
186	left_disk:R -- L:junctionCenter
187	top_disk:B -- T:junctionCenter
188	bottom_disk:T -- B:junctionCenter
189	junctionCenter:R -- L:junctionRight
190	top_gateway:B -- T:junctionRight
191	bottom_gateway:T -- B:junctionRight
192	```
193
194	## Icons
195
196	By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.
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).
198
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.
200
201	```mermaid-example
202	architecture-beta
203	group api(logos:aws-lambda)[API]
204
205	service db(logos:aws-aurora)[Database] in api
206	service disk1(logos:aws-glacier)[Storage] in api
207	service disk2(logos:aws-s3)[Storage] in api
208	service server(logos:aws-ec2)[Server] in api
209
210	db:L -- R:server
211	disk1:T -- B:server
212	disk2:T -- B:db
213	```
214
215	```mermaid
216	architecture-beta
217	group api(logos:aws-lambda)[API]
218
219	service db(logos:aws-aurora)[Database] in api
220	service disk1(logos:aws-glacier)[Storage] in api
221	service disk2(logos:aws-s3)[Storage] in api
222	service server(logos:aws-ec2)[Server] in api
223
224	db:L -- R:server
225	disk1:T -- B:server
226	disk2:T -- B:db
227	```
228