架构图文档 (v11.1.0)

🌐 Architecture Diagrams Documentation (v11.1.0+)

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

示例

🌐 Example

语法

🌐 Syntax

一个架构的构建模块是“组”、“服务”、“边缘”和“节点”。

🌐 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，然后列出你的组、服务、边和交汇点。虽然这三个构建块可以以任意顺序声明，但必须确保标识符已由另一个组件先前声明。

🌐 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

枢纽是一种特殊类型的节点，它可以作为边的潜在四向分叉点。

🌐 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 other custom icons, by registering an icon pack.

图标安装完成后，可以在架构图中使用格式“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.