# Mermaid C4 図のチートシート

アーキテクチャのビューを、3 段階のズームで見たもの。

## システムコンテキストのビュー

C4Context はもっとも広いビューで、周囲の人とシステムです。Rel はその 2 つを結び、動詞は中央に書きます。

```mermaid
C4Context
  title System context for the banking app
  Person(customerA, "Banking customer", "A customer of the bank.")
  System(SystemAA, "Internet banking", "Allows customers to see accounts and pay bills.")
  Rel(customerA, SystemAA, "Uses", "HTTPS")
```

![システムコンテキスト図。人物の Banking customer とシステムの Internet banking が、Uses と HTTPS のラベルつきの矢印で結ばれています。](/diagrams/c4/context.svg)

## システムを開く

C4Container はひとつ大きな粒度で見た図です。System_Boundary はコンテナが入る箱です。

```mermaid
C4Container
  title Container diagram for the banking app
  Person(customerA, "Banking customer")
  System_Boundary(b1, "Internet banking") {
    System(SystemA, "Banking system", "Handles accounts and payments.")
    SystemDb(SystemD, "Database", "Stores accounts and payments.")
  }
  Rel(customerA, SystemA, "Uses", "HTTPS")
  Rel(SystemA, SystemD, "Reads and writes")
```

![コンテナ図。Internet banking という境界に Banking system と Database の 2 つの箱があり、境界の外に顧客が 1 つあります。](/diagrams/c4/container.svg)

## エンタープライズの境界

Enterprise_Boundary は、人とシステムを 1 つの組織の下にまとめます。

```mermaid
C4Context
  title Enterprise boundary
  Enterprise_Boundary(b0, "Bank") {
    Person(customerA, "Customer")
    System(SystemAA, "Internet banking")
  }
  Rel(customerA, SystemAA, "Uses")
```

![Bank というエンタープライズの境界に、顧客とインターネットバンキングのシステムが入っていて、Uses の矢印で結ばれています。](/diagrams/c4/boundary.svg)

## Mernyx で描いてみる

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