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