架构图文档 (v11.1.0+)

¥Architecture Diagrams Documentation (v11.1.0+)

在 mermaid-js 的上下文中，架构图用于显示云或 CI/CD 部署中常见的服务和资源之间的关系。在架构图中，服务（节点）通过边连接。相关服务可以放在组中，以更好地说明它们的组织方式。

¥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.

示例

¥Example

语法

¥Syntax

架构的构建块是 groups、services、edges 和 junctions。

¥The building blocks of an architecture are groups, services, edges, and junctions.

对于支持组件，图标通过用 () 包围图标名称来声明，而标签通过用 [] 包围文本来声明。

¥For supporting components, icons are declared by surrounding the icon name with (), while labels are declared by surrounding the text with [].

要开始架构图，请使用关键字 architecture-beta，后跟你的组、服务、边和连接点。虽然 3 个构建块中的每一个都可以按任何顺序声明，但必须小心确保标识符先前已由另一个组件声明。

¥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.

组

¥Groups

声明组的语法是：

¥The syntax for declaring a group is:

group {group id}({icon name})[{title}] (in {parent id})?

放在一起：

¥Put together:

group public_api(cloud)[Public API]

创建一个标识为 public_api 的组，使用图标 cloud，并具有标签 Public API。

¥creates a group identified as public_api, uses the icon cloud, and has the label Public API.

此外，可以使用可选的 in 关键字将组放置在组中

¥Additionally, groups can be placed within a group using the optional in keyword

group private_api(cloud)[Private API] in public_api

服务

¥Services

声明服务的语法是：

¥The syntax for declaring a service is:

service {service id}({icon name})[{title}] (in {parent id})?

放在一起：

¥Put together:

service database1(database)[My Database]

创建标识为 database1 的服务，使用图标 database，标签为 My Database。

¥creates the service identified as database1, using the icon database, with the label My Database.

如果服务属于某个组，则可以通过可选的 in 关键字将其放置在其中

¥If the service belongs to a group, it can be placed inside it through the optional in keyword

service database1(database)[My Database] in private_api

边缘

¥Edges

声明边的语法是：

¥The syntax for declaring an edge is:

{serviceId}{{group}}?:{T|B|L|R} {<}?--{>}? {T|B|L|R}:{serviceId}{{group}}?

边缘方向

¥Edge Direction

边从哪一侧出来，通过在服务连接到箭头的一侧添加冒号 (:) 并添加 L|R|T|B 来指定

¥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

例如：

¥For example:

db:R -- L:server

在服务 db 和 server 之间创建一条边，该边从 db 的右侧和 server 的左侧出来。

¥creates an edge between the services db and server, with the edge coming out of the right of db and the left of server.

db:T -- L:server

在服务 db 和 server 之间创建 90 度边，边从 db 的顶部和 server 的左侧出来。

¥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.

箭头

¥Arrows

可以通过在左侧方向前添加 < 和/或在右侧方向后添加 >，将箭头添加到边的每一侧。

¥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.

例如：

¥For example:

subnet:R --> L:gateway

创建一条带有箭头的边，进入 gateway 服务

¥creates an edge with the arrow going into the gateway service

组外的边缘

¥Edges out of Groups

要让边从一个组转到另一个组或另一个组内的服务，可以在 serviceId 之后添加 {group} 修饰符。

¥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.

例如：

¥For example:

service server[Server] in groupOne
service subnet[Subnet] in groupTwo

server{group}:B --> T:subnet{group}

创建一条从 groupOne 出来、与 server 相邻、进入 groupTwo、与 subnet 相邻的边。

¥creates an edge going out of groupOne, adjacent to server, and into groupTwo, adjacent to subnet.

需要注意的是，groupId 不能用于指定边，而 {group} 修饰符只能用于组内的服务。

¥It's important to note that groupIds cannot be used for specifying edges and the {group} modifier can only be used for services within a group.

连接点

¥Junctions

连接是一种特殊类型的节点，可充当边之间的潜在 4 路分割。

¥Junctions are a special type of node which acts as a potential 4-way split between edges.

声明连接的语法是：

¥The syntax for declaring a junction is:

junction {junction id} (in {parent id})?

图标

¥Icons

默认情况下，架构图支持以下图标：cloud, database, disk, internet, server.用户可以使用 iconify.design 中提供的 200,000 多个图标中的任何一个，也可以按照步骤 此处 添加自己的自定义图标。

¥By default, architecture diagram supports the following icons: cloud, database, disk, internet, server. Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps here.

安装图标后，可以使用 "name:icon-name" 格式在架构图中使用它们，其中 name 是注册图标包时使用的值。

¥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.