# Mermaid 架构图速查表

服务、它们所属的分组，以及它们之间的边。

## 服务

圆括号选图标，方括号选标签，id 则是其它行指向的目标。

```mermaid
architecture-beta
  service web(server)[Web app]
  service db(database)[Database]
  service cache(disk)[Cache]
```

![三个服务框：一个带服务器图标的 Web 应用，一个带数据库图标的 Database，还有一个带磁盘图标的 Cache。](/diagrams/architecture/services.svg)

## 分组

分组是装着服务的框。in 关键字把服务放进去。

```mermaid
architecture-beta
  group api(cloud)[API]
  service web(server)[Web] in api
  service db(database)[DB] in api
```

![一个标着 API 的分组，里面装着 Web 和 DB 两个服务。](/diagrams/architecture/groups.svg)

## 边

冒号前的字母说明边从哪一侧出发，冒号后的字母说明它到哪一侧抵达。

```mermaid
architecture-beta
  service a(server)[Service A]
  service b(server)[Service B]
  service c(server)[Service C]
  a:R --> L:b
  a:B --> T:c
```

![三个服务框。服务 A 连到右侧的服务 B，也连到上方的服务 C，每根箭头都从对应的一侧出发。](/diagrams/architecture/edges.svg)

## 交汇点

交汇点是好几条边汇合的一个点。它画的时候没有自己的框。

```mermaid
architecture-beta
  service a(server)[Service A]
  service b(server)[Service B]
  junction hub
  a:R -- L:hub
  hub:R -- L:b
```

![两个服务框通过中间一个没有标签的点连在一起。](/diagrams/architecture/junction.svg)

## 在 Mernyx 里画出来

打开一个 .mmd 文件，在画布上挪一个节点，源码跟着走。macOS 原生，不经过浏览器。