# Mermaid アーキテクチャ図のチートシート

サービスと、そのサービスが属するグループ、そしてサービス間のエッジ。

## サービス

丸括弧がアイコンを、角括弧がラベルを選び、id はほかの行が指す先です。

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

![サービス 3 つ。サーバーアイコンつきの Web app、データベースアイコンつきの 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 の 2 つのサービスが入っています。](/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
```

![サービス 3 つ。Service A が右の Service B と、上の Service 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
```

![ラベルなしの点を通して結ばれたサービス 2 つ。](/diagrams/architecture/junction.svg)

## Mernyx で描いてみる

.mmd ファイルを開いて、キャンバスでノードを動かしてみてください。ソースコードもついてきます。macOS ネイティブで、ブラウザは介在しません。