C4モデルとは
ソフトウェアのアーキテクチャを表現するためのモデル。
- コンテキスト（context）
- コンテナ（containers）
- コンポーネント（components）
- コード（code） で構成される。
C4モデルは特別な表記法を規定していない。以下、ダイアグラムの図はThe C4 model for visualising software architectureを参考に作成した。
flowchart TD
ソフトウェアシステム:::system
ソフトウェアシステム --> containerA(コンテナ)
ソフトウェアシステム --> containerB(コンテナ)
ソフトウェアシステム --> containerC(コンテナ)
componentA1:::dot
containerA:::dot --> componentA1(コンポーネント)
componentA:::dot
containerB --> componentA(コンポーネント)
containerB --> componentB(コンポーネント)
containerB --> componentC(コンポーネント)
containerB:::container
componentC:::dot
componentA2:::dot
containerC:::dot --> componentA2(コンポーネント)
componentB --> codeA(コード)
componentB --> codeB(コード)
componentB --> codeC(コード)
componentB:::component
codeA:::code
codeB:::code
codeC:::code
classDef dot fill:#eef,stroke:#f66,stroke-width:2px,color:#aaa,stroke-dasharray: 5 5
classDef system fill:#faa,stroke:#333,color:#fff,stroke-width:4px
classDef container fill:#44f,stroke:#333,color:#fff,stroke-width:4px
classDef component fill:#77f,stroke:#333,color:#fff,stroke-width:4px
classDef code fill:#aaf,stroke:#333,color:#fff,stroke-width:4px
レベル1 システムコンテキスト ダイアグラム
対象システムが、それを使用する人や関連する他システムとの関係性、どのような位置づけにあるかを図示する。
flowchart TD
pbc(((銀行の顧客))) --> |口座残高参照,支払いに使用|ibs(インターネットバンキングシステム):::system
ibs --> |口座情報取得,支払いに使用|mbs(メインフレームバンキングシステム)
ibs --> |メール送信に使用|es(E-mailシステム)
es --> |メール送信|pbc
classDef system fill:#faa,stroke:#333,color:#fff,stroke-width:4px
システムコンテキスト ダイアグラムの例
レベル2 コンテナ ダイアグラム
ソフトウェアシステムを拡大したもので、それを構成するコンテナ（アプリケーション、データストア、マイクロサービスなど）を図示する。
flowchart TB
subgraph インターネットバンキングシステム
direction TB
wa(Webアプリケーション\nJava ans Spring MVC):::container
spa(シングルページアプリケーション\nJavaScript and Angular):::container
mba(モバイルアプリケーション\nXamarin):::container
wa --> |顧客のブラウザへ配信|spa
spa --> |API呼び出し JSON,HTTPS|api(APIアプリケーション\nJava ans Spring MVC):::container
mba --> |API呼び出し JSON,HTTPS|api
api --> |読み込み, 書き込み|db[(データベース\nOracle Database)]:::container
end
pbc(((銀行の顧客)))
pbc --> |サイトを開き使用|wa
pbc --> |口座残高参照,支払いに使用|spa
pbc --> |口座残高参照,支払いに使用|mba
es --> |メール送信|pbc
api --> |メール送信に使用|es(E-mailシステム)
api --> |API呼び出し XML,HTTPS|mbs(メインフレームバンキングシステム)
classDef container fill:#44f,stroke:#333,color:#fff,stroke-width:4px
コンテナ ダイアグラムの例
レベル3 コンポーネント ダイアグラム
個々のコンテナにズームインし、その中のコンポーネントを表示する。コードベースのなかの実際の抽象概念（たとえば、コードのグループ化など）にマップする。
flowchart TB
spa(シングルページアプリケーション\nJavaScript and Angular):::container
mba(モバイルアプリケーション\nXamarin):::container
subgraph APIアプリケーション
sic(サインインコントローラ\nSprint MVC Rest Controller):::component
sic --> |使用する|sc(セキュリティコンポーネント\nSpring Bean):::component
rpc(パスワードリセットコントローラ):::component
rpc --> |使用する|sc
rpc --> |使用する|ec(E-mailコンポーネント):::component
asc(アカウントサマリコントローラ\nSprint MVC Rest Controller):::component
asc --> |使用する|mbsf(メインフレームバンキング\nシステムFacade\nSprint Bean):::component
end
spa --> |APIコール\nJSON, HTTPS|sic
spa --> |APIコール\nJSON, HTTPS|rpc
spa --> |APIコール\nJSON, HTTPS|asc
mba --> |APIコール\nJSON, HTTPS|sic
mba --> |APIコール\nJSON, HTTPS|rpc
mba --> |APIコール\nJSON, HTTPS|asc
sc --> |読み込み,書き込み|db[(データベース\nOracle Database)]:::container
ec --> |メール送信で使用|es(E-mailシステム)
mbsf --> |APIコール\nXML, HTTPS|mbs(メインフレームバンキングシステム)
classDef container fill:#44f,stroke:#333,color:#fff,stroke-width:4px
classDef component fill:#77f,stroke:#333,color:#fff,stroke-width:4px
コンポーネント ダイアグラムの例
レベル4 コード
コンポーネントがどのように実装されているかを示す。
---
title: com.bigbankplc.intenetbanking.componet.mainframe
---
classDiagram
MainframeBankingSystemFacadeImpl ..> BankingSystemConnection : +uses
MainframeBankingSystemFacadeImpl ..> GetBalanceRequest : +creates
MainframeBankingSystemFacadeImpl ..> GetBalanceResponse: +parses
MainframeBankingSystemFacadeImpl ..> MainframeBankingSystemException : +throws
BankingSystemConnection ..> AbstractRequest : +sends
BankingSystemConnection ..> AbstractResponse : +receives
MainframeBankingSystemException --|> InternetBankingSystemException
GetBalanceRequest --|> AbstractRequest
GetBalanceResponse --|> AbstractResponse