Mermaid C4 図のチートシート

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

このページのすべての図は

Mernyx（macOS 向けネイティブ Mermaid エディタ）が描いたものです。ブラウザで動く Mermaid.js ではなく、App のキャンバスで使うのと同じレンダラーです。

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

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

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 のラベルつきの矢印で結ばれています。

システムを開く

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

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 つあります。

エンタープライズの境界

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

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

Bank というエンタープライズの境界に、顧客とインターネットバンキングのシステムが入っていて、Uses の矢印で結ばれています。

Mermaid C4 図のチートシート

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

システムを開く

エンタープライズの境界

Mernyx で描いてみる